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...