Renkli Etiketler Oluşturma

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: 'Open Sans',"Segoe UI",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;
}

Continue Reading