Sunday, November 24, 2013

Cara Membuat Efek Hover Transparansi Pada Gambar dalam Postingan Blog


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/AVvXsEiND9FO-JHNNKMDwq_p6gaRBCZH6hcHBFYH1qM_iDANIYcNo1gJULd_YuD1bDWjIVllnNxBIvQtG3z6YpMEtgAMq-eiDB547CGvXTeDdYLtUIYR6TEFNPd3DYR570dOPK8ErYeLhSo9fQCw/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 ^_^
Posted by at
Labels: , , , , , , , , ,

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)