Tolga GönüL

Merhaba arkadaşlar bugunki yayınımızda çok basit bir renkli etiket oluşturmayı anlatıcaz şu an sitemizde kullanıyoruz footer kısmında inceliyebilirsiniz daha önce buna benzer bir renkli etiket oluşturmayı anlatmıştım Burdan bakabilirsiniz. ama o bu anlatıcağımız eklenti kadar renkli değildi biraz mat renklerde oluşuyordu ve pek iyi durmuyordu şimdiki uyguluyacağımız kodlar daha canlı renkler oluşturmamıza olanak sağlıyor ve daha iyi görütntü sağlıyor

Öncelikle blogger şablon kısmını tıklıyoruz ve html düzenle diyoruz sonrasında bu kodu ]]></b:skin> buluyoruz ve üstüne aşağıdaki kodları ekliyoruz. Sonrasında renkli etiketler oluşturabilirsiniz.

.cloud-label-widget-content{text-align:$startSide;overflow:hidden;}
.cloud-label-widget-content .label-size{float:$startSide;display:block;padding:4px 5px;margin-$endSide:2px;margin-bottom:2px;background-color:#007C8E;(keycolor);color:$(artitle.background.color);-moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;}
.cloud-label-widget-content .label-size a{color:$(artitle.background.color);}
.cloud-label-widget-content .label-size:hover{background-color:#E3AA03;(credit.background.color);}
.cloud-label-widget-content .label-size:active{top:1px;}
.label-size-1,.label-size-2,.label-size-3,.label-size-4,.label-size-5{font-size:100%;}
.cloud-label-widget-content {
text-align: left;
}
.label-size {
background: #5498C9;
display: block;
float: left;
margin: 0 3px 3px 0;
color: #fff;
font-family: &#39;Open Sans&#39;,&quot;Segoe UI&quot;,Arial,Tahoma,sans-serif;
font-size: 11px;
text-transform: uppercase;
}
.label-size:nth-child(1) {
background: #F53477;
}
.label-size:nth-child(2) {
background: #89C237;
}
.label-size:nth-child(3) {
background: #44CCF2;
}
.label-size:nth-child(4) {
background: #01ACE2;
}
.label-size:nth-child(5) {
background: #94368E;
}
.label-size:nth-child(6) {
background: #A51A5D;
}
.label-size:nth-child(7) {
background: #555;
}
.label-size:nth-child(8) {
background: #f2a261;
}
.label-size:nth-child(9) {
background: #00ff80;
}
.label-size:nth-child(10) {
background: #b8870b;
}
.label-size:nth-child(11) {
background: #99cc33;
}
.label-size:nth-child(12) {
background: #ffff00;
}
.label-size:nth-child(13) {
background: #40dece;
}
.label-size:nth-child(14) {
background: #ff6347;
}
.label-size:nth-child(15) {
background: #f0e68d;
}
.label-size:nth-child(16) {
background: #7fffd2;
}
.label-size:nth-child(17) {
background: #7a68ed;
}
.label-size:nth-child(18) {
background: #ff1491;
}
.label-size:nth-child(19) {
background: #698c23;
}
.label-size:nth-child(20) {
background: #00ff00;
}
.label-size a, .label-size span {
display: inline-block;
color: #000 !important;
padding: 3px 1px;
font-weight: bold;
}
.label-size:hover {
background: #222;
    }
.label-count {
white-space: nowrap;
padding-right: 3px;
margin-left: -3px;
background: #333;
color: #fff ;
}
.label-size:hover .label-count, .label-size:focus+.label-count {
background-color: #ff6bb5;
}

Etiketler: Blogger Eklentileri, Renkli Etiketler

Sidebar kısmında renkli etiket oluşturma normal etiket görselliğinden sıkıldıysanız biraz renklendirip farklı görünmesini sağlıya bilirsiniz. Görsel anlamda güzel hoş bir görüntü oluşuyor.
Bu eklentiyi kullanabilmemiz için öncelikle css kodlarını ekliyices.

Şablon kısmına tıklıyorsunuz ve html düzenle diyorsunuz sonra bur kodu buluyorsunuz ]]></b:skin> bu kodun üstüne aşağıdaki css kodlarımızı ekliyoruz.

.label-size-1 a {background:#1abc9c;border-bottom:3px solid #127F69;}
.label-size-1 a:hover {background:#16a085;}
.label-size-2 a {background:#3498db;border-bottom:3px solid #226693;}
.label-size-2 a:hover {background:#2980b9;}
.label-size-3 a {background:#2ecc71;border-bottom:3px solid #1F8C4C;}
.label-size-3 a:hover {background:#27ae60}
.label-size-4 a {background:#9b59b6;border-bottom:3px solid #74398E;}
.label-size-4 a:hover {background:#8e44ad}
.label-size-5 a {background:#e74c3c;border-bottom:3px solid #922C20;}
.label-size-5 a:hover {background:#c0392b}
.label-size-6 a {background:#FE2200;border-bottom:3px solid #FE2200;}
.label-size-6 a:hover {background:#FE2200}

.label-size {
  position:relative;
  text-transform:uppercase;
  text-decoration:none;
  font-size:13px;
  font-family:Arial;
  color:#fff!important;
  }
.label-size a {
  color:#fff!important;
  font-weight:bold;
  float:left;
  display:block;
  transition: all 0.4s ease-in-out;
padding: 3px 5px;
margin: 2px 5px 5px 2px;
}

Sonra yerleşim bölgesinden Etiketleri kısmına tıklayp label oluşturuyorus.