WIDGET LABEL CLOUD di Blog

 

BLOGGINGPASURUAN akan membagi tutorial Cara Modifikasi Tampilan Widget Label Cloud di Blog. Bagaimana cara memodifikasi tampilan label cloud blogger seperti diblog ini yang menggunakan efek hover animasi bergerak. Yang menjadi magic modifikasi dari tampilan widget default label cloud blogger ini adalah bagaimana kita bermain CSS. Jadi untuk styles widget label cloud tidak akan terbatas jumlahnya sampai pada style ke 6 postingan ini misalnya. Banyaknya style yang bisa kita hasilkan tergantung seberapa besar kreatifitas kita.

Tertarik untuk memodifikasinya..? Berikut caranya :

Sebelumnya pastikan pada Blog anda terdapat widget label dengan tampilan cloud .

1. 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.

Semoga bermanfaat dan terimakasih atas apresiasi anda.