Do you want to share?
Do you like this story?
Hallo, jumpa lagi nih sama saya...!!! Seperti pada judul postingan di atas, di sini saya akan memberikan sedikit tips tentang cara menambahkan efek hover pada gambar. Kalau masih bingung dan ingin tau apa itu efek hover, arahkan kursor anda pada gambar di bawah ini.
Gimana, udah tau kan sekarang?
Kalau udah dan anda ingin mencobanya sendiri di blog anda, ikuti tutorial berikut.
Pertama silahkan login dulu ke akun blog anda, seperti biasa masuk ke Layout - Edit HTML dan untuk mencegah terjadinya kesalah silahkan Backup dulu template anda. Kalau udah silahkan copy paste kode berikut dan letakan tepat di atas kode ]]></b:skin>.
.hovereffect img {
opacity:0.5;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity:0.5;
}
.hovereffect:hover img {
opacity:1.0;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);
-moz-opacity:1.0;
-khtml-opacity:1;
}setelah itu klik save template.
Agar efek tersebut muncul pada gambar, sisipkan kode berikut pada alamat gambar anda. class="hovereffect"
Contohnya:
<a class="hovereffect" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGvKlS_v0EIXi3eVxCTaBMxcUcRY-sV194BYbb2cQQ4B40hGpTDabNuKiHTHshXgdShS4SdNrNdIgyy00vPhyrarF6J3h3tQ6ooitCRjK7NkO9pdCKZl65JdMGiVnwt-EQ4MjIuZffZgc/s1600/Prisa.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGvKlS_v0EIXi3eVxCTaBMxcUcRY-sV194BYbb2cQQ4B40hGpTDabNuKiHTHshXgdShS4SdNrNdIgyy00vPhyrarF6J3h3tQ6ooitCRjK7NkO9pdCKZl65JdMGiVnwt-EQ4MjIuZffZgc/s400/Prisa.jpg" width="261" /></a>Letakan kode tersebut tepat seperti contoh di atas, dan lihatlah hasilnya.
Sedikit tambahan, tutorial ini tidak hanya berjalan pada blogger, tetapi juga bisa digunakan pada platform blog yang menggunakan CSS, seperti Wordpress, jadi selamat mencoba..!!!
15 Comments
