Cara Merubah Widget Labels Blogger Warna Warni

Bosen dengan tampilan Widget Labels Blog yang hanya sederhana dengan mono color?.
Ingin punya tampilan widget labels blogger warna warni atau multi color. coba tips ini
dengan bantuan CSS akan merubah tampilan widget labels blogger menjadi penuh warna warni dan dengan kesan hover efek.

Demo

1. Login Blogger.com
2. Pilih Blogger --> Layout
3. Add the Labels Cloud Widget dahulu jika belum terpasang. .
4. Lalu klik Template --> Edit HTML
5. Cari code ini ]]></b:skin> ( Ctrl+F pada keybord biar mudah )
6. Lalu copy kode Css dibawah ini:
.sidebar .cloud-label-widget-content {margin:0; padding-left:20px!important;}
.sidebar .label-size a {
color:#fff!important;
background:#222;
padding:2px 2px;
margin:0 3px 3px 0;
float:left;
display:block;
-moz-transition: all 0.2s ease-out;
-o-transition: all 0.2s ease-out;
-webkit-transition: all 0.2s ease-out;
-ms-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
}
.sidebar .label-size-1 a {background:#000}
.sidebar .label-size-2 a {background:#03B0FF}
.sidebar .label-size-3 a {background:#000}
.sidebar .label-size-4 a {background:#FF0080}
.sidebar .label-size-5 a {background:#03B0FF}
.label-size-1 a:hover, .label-size-2 a:hover, .label-size-3 a:hover, .label-size-4 a:hover, .label-size-5 a:hover {
background:#1CFFB8; color:#000; text-decoration:none}
.sidebar .label-size span {
background:#ff;
color:#000;
padding:8px 22px;
margin:0 0 3px;
clear:both;
float:left;
}
.sidebar .label-size {
position:relative;
text-transform: uppercase;
text-decoration:none;
font-size:16px;
font-family:'Oswald', sans-serif;
color:#fff;
}
.sidebar .label-size a, .sidebar .label-size a:visited {color:#fff;text-decoration: none;}

6. Kemudian pastekan / letakkan sebelum kode (  ]]></b:skin> )
7. Save template, dan lihat hasilnya.

Selamat mencoba

Read More