1. Setelah sign ini ke akun blogger anda,
2. pada dasbor, masuk menu Template >> Edit HTML >> Proceed
3. Tambahkan kode CSS berikut sebelum kode ]]></b:skin>
.label-size{ margin:0 2px 6px 0; padding: 3px; text-transform: uppercase; border: solid 1px #6BB5FF; background:transparent; border-radius: 3px; float:left; text-decoration:none; font-size:10px; color:#666;}
.label-size:hover { border:1px solid #6BB5FF; background:transparent;
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; }
CATATAN:
Pada tulisan yang berwarna biru adalah kode dimana anda bisa mengganti
warna border (garis yang mengelilingi label) dan background (latar warna
label) agar sesuai dengan tema atau
desain blog anda.
Hasil
dari tutorial diatas tampilan label cloud dengan border biru dan
background transparent. Misalnya anda ganti kode label diatas dengan:
border: solid 1px #CCC;
background:#888888; dan hover (bidang saat tersentuh mouse pointer) dengan border:1px solid #CCC; background#d4d4d4;
Maka hasil widget label clound anda akan seperti screen shoot berikut:
Untuk
tool kode warna anda bisa lihat
disini,
setiap anda mengganti kode warna anda bisa klik preview atau pratinjau
untuk melihat hasil editan sementara sebelum kemudian anda menyimpannya.
4.
Kalau menurut anda tampilan widget label cloud diblog anda sudah pas
dengan desain blog anda, Jangan lupa simpan template dan lihat hasilnya
diblog anda.
