Anda
bisa membuat berbagai macam efek hover pada objek yang anda inginkan di
blog. Salah satunya yaitu membuat efek hover transparan pada gambar.
Efek hover ini akan nampak apabila anda mengarahkan cursor mouse pada
object. Jika cursor mouse berada tepat diatas gambar maka gambar
tersebut akan menjadi normal, namun jika anda tidak mengarahkan cursor
pada gambar maka gambar tersebut menjadi transparan. Jika sobat ingin
tau cara membuat efek tersebut ikuti langkahnya dibawah ini:
1. Login ke Blogger
2. Masuk ke Rancangan --> Edit HTML
3. Carilah kode ]]></b:skin>
4. Lalu tambahkan kode Css berikut ini diatas kode ]]></b:skin>
a.thumbopacity img {5. Simpan template anda.
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;
}
Untuk menerapkan efek tersebut pada gambar yang ingin ditayangkan maka masukan kode seperti dibawah ini
<a href="http://www.blogtrikdantips.blogspot.com" class="thumbopacity" ><img border="0" src="................................jpg" /></a>Keterangan:
- Kode berwarna merah andalah adalah url blog
- Kode berwarna biru adalah url gambar
