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 :
blogger-etiket
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

Ozan Başer

Merhaba ben Ozan Başer. EhliBlog'da ve elbette Ehliforum (Blogculara Özel Forum)'da yazıyorum. Blogger, seo, adsense, sosyal medya ve google ürünleri hakkında faydalı ve kaliteli içeriği okuyucularıma sunmaya çalışıyorum. C#, PHP, Javascript gibi uğraşılarım var. Web ve online teknolojiler ile ilgili birçok konuda fikirlerimi sizlerle paylaşıyorum.

4 yorum:

  1. Aynı şekilde post-body bölümüne nasıl yapabilirim ?

    YanıtlaSil
    Yanıtlar
    1. anlayamadım post-body bölümüne ne yapacaksınız

      Sil
  2. merhabalar yararlı paylaşımlarınız ve başarılı anlatımınız nedeniyle teşekkür ederim..mavi yerine farklı bir renk için ne yapmak gerekli..teeşkkürler..

    YanıtlaSil
    Yanıtlar
    1. #0089e0 renk kodunu değiştirmeniz yeterli olacaktır

      Sil

Yorumunuza gelecek cevabı takip etmek "beni bilgilendir" kutucuğuna işaretleyebilirsiniz.