Trick Membuat Efek Hover Pada Gambar

Pada posting sebelumnya membahas mengenai "Trick Merubah Scroll Pada Blog", hari ini saya akan membahas tentang Trick Membuat Efek Hover Pada Blog. Agar blog kamu menjadi pusat pandangan para pengunjung, blog kamu harus di modifikasi supaya indah. Caranya dengan membuat efek hover pada blog kamu. Fungsi efek hover pada gambar ini adalah membuat gambar-gambar pada setiap postingan kamu menjadi buram dan ketika kursor pada komputer kamu mendekati sebuah objek gambar, gambar itu akan menjadi seperti semula atau tidak buram. Bagi kamu yang penasaran ingin melihatnya silakan lihat screenshot:

Langkah-langkahnya:

1. Login ke www.blogger.com dengan akun blog kamu
2. Pilih Template => Edit HTML => Lanjut dan centang "Expand Template Widget"
3. Kemudian cari kode ]]></b:skin> dengan menekan tombol Ctrl+F
4. Copy script dibawah ini dan Paste tepat diatas kode ]]></b:skin>
   .hovereffect img { opacity:0.5; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity:0.5; } .hovereffect:hover img { opacity:1.0; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100); -moz-opacity:1.0; -khtml-opacity:1; }
5. Lalu klik "Pratinjau" dan lihat hasilnya, kalau sudah beres silakan klik Simpan.

Catatan : Agar efek hover itu muncul kamu harus menyisipkan sedikit kode class="hovereffect" pada setting-an HTML diposting kamu dan letakkan pada awal kode sebelum link gambar. Kalau ada yang kurang jelas silakan tinggalkan komentarmu !!!