Cara Membuat Efek Hover/Transparansi Pada Gambar dalam Postingan Blog

By. Dedi Yahya S

Pada kesempatan kali ini saya akan memberikan trik dan panduan tentang Cara Membuat Efek Hover/Transparansi Pada Gambar dalam Postingan Blogspot.

Fungsi dari Tutorial ini adalah jika cursor mouse menyorot / atau berada pada salah Satu gambar pada blog, maka gambar tersebut akan menyala / buram pada tampilan blog pada postingan. 

Coba arahkan kursor / mouse pada gambar maka akan terlihat buram.

Diatas adalah contohnya.

Cara Membuat Efek Hover/Transparansi Pada Gambar dalam Postingan Blogspot :

• Pilih gambar yang akan digunakan 
• Setelah itu upload ke internet
• Setelah di-upload, Anda akan mendapatkan URL gambar tersebut 
• URL gambar tersebut harus Anda sisipi dengan kode berikut ini :

onmouseover="this.style.opacity=0.4;this.filters.alpha.opacity=40"
onmouseout="this.style.opacity=1;this.filters.alpha.opacity=100" style="opacity:1;filter:alpha(opacity=100)"

•  Berikut adalah contoh code untuk dipasang pada postingan, warna merah adalah URL gambar.

<img onmouseover="this.style.opacity=0.4;this.filters.alpha.opacity=40"
onmouseout="this.style.opacity=1;this.filters.alpha.opacity=100" style="opacity:1;filter:alpha(opacity=100)" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2lgPuot680cOvGc277gezFZdzjdbK0688TsCBrukqemlhrhJZ8geOdlveHdoGJgLek7KtKl7Tue8YBMgnVi3hCoyhep1sH7Uqnh4yk7W7gkFL2zPDQe2VkpEHk4gfqyGN6QexdXxCNsnI/s400/home.png"/></a>

Demikian blogger tutorial mengenai Cara Membuat Efek Hover/Transparansi Pada Gambar dalam Postingan Blog.

Semoga bermanfaat dan semoga berhasil.

Terima Kasih ^_^

Share on Google Plus

About Rizqi Wijaya

This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.