Efek hover maksudnya adalah efek yang terjadi setelah kursor komputer kita arahkan pada suatu objek pada komputer. Banyak efek hover yang diberikan pada objek. Objek di sini bisa berupa gambar, link, tulisan, dll. Pada tulisan ini saya akan memberikan tips membuat efek hover pada sebuah gambar pada blog kita. Efek yang terjadi adalah gambar menjadi kelihatan lebih terang jika bursor diarahkan pada gambar tersebut. Biar lebih jelas, sobat bisa lihat demonya di bawah ini:
Sebelumnya saya pernah memberikan tips yang hampir sama dengan tips ini. Yaitu Memberikan Keterangan pada Gambar dengan Css3 Style. Mungkin tips itu bermanfaat untuk blog anda, apalagi blog yang berisi banyak foto-foto atau gambar. Jika perlu lihar demonya di sini. Untuk tips kali ini mungkin sudah jelas jika sobat sudah melihat demonya. Jika sobat blogger sudah mengerti dan ingin menampilkannya pada blog sobat, sekarang kita langsung saa pada tujuannya.
Langkah pertama adalah silahkan login ke blogger. Pada dasbor blog anda, silahkan pilih Template - Edit HTML. Pada kotak kode template blog sobat, siahkan cari kode ]]></b:skin> dan letakkan script berikut di atas kode tersebut.
.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;
}
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;
}
Script di atas merupakan atribut untuk membuat tampilan efek hover pada blog sobat. Jadi tidak perlu untuk di edit. Setelah anda meletakkan script di atas, silahkan Simpan Template blog anda. Kemudian silahkan beralih pada New Entri (New Post) dan silahkan pilih mode Edit HTML (HTML pada tampilan baru blogger). Silahkan copy kode HTML gambar anda seperti di bawah ini:
<a class="hovereffect" href="http://tips-untuk-blogger.blogspot.com/2012/08/membuat-efek-hover-pada-gambar.html"><img alt="Membuat Efek Hover Pada Gambar" border="0" src="http://i764.photobucket.com/albums/xx289/kartajaya/suasanakebaktian.jpg" title="" /></a>
Kode yang bertulisan warna putih adalah efek hover dari gambar anda. dan silahkan ganti tulisan berwarna merah dengan alamat URL gambar anda. Kemudian silahkan anda Publish tulisan anda jika sudah selesai menulis. Lihat perubahan yang terjadi dan semoga berhasil. Mohon maaf jika ada kesalahan dalam tips ini. (Jkt/2012)
