Baca Juga

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/AVvXsEi3STb6-TyyOkiZSglcaX_HUHQlkYB-3bGJ-jST0dL8FpwgCBt3oHby5qerhaRYU43997LBx4jAH8szi8j-0t0LF5ngBez4HES63VAbjrKukG62Vxx2ql8SkKoGfkwNXiGQ4UzjMxo6BNBg/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 ^_^