Tag Cloud with Rocking Chair Style

Membuat Tag Cloud dengan Rocking Chair Style

Hadir lagi dan postingan kali ini masih mengenai tutorial blogger. Di sini saya akan coba berbagi cara membuat tag cloud atau label cloud dengan rocking chair style (kursi goyang), begitulah tag cloud ini saya namakan. Keren juga, kan? Sebelumnya teman-teman sudah tahu kan yang dimaksud dengan tag cloud atau label cloud itu sendiri? Itu loh yang sering dikenal juga sebagai Article Categories.


Sebenarnya, kita akan memodifikasi tampilan tag cloud / label cloud blogger seperti yang ada di blog ini dengan menggunakan efek hover animasi bergerak. Ketika tag cloud tersentuh oleh mouse, maka akan bergoyang layaknya kursi goyang.

Saya kira cukup untuk penjelasannya, sekarang kita melangkah pada tahapan modifikasi tampilan tag/label cloud blogger.

Sebelumnya pastikan pada blog anda sudah terdapat widget label dengan tampilan cloud. Lanjut…
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 di mana anda bisa mengganti warna border (garis yang mengelilingi label) dan background (latar warna label) agar sesuai dengan tema atau desain blog anda.

Untuk mesin kode warna lihat di sini.

4. Kalau menurut anda tampilan widget label cloud di blog anda sudah pas dengan desain blog anda, Jangan lupa simpan template dan lihat hasilnya di blog anda.

Efek hover animasi dari kode di atas bertenaga CSS3 transisi dan trasform.

Demikian, semoga bermanfaat. ^_^