Blogger'da renkli etiket bulutu kullanımı

Bildiğiniz gibi Blogger'da yazılarımızı kategorize etmek için Etiketleri kullanıyoruz. Blog okuyucuları, bu etiketler yardımıyla aynı etikete sahip olan diğer yazılara kolayca ulaşabiliyorlar. Sidebar'a yerleştirdiğimiz Etiketler Gadget'ını, CSS yardımıyla renklendirerek yukarıdaki resimde ve blogumda görebileceğiniz şekilde daha ilgi çekici bir hale getirebiliriz. Bunun için yapmamız gereken çok basit bir iki adım var.

Kurulum

Eklentiyi temamıza uygulamak için yapmamız gerekenler aşağıdaki şekildedir.

• Öncelikle eğer Etiketler Gadget'ı temamızda daha önceden aktif duruma getirilmemişse Blogger Kumanda Paneli > Yerleşim > Gadget Ekle komutlarını uyguluyoruz.
• Karşımıza çıkan listeden Etiketler Gadget'ını seçiyoruz.
• Eğer daha önceden eklemişsek Blogger Kumanda Paneli > Yerleşim > Etiketler > Düzenle komutlarını uyguluyoruz.
• Gadget'ın konfigürasyonunu aşağıdaki resimde görüldüğü hale getirip Kaydet butonuna basıyoruz.



• Eklentiye ait CSS kodlarını temamıza yerleştirebilmek için Şablon > HTML’yi Düzenle > Devam Et > Widget Şablonlarını Genişlet komutlarını uyguluyoruz.
• CTRL+F tuş kombinasyonu yardımıyla </head> kodunu bulup hemen üstüne aşağıdaki kodları ekliyoruz.

  <!-- colored labels code START -->
  <style type="text/css">
  
  .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;}
  
  </style>
  <!-- colored labels code END -->
  

Temamızı kaydettiğimizde eklentimiz hazır duruma gelecektir. Blogunuzu görüntüleyerek test edebilirsiniz.

QQSB9ABG7KCK