Wednesday, October 30, 2013

Browse » home» » » » » » » » » » Membuat Image Efek Hover saat di sentuh CSS Jquery

Membuat Image Efek Hover saat di sentuh CSS Jquery


Sekarang Agan dapat menambahkan Gambar efek hover pada gambar di blogger sangat mudah.

Trik ini memungkinkan gambar Anda ke beberapa transparansi (Tidak semua Gambar saja gambar ditentukan). ketika mouse Agan pada gambar itu akan berubah menjadi tidak transparan akan membuat efek hover.

Watch Live Demo

Caranya, pertama" login Blogger.. Pergi ke Rancangan trus pilih Edit HTML. dan Cari code ]]></b:skin>
Copy CSS di bawah dan taruh sebelum tag ]]></b:skin>
a.thumbopacity img {
 filter:alpha(opacity=50);
 -moz-opacity: 0.5;
 opacity: 0.5;
 -khtml-opacity: 0.5;
}
a.thumbopacity:hover img {
 filter:alpha(opacity=100);
 -moz-opacity: 1.0;
 opacity: 1.0;
 -khtml-opacity: 1.0;
}
dan SAVE TEMPLATE

Sekarang untuk mengaktifkan efek nya
-Apabila code gambar normal akan seperti ini
<a href="http:/blogspot.com/" ><img  border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyhPIJl_Yyh1SPuivJpx5rYazXhemk_UsxJ7FjgImL1Cf_KG7VvkwUDmoYg84yjC_ZLV5l6xX9fzJmqPDe_NP4p3webBGVII-H_L-HDdKYqsk2zAISJcqIxeaUyaelplMjGSsSRE-gcfzH/s1600/2+tooth+peace+sign+paundra+rethouching.jpg" /></a>
-Untuk mengaktifkannya, kita menambahkan code class="thumbopacity" akan seperti ini
<a href="http:/blogspot.com/" class="thumbopacity"  ><img  border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyhPIJl_Yyh1SPuivJpx5rYazXhemk_UsxJ7FjgImL1Cf_KG7VvkwUDmoYg84yjC_ZLV5l6xX9fzJmqPDe_NP4p3webBGVII-H_L-HDdKYqsk2zAISJcqIxeaUyaelplMjGSsSRE-gcfzH/s1600/2+tooth+peace+sign+paundra+rethouching.jpg" /></a>
Jangan lupa untuk menambahkan code tersebut, saat kamu akan menerbitkan artikel kamu harus masuk ke mode HTML. Semoga sedikit tips diatas dapat menambah ilmu kawan-kawan blogger semua ^^

Posted by at
Labels: , , , , , , , ,

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)