Blogger Renkli Etiketler Eklentisi



Değişen hayat koşullarıyla birlikte bilgisayar başında geçirdiğim sürenin kısalmasından olsa gerek, bilişim ve blogger temalarıyla ilgili araştırmalara neredeyse hiç zaman ayıramaz olmuştum. Bunun yanında beğendiğim bir kaç tema ve eklenti görsem bile bunu bloga post olarak geçme cesaretini gösterememiştim. Çünkü böyle konulara gelen ziyaretçiler genellikle google aramasından gelir ve büyük ihtimalle takıldığı ya da yapamadığı konularda sizden yardım ister. Bu konuda da sonuna kadar haklıdır. 

Neyse asıl konumuza geçelim. Dikkatli bloggerler mutlaka fark etmiştir. Bir süredir blogger yönetim panelinde küçük de olsa değişiklikler oluyor. Bu google'nin blogger hizmetinde güncellemeye gittiğinin göstergesi. Ama şu ana kadar benim fark ettiğim elle tutulur bir fark yok. Bu olayı araştırırken gördüğüm bir temanın etiketler eklentisi. Resimde gördüğünüz eklentiyi orijinal sitesinde görmek isterseniz TIK TIK

Böyle bir etiketler eklentisini blogunuzda görmek istiyorsanız;

Blogunuzun yönetim paneli > Şablon > HTML yi düzenle kısmına kadar geliyoruz. CTRL+F kombinasyonu ile  ]]></b:skin> aratın ve üzerine aşağıdaki kodu yapıştırın.

/* CSS label */
.widget-content.cloud-label-widget-content {display:inline-block;width:100%;}
.label-size-1,.label-size-2,.label-size-3,.label-size-4,.label-size-5 {font-size:100%;opacity:1}
.cloud-label-widget-content{text-align:left;padding:10px;}
.label-count {white-space:nowrap;display:inline-block;}
#sidebar-wrapper .widget-content.list-label-widget-content {padding:0;}
#sidebar-wrapper .Label li{position:relative;background:#fff;color:#444;padding:0;margin:0;text-align:left;width:100%;border:1px solid #eaeaea;border-bottom:0;transition:all .3s ease-out}
#sidebar-wrapper .Label li:first-child{border-top:0;}
#sidebar-wrapper .Label li:last-child{border-bottom:0;}
#sidebar-wrapper .Label li:hover {background:#fff;color:#e1a66c;}
#sidebar-wrapper .Label li:before {content:&quot;&quot;;position:absolute;width:0;height:100%;background:#4fafe9;transition:all .2s ease-in-out;}
#sidebar-wrapper .Label li:hover:before {width:100%;}
#sidebar-wrapper .Label li a{padding:0 0 0 20px;display:block;position:relative;line-height:42px;color:#787878;text-decoration:none;transition:all .3s ease-out}
#sidebar-wrapper .Label li a:hover {color:#fff;}
#sidebar-wrapper .Label li span{float:right;height:42px;line-height:42px;width:42px;text-align:center;display:inline-block;background:#4fafe9;color:#FFF;position:absolute;top:0;right:0;z-index:2}
#sidebar-wrapper .Label li:nth-child(1) span,#sidebar-wrapper .Label li:nth-child(1):before,#sidebar-wrapper .Label li:nth-child(7) span,#sidebar-wrapper .Label li:nth-child(7):before {background:#ca85ca;}
#sidebar-wrapper .Label li:nth-child(2) span,#sidebar-wrapper .Label li:nth-child(2):before,#sidebar-wrapper .Label li:nth-child(8) span,#sidebar-wrapper .Label li:nth-child(8):before {background:#e54e7e;}
#sidebar-wrapper .Label li:nth-child(3) span,#sidebar-wrapper .Label li:nth-child(3):before,#sidebar-wrapper .Label li:nth-child(9) span,#sidebar-wrapper .Label li:nth-child(9):before {background:#61c436;}
#sidebar-wrapper .Label li:nth-child(4) span,#sidebar-wrapper .Label li:nth-child(4):before,#sidebar-wrapper .Label li:nth-child(10) span,#sidebar-wrapper .Label li:nth-child(10):before {background:#f4b23f;}
#sidebar-wrapper .Label li:nth-child(5) span,#sidebar-wrapper .Label li:nth-child(5):before,#sidebar-wrapper .Label li:nth-child(11) span,#sidebar-wrapper .Label li:nth-child(11):before {background:#46c49c;}
#sidebar-wrapper .Label li:nth-child(6) span,#sidebar-wrapper .Label li:nth-child(6):before,#sidebar-wrapper .Label li:nth-child(12) span,#sidebar-wrapper .Label li:nth-child(12):before {background:#607ec7;}
#sidebar-wrapper .label-size{position:relative;display:block;float:left;margin:0 4px 4px 0;font-size:13px;transition:all 0.3s;}
#sidebar-wrapper .label-size a{background:#fff;background-image:linear-gradient(to bottom,rgba(255,255,255,1)0,rgba(250,250,250,1)70%,rgba(246,246,246,1)99%,rgba(246,246,246,1)100%);display:inline-block;color:#444;padding:5px 8px;font-weight:400;border:1px solid #e3e3e3;background-repeat:repeat-y;background-size:100% 90px;background-position:0 -30px;transition:all .3s}
#sidebar-wrapper .label-count{opacity:0;visibility:hidden;font-size:85%;display:inline-block;position:absolute;top:-10px;right:-10px;background:#4fafe9;color:#fff;white-space:nowrap;padding:0;width:22px;height:22px;line-height:22px;border-radius:100%;text-align:center;z-index:1;transition:all .3s}
#sidebar-wrapper .label-size:hover .label-count{opacity:1;visibility:visible;top:-5px}
#sidebar-wrapper .label-size a:hover{color:#444;background-image:linear-gradient(to bottom,rgba(255,255,255,1)0,rgba(250,250,250,1)18%,rgba(255,255,255,1)99%,rgba(255,255,255,1)100%);background-position:0 0}
#footer-wrapper .Label li {background:transparent;float:left;padding:5px;margin:0;text-align:left;width:45%;transition:all .3s ease-out;}
#footer-wrapper .Label li:hover {color:#e1a66c;}
#footer-wrapper .Label li a {color:#aaa;transition:all .3s ease-out;}
#footer-wrapper .Label li a:hover {color:#e1a66c;}
#footer-wrapper .Label li span{float:right;color:#aaa;margin:0;padding:4px 6px;text-align:center;font-size:14px;font-weight:400;border-radius:2px;}
#footer-wrapper .Label li span:hover{color:#e1a66c}
#footer-wrapper .label-size{position:relative;background:#3f414a;color:#fff;display:block;float:left;margin:0 1px 1px 0;font-size:14px;transition:all 0.4s;}
#footer-wrapper .label-size a {display:inline-block;color:#fff;padding:6px 8px;font-weight:400;}
#footer-wrapper .label-size a:hover {background:#23242a;color:#fff;transition:all 0.2s;}
font-style:normal;font-weight:normal;text-decoration:none;color:#fff;transition:initial;}
#footer-wrapper .label-size:hover, #footer-wrapper-inner .label-size:hover{background:#e1a66c;color:#fff;}
#footer-wrapper .label-count{opacity:0;visibility:hidden;font-size:85%;display:inline-block;position:absolute;top:-10px;right:-10px;background:#fb4646;color:#fff;white-space:nowrap;padding:0;width:22px;height:22px;line-height:22px;border-radius:100%;text-align:center;z-index:1;transition:all .3s}
#footer-wrapper .label-size:hover .label-count{opacity:1;visibility:visible;top:-5px}

Eğer bu kodu yapıştırdıktan sonra etiketler gadgetinizin görüntüsü değişmiyorsa temanızın #label tanımlamasıyla uyumlu değil demektir. Hemen yapıştırdığınız kodu silip yerine aşağıdaki kodu yapıştırıyoruz.

/* CSS Etiketler Eklentisi */
.widget-content.cloud-label-widget-content {display:inline-block;width:100%;}
.label-size-1,.label-size-2,.label-size-3,.label-size-4,.label-size-5 {font-size:100%;opacity:1}
.cloud-label-widget-content{text-align:left;padding:10px;}
.label-count {white-space:nowrap;display:inline-block;}
.widget-content.list-label-widget-content {padding:0;}
.Label li{position:relative;background:#fff;color:#444;padding:0;margin:0;text-align:left;width:100%;border:1px solid #eaeaea;border-bottom:0;transition:all .3s ease-out}
.Label li:first-child{border-top:0;}
.Label li:last-child{border-bottom:0;}
.Label li:hover {background:#fff;color:#e1a66c;}
.Label li:before {content:"";position:absolute;width:0;height:100%;background:#4fafe9;transition:all .2s ease-in-out;}
.Label li:hover:before {width:100%;}
.Label li a{padding:0 0 0 20px;display:block;position:relative;line-height:42px;color:#787878;text-decoration:none;transition:all .3s ease-out}
.Label li a:hover {color:#fff;}
.Label li span{float:right;height:42px;line-height:42px;width:42px;text-align:center;display:inline-block;background:#4fafe9;color:#FFF;position:absolute;top:0;right:0;z-index:2}
.Label li:nth-child(1) span, .Label li:nth-child(1):before, .Label li:nth-child(7) span, .Label li:nth-child(7):before {background:#ca85ca;}
.Label li:nth-child(2) span, .Label li:nth-child(2):before, .Label li:nth-child(8) span, .Label li:nth-child(8):before {background:#e54e7e;}
.Label li:nth-child(3) span, .Label li:nth-child(3):before, .Label li:nth-child(9) span, .Label li:nth-child(9):before {background:#61c436;}
.Label li:nth-child(4) span, .Label li:nth-child(4):before, .Label li:nth-child(10) span, .Label li:nth-child(10):before {background:#f4b23f;}
.Label li:nth-child(5) span, .Label li:nth-child(5):before, .Label li:nth-child(11) span, .Label li:nth-child(11):before {background:#46c49c;}
.Label li:nth-child(6) span, .Label li:nth-child(6):before, .Label li:nth-child(12) span, .Label li:nth-child(12):before {background:#607ec7;}
.label-size{position:relative;display:block;float:left;margin:0 4px 4px 0;font-size:13px;transition:all 0.3s;}
.label-size a{background:#fff;background-image:linear-gradient(to bottom,rgba(255,255,255,1)0,rgba(250,250,250,1)70%,rgba(246,246,246,1)99%,rgba(246,246,246,1)100%);display:inline-block;color:#444;padding:5px 8px;font-weight:400;border:1px solid #e3e3e3;background-repeat:repeat-y;background-size:100% 90px;background-position:0 -30px;transition:all .3s}
.label-count{opacity:0;visibility:hidden;font-size:85%;display:inline-block;position:absolute;top:-10px;right:-10px;background:#4fafe9;color:#fff;white-space:nowrap;padding:0;width:22px;height:22px;line-height:22px;border-radius:100%;text-align:center;z-index:1;transition:all .3s}
.label-size:hover .label-count{opacity:1;visibility:visible;top:-5px}
.label-size a:hover{color:#444;background-image:linear-gradient(to bottom,rgba(255,255,255,1)0,rgba(250,250,250,1)18%,rgba(255,255,255,1)99%,rgba(255,255,255,1)100%);background-position:0 0}
#footer-wrapper .Label li {background:transparent;float:left;padding:5px;margin:0;text-align:left;width:45%;transition:all .3s ease-out;}
 
Bu kodu ekledikten sonra eklentiyi düzenlemek istiyorsanız blog temanızın #label kodlarını bulup düzenleme yapmalısınız. Umarım beğenerek sorunsuzca kullanırsınız.

NOT: Düzenlemeleri yapmadan önce blog temanızın yedeğini almayı unutmayın. Eğer bu eklentiyi kullanmakta çok istekliyseniz ve sorun yaşıyorsanız yardım istemekten çekinmeyin. Etiketler gadgetini liste halinde görüntüle yapmayı da gözden kaçırmayın.

En güzel temalar sizin olsun, sağlıcakla kalın... 
Abdullah ÖZER
Abdullah ÖZER

Okumayı ve izlemeyi sever, yazmanın ise insana inanılmaz bir derinlik kattığına inanır. Çay vazgeçilmezidir. 90 ların müzikleriyle mest olur hatta kendinden geçer.

13 yorum:

  1. Çok güzel gözüküyor sevdim bunu :) Blogumun temasını tamamen değiştirmek istiyorum aslında uzun zamandır ama benim için sıkıntılı bir dönem bu tema işleri :)

    YanıtlaSil
    Yanıtlar
    1. Hangi tema olursa olsun insan sıkılıyor zamanla, hep bir değişiklik istiyor sanırım :)

      Bu konuda yardıma ihtiyacın olursa haberim olsun :)

      Sil
  2. Bu eklentiyi uzun zamandır biliyorum fakat çalışmama durumunda alternatif bir çözümü olduğunu bilmiyordum, teşekkürler.

    YanıtlaSil
    Yanıtlar
    1. Aslında üçretsiz temalarda çok güzel eklentiler var ama bunları temadan ayıklamak çok zahmetli oluyor genellikle.

      Blogunuzdan anladığım kadarıyla siz de ilgilisiniz bu konulara. Yolunuz her daim açık olsun, başarılar

      Sil
  3. Ne çektim şu etiketler eklentisinden kardeş. Blogumda kendi kendine silindi konular, kodları gitmiş nasıl olduysa. Hiç de anlamam bu işlerden. Sağolsun BlogYazarki uğraştı da düzeltti. Bu sizin tavsiyenizi de öğrenmiş oldum. İnşallah lazım olmaz da, hani olursa aklımda dursun. Çok teşekkürler ⭐

    YanıtlaSil
    Yanıtlar
    1. Onun için belirli aralıklarla blogunuzun yedeğini almalısınız. Her şey post yamakla bitmiyor maalesef!!!

      Sil
  4. Merhaba,

    Faydalı bir paylaşım olmuş, işime yarayacak. Teşekkürler :)

    YanıtlaSil
  5. Yıl 2018 daha yeni blog işlerini girdiğim için anca yorum yapabiliyorum. Böyle bir şey arıyordum bende çok teşekkürler hocam :) Benim sitemede beklerim. https://guzellikhikayesi.blogspot.com.tr

    YanıtlaSil
  6. İkinci Kodu yapıştırınca çalıştı ellerinize sağlık iyi çalışmalar.

    YanıtlaSil