Menu
Kamis, 26 April 2012
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>
Untuk menerapkan efek tersebut pada gambar yang ingin ditayangkan maka masukan kode seperti dibawah ini
- Kode berwarna merah adalah adalah url blog
- Kode berwarna biru adalah url gambar
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>
5. Simpan template anda.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; }
Untuk menerapkan efek tersebut pada gambar yang ingin ditayangkan maka masukan kode seperti dibawah ini
Keterangan:<a href="http://www.blogtrikdantips.blogspot.com" class="thumbopacity" ><img border="0" src="................................jpg" /></a>
- Kode berwarna merah adalah adalah url blog
- Kode berwarna biru adalah url gambar
Label:
Tips dan Triks
Langganan:
Posting Komentar (Atom)
1 komentar:
test
Posting Komentar