Blogger Etiket Bulutu Eklentisi

Bildiğiniz gibi blogger da yazılarımızı yazarken blogger da kategori özelliği olmadığı için etiket sistemini sitemizde kategori olarak kullanırız.Sayfamızda yer alan etiketleri de blogger ın sahip olduğu gadget lar vasıtasıyla blogumuza ekleyebiliriz.Fakat blogger ın sahip olduğu etiket görüntüleme sistemi biraz basit olduğu için çoğu kullanıcı bu görüntüleme biçimini tercih etmiyor olabiliyor.Bu yüzden blogger etiket bulutu eklentisi sayesinde blogunuzda görüntülemek istediğiniz etiketlere nasıl farklı bir görünüm kazandırırız onu sizlerle paylaşacağım :

Yapacağımız işlem gayet basit:Amacımız blogger’ın standart olarak belirttiği .label etiketine biraz CSS ekleyerek ona farklı görünüm kazandırmak üzerine olacak.Burada paylaştığım aslında bir basamak.Siz renkleri kendi isteğinize göre düzenleyebilir ve kendi tarzınızı oluşturabilirsiniz.

İlk olarak etiket gadget ın blogunuza bulut stili olarak ekli olduğundan emin olun.Bunun için Blogger>>>Yerleşim>>>Gadget Ekle>>>Etiket yolunu izleyin ve bulut stilini seçin.Kaydedin.

Şimdi Şablon dan Html/düzenle kısmına gelin ve

]]></b:skin>

Kodunu bulun.Bu kodun hemen üzerine aşağıdaki kodları ekleyin:

.label-size{  margin:0; padding:0; 
position:relative; 
} 
  .label-size a{ 
  float:left; 
  height:24px; 
  line-height:24px; 
  position:relative; 
  font-size:12px; 
  margin-bottom: 9px; 
  margin-left:20px; 
  padding:0 10px 0 12px; 
  background:#0089e0; 
  color:#fff; 
  text-decoration:none; 
  -moz-border-radius-bottomright:4px; 
  -webkit-border-bottom-right-radius:4px; 
  border-bottom-right-radius:4px; 
  -moz-border-radius-topright:4px; 
  -webkit-border-top-right-radius:4px; 
  border-top-right-radius:4px; 
  } 
  .label-size a:before{ 
  content:""; 
  float:left; 
  position:absolute; 
  top:0; 
  left:-12px; 
  width:0; 
  height:0; 
  border-color:transparent #0089e0 transparent transparent; 
  border-style:solid; 
  border-width:12px 12px 12px 0; 
  } 
  .label-size a:after{ 
  content:""; 
  position:absolute; 
  top:10px; 
  left:0; 
  float:left; 
  width:4px; 
  height:4px; 
  -moz-border-radius:2px; 
  -webkit-border-radius:2px; 
  border-radius:2px; 
  background:#fff; 
  -moz-box-shadow:-1px -1px 2px #004977; 
  -webkit-box-shadow:-1px -1px 2px #004977; 
  box-shadow:-1px -1px 2px #004977; 
  } 

.label-size a:hover{background:#555;} 
.label-size a:hover:before{border-color:transparent #555 transparent transparent;}

Eğer farklı bir tarz arıyorsanız aşağıdaki resimdeki tarzı da deneyebilirsiniz.Bunun için eklemeniz gereken kod :

 

.label li {         background: linear-gradient(to bottom, #6b6b6b 0%, #6b6b6b 4%, #333333 1%, #2b2b2b 100%) repeat scroll 0 0 transparent;         border: 1px solid;         border-radius: 6px 6px 6px 6px;         float: left;         font-size: 116%;         list-style: none outside none;         margin: 2px;         padding: 4px;         transition: all 0.3s ease 0s;     } .label a {     color: #fff;     text-decoration: none; } .label li:hover {     transform: rotate(351deg) scale(1.7); } 

Şimdi şablonunuzu kaydedin ve sayfanızı görüntüleyin.Blogger bulut etiket eklentisi kategori görünümüne farklı bir şekil katacağını göreceksiniz