Membuat Efek Hover Pada Gambar diblog

Coretan Bang Dadan on

Saturday, December 22, 2012

Cara Membuat Efek Hover Pada Gambar diblog - Sahabat blogger, pada postingan yang lalu bang dadan telah membuat artikel tentang Cara Membuat Efek Image Zoom di Blog, nah untuk menyambung artikel sebelumnya kali ini bang dadan akan membahas Cara Membuat Efek Hover Pada Gambar di Blog.

Image hover merupakan sebuah efek gambar redup atau terang, maksudnya bila kita mengarahkan kursor pada gambar di postingan secara otomatis gambar yang redup akan menjadi terang, begitu juga sebaliknya, bila kita mengarahkan mouse pada gambar yang terang, otomatis akan menjadi redup. 

Bagaimana caranya bisa seperti itu?? Oke langsung saja bagi sobat yang ingin melihat DEMO-nya silahkan sobat arahkan kursor pada gambar di bawah ini.

Contoh 1

◉ Berikut Kodenya:

<img src="URL gambar" style="opacity:0.4;filter:alpha(opacity=40)"
onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" />

Contoh 2

◉ Berikut Kodenya:

<img src="URL gambar" border="1" style="opacity:1;filter:alpha(opacity=100)"
onmouseover="this.style.opacity=0.4;this.filters.alpha.opacity=40"
onmouseout="this.style.opacity=1;this.filters.alpha.opacity=100"/>

Silahkan ganti tulisan yang berwarna merah dengan URL Gambar sobat masing - masing.

Nah apabila sobat ingin membuat efek image hover pada semua gambar dipostingan blog secara otomatis, silahkan ikuti langkahnya dibawah ini. yang di tas adalah cara manual.

◉ Berikut cara penerapannya pada blog sobat:

• Login ke Akun Blog
• Rancangan Template Edit HTML *jangan lupa centang expand template widgate
• Cari kode ]]></b:skin>
• Copy dan pastekan kode dibawah ini tepat diatas ]]></b:skin>

◉ Berikut Kodenya:

.post img{opacity:1;filter:alpha(opacity=1); this.style.opacity=6}
.post img:hover{opacity:.5;filter:alpha(opacity=100); this.style.opacity=1}

• Selanjutnya simpan template

Nah, mungkin sekian dulu pembahasan kali ini tentang Cara Membuat Efek Hover Pada Gambar diblog. Semoga artikel ini bermanfaat buat sobat semua. Selamat mencoba..!!

Sekian dan terimakasih.

Labels: blogger tutorial, template hack

Thanks for reading Membuat Efek Hover Pada Gambar diblog. Please share...!