Kali ini saya akan menjawab pertanyaan dari Sobat saya www.tkjlover.web.id. Pertayanya adalah bagaimana cara membuat background pada label cloud pada Blog teman saya di allfonts.blogspot.com. Trik itu sebenarnya mudah sekali yaitu trik hover pada label hampir sama dengan trik hover lainnya seperti pada gambar yang telah saya bahas di postingan yang lalu Anda bisa membacanya di Cara Membuat Image Hover.
Sebelum memulai tutorialnya silahkan Anda lihat label chould pada Blog teman saya allfont.blogspot.com yang telah saya beri modifikasi label hover. Sebenarnya jika Anda sudah paham trik ini sangat mudah membuatnya yaitu dengan menggunakan CSS tentunya. Kode yang saya gunakan di Blog tersebut bisa Anda lihat di bawah ini :
/* -- LABEL CLOUD -- */
.label-size-1 a:hover, .label-size-2 a:hover, .label-size-3 a:hover, .label-size-4 a:hover, .label-size-5 a:hover { color:#fff;font-size:20px;text-decoration:none }
.label-size a:hover{-moz-border-radius-bottomleft:3px; -moz-border-radius-bottomright:3px; -moz-border-radius-topleft:3px; -moz-border-radius-topright:3px; background-color:#FF9900; color:#fff; padding:2px 2px 2px 2px}
.label-size a{padding:2px 2px 2px 2px}
Keteranganya :
- font-size:20px; : ukuran font saat di sorot mouse (size font hover) jika tidak ingin besar silahkan ganti ukuranya sesuai font pada template Blog Anda.
- Kode warna merah adalah kode trik CSS border radius agar baground pada saat label hover terlihat pada pinggirnya melengkung (tidak semua boswer support). Mungkin kapan-kapan saya akan membahasnya tetang trik border radius ini.
- Untuk Kode background-color:#FF9900; color:#fff; yaitu kode background dan font color saat mouse hover. Anda bisa ganti warnanya sesuai selera Anda.
Cara pemakaiannya atau pengaplikasiannya sebagai berikut :
- Login ke Blogger
- Klik Design
- Klik Edit HTML
- Cari kode ]]></b:skin>
- Letakan Kode dibawah ini tepat di atas kode ]]></b:skin>
/* -- LABEL CLOUD -- */
.label-size-1 a:hover, .label-size-2 a:hover, .label-size-3 a:hover, .label-size-4 a:hover, .label-size-5 a:hover { color:#fff;font-size:20px;text-decoration:none }
.label-size a:hover{-moz-border-radius-bottomleft:3px; -moz-border-radius-bottomright:3px; -moz-border-radius-topleft:3px; -moz-border-radius-topright:3px; background-color:#FF9900; color:#fff; padding:2px 2px 2px 2px}
.label-size a{padding:2px 2px 2px 2px}Klik Save Template.
Jika tidak berhasil mohon berikan informasinya lewat komentarnya.....Semoga bermanfaat!
