Blogger Renkli Etiketler Oluşturma

Adım1 : İlk önce Blogger Şablon > Html'yi Düzenle diyip ]]></b:skin> 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; }

Adım2 : Blogger Yerleşim menusünden Gadget Ekle diyoruz ve Etiketleri ekleyip resimdeki gibi düzenliyoruz.