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:

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!

Poskan Komentar Blogger Disqus

Catatan:
Untuk menyisipkan kode, gunakan tag <i rel="code">KODE ANDA...</i>
Kode yang panjang bisa menggunakan tag <i rel="pre">KODE PANJANG ANDA...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL ANDA DI SINI...</b>
Untuk menciptakan efek tebal gunakan tag <b>TEKS ANDA DI SINI...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>TEKS ANDA DI SINI...</i>

Penting:
Jika Anda mengajukan pertanyaan klik 'Subscribe by email' link di bawah form komentar untuk mengetahui komentar balasan.

Khusus untuk membalas komentar disarankan menggunakan tombol balas/reply di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur.

Dilarang Meninggalkan Link Aktif, Link Aktif Terpaksa Akan Saya Hapus Dari Komentar.

NB: Jika ingin menuliskan kode pada komentar harap gunakan Tool untuk mengkonversi kode tersebut agar kode bisa muncul dan jelas atau gunakan tool dibawah "Konversi Kode di Sini!".

Konversi Kode di Sini! Daftar Member Aktif

 
Top