Showing posts with label transparansi. Show all posts
Showing posts with label transparansi. Show all posts

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 ^_^
Read More..
Posted by at No comments:
Labels: , , , , , , , , ,
Subscribe to: Posts (Atom)