Bagaimana membuat background label warna-warni? Ikuti langkah-langkah sederhana berikut.
1. Masuk ke Dasboard Blogger Anda
2. Pilih Template
3. Kemudain Pilih Edit HTML
4. Salin CSS berikut dan letakkan diatas tag
</b:skin> atau </style>:
.sidebar .label-size {
position:relative;
text-transform: uppercase;
text-decoration:none;
font-size:11px;
font-family:Oswald, Arial, Sans-Serif;
color:#fff!important;
}
.sidebar .label-size a {
color:#fff!important;
font-weight:300;
padding:8px 10px;
margin:0 6px 6px 0;
float:left;
display:block;
-moz-transition: all 0.4s ;
-o-transition: all 0.4s;
-webkit-transition: all 0.4s ;
-ms-transition: all 0.4s ;
transition: all 0.4s ;
}
.sidebar .label-size-1 a {background:#006633;border-bottom:3px solid #003366;}
.sidebar .label-size-1 a:hover {background:#006666;}
.sidebar .label-size-2 a {background:#336600;border-bottom:3px solid #663300;}
.sidebar .label-size-2 a:hover {background:#666600;}
.sidebar .label-size-3 a {background:#660066;border-bottom:3px solid #330066;}
.sidebar .label-size-3 a:hover {background:#660033}
.sidebar .label-size-4 a {background:#009980;border-bottom:3px solid #006699;}
.sidebar .label-size-4 a:hover {background:#009933}
.sidebar .label-size-5 a {background:#14B1FF;border-bottom:3px solid #006699;}
.sidebar .label-size-5 a:hover {background:#008FD6}CSS di atas hanya untuk blog yang memiliki label sedikit , jika label dalam blog Anda lebih banyak silahkan gunakan CSS berikut:
.cloud-label-widget-content {text-align: left;}
.label-size {background: #83B4D8;display: block;float: left;margin: 0 3px 3px 0;color: #fff;font-family: Oswald, Arial, Sans-Serif;font-size: 11px;text-transform: uppercase;}
.label-size:nth-child(1) {background: #F86D9E;}
.label-size:nth-child(2) {background: #37C371;}
.label-size:nth-child(3) {background: #10BBEA;}
.label-size:nth-child(4) {background: #25CBFE;}
.label-size:nth-child(5) {background: #963690;}
.label-size:nth-child(6) {background: #A3195C;}
.label-size:nth-child(7) {background: #545454;}
.label-size:nth-child(8) {background: #F2A15F;}
.label-size:nth-child(9) {background: #00FF80;}
.label-size:nth-child(10) {background: #B7860B;}
.label-size:nth-child(11) {background: #99CC33;}
.label-size:nth-child(12) {background: #FFFF3D;}
.label-size:nth-child(13) {background: #3FDECF;}
.label-size:nth-child(14) {background: #FF2F0A;}
.label-size:nth-child(15) {background: #E9DB58;}
.label-size:nth-child(16) {background: #42FFBD;}
.label-size:nth-child(17) {background: #6899ED;}
.label-size:nth-child(18) {background: #FF52AE;}
.label-size:nth-child(19) {background: #8DBC2F;}
.label-size:nth-child(20) {background: #80FF00;}
.label-size a, .label-size span {
display: inline-block;
color: #fff !important;
padding: 4px 10px;
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: #FF6BFF;
}5. Simpan perubahan template Anda.
6. Kembali ke Dashboard blog.
7. Klik Layout > Add a Gadget > Labels
8. Berikutnya edit widget Label sehingga sama dengan berikut ini.
Intinya kita harus mempunyai widget Labels dan menambahkan CSS di atas agar label-nya warna-warni.
Selamat mencoba :)
