Customize labels clouds in Blogger ~ Seven Hsa

Hai sobat.., saat ini saya ingin berbagi tips blog dengan sobat, yaitu bagaimana kita merubah atau memodofikasi tampilan menu label clouds menjadi label yang tersusun secara rapi didalam box dan bisa berotasi.
dibawah adalah tampilan untuk menu label clounds standard di blogger :

dan dibawah adalah contoh menu label yang telah dimodifikasi :

sekarang kita langsung saja ke prakteknya :

1. Log in ke Blogger terlebih dahulu > Settings > Layout
2. Klik add a gadget dan Labels
3. Didalam men-setting Labels pastikan sobat memilih clouds display. (lihat dibawah)

4. Simpan widget dan klik Settings > Template
5. Sebelumnya jangan lupa untuk menyimpan atau mem-back up template sobat sebelumnya.
6. Klik edit HTML dan cari kode ]]></b:skin>
7. Setelah ketemu, taruh kode CSS dibawah tepat diatas kode ]]></b:skin>

/*-----Custom Labels Cloud widget by www.MyBloggerTricks.com----*/
.label-size{
margin:0 2px 6px 0;
padding: 3px;
text-transform: uppercase;
border: solid 1px #C6C6C6;
border-radius: 3px;
float:left;
text-decoration:none;
font-size:10px;
color:#666;
}

.label-size:hover {
border:1px solid #6BB5FF;
text-decoration: none;
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
-moz-transform: rotate(7deg);
-o-transform: rotate(7deg);
-webkit-transform: rotate(7deg);
-ms-transform: rotate(7deg);
transform: rotate(7deg);
filter: progid:DXImageTransform.Microsoft.Matrix(
M11=0.9961946980917455, M12=-0.08715574274765817, M21=0.08715574274765817, M22=0.9961946980917455, sizingMethod='auto expand');
zoom: 1;
}

.label-size a {
text-transform: uppercase;
float:left;
text-decoration: none;
}
.label-size a:hover {
text-decoration: none;
}

8. Dan simpan template sobat.

Semoga artikel diatas bisa membantu sobat.