Adım1 : İlk önce Blogger Şablon > Html'yi Düzenle diyip ]]> kodunu aratıp hemen üstüne aşağıdaki kodu yapıştırıyoruz.
.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;
}
Hepsi bu kadar
Kaynak:http://kodblogcum.blogspot.com.tr/2015/03/blogger-renkli-etiketler-olusturma.html
önizleme:
Blogum Hakkında Yorumlarınızz
