Label Cloud Hover

Di postingan article kali ini blog Oto Website akan update postingan dan membahas tentang Label Cloud Hover.
Kalo biasanya kita memasang widget cloud tanpa hover tapi kali ini kita akan membuat label tersebut muncul dengan efek hover, dan jadinya pasti akan lebih menrik. Untuk cara membuat Label Cloud Hover ini juga tiak rumit alias cukup mudah.
Untuk contoh Label Cloud Hover sobat bisa lihat gambar di bawah ini:

Label Cloud Hover

Lansung saja ya kalo begitu sekarang kita akan membahas cara memasang Label Cloud Hover ini di blogger sobat:

1. Login ke akun blogger sobat.

2. Pada Dasbor klick Rancangan ➨ Edit HTML (tidak perlu mencentang Expand Template Widget).

3. Lalu sobat cari kode ]]></b:skin> jika kesulitan mencarinya coba lihat Cara Cepat Mencari Kode HTML.


4. Jika sudah ketemu selanjutnya sobat letakkan kode berikut ini tepat di atas kode tadi.

/* -- Label Cloud Hover -- */
.label-size {line-height: 1.2;float: left;font:normal normal 13px Cuprum;}
.label-size a {-khtml-border-radius: 3px;-moz-border-radius: 3px;-webkit-border-radius: 3px;background: #aaa;border: none;border-radius: 3px;color: #fff;text-shadow:0 -1px 1px rgba(0,0,0,0.25);float: left;margin: 0 4px 4px 0;padding: 5px 6px;}
.label-size a:hover {background: #ffcb0f;}-
.label-size span {float: right;font-size: 9px;margin: 0 0 4px;}

5. Simpan template.

6. Selanjutnya pada menu sobat klick Rancangan ➨ Tambah Gadget (di manapun sobat ingin widget ini muncul)

7. Lalu pilih Label dan setting label seperti gambar berikut.

8. Simpan.

Sekarang sobat bisa lihat sendiri hasilnya di label blog sobat.

Bagaimana apakah sobat berhasil menerapkannya di blog sobat? silahkan tinggalkan komentar/tanggapan sobat tentang postingan/articles di atas!