Pada artikel kali ini saya akan bahas cara buat efek Hover Image, dimana pada postingan sebelumnya saya juga bahas tentang Efek Hover Image / Link Dengan jQuery. sebenarnya gak jauh beda dengan postingan sebelumnya, cuma postingan kali ini memberikan efek hover pada image aja, sedangkan postingan sebelumnya, memberikan efek hover image dan juga hover link. tp ngga apa2, mungkin saja selera seseorang beda2 kali.hehe..
Ok jika anda tertarik untuk mencoba langsung saja ikuti langkah dibawah ini :
1. Pertama Login Blog
2. Pilih Layout untuk memulai pengeditan pada Blog yang diinginkan
3. Pilih Tab Edit HTML
4. Letakkan kode berikut ini di bawah ]]></b:skin>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
$(".post img").fadeTo("slow", 1.0); // This sets the opacity of the thumbs to fade down to 30% when the page loads
$(".post img").hover(function(){
$(this).fadeTo("slow", 0.5); // This should set the opacity to 100% on hover
},function(){
$(this).fadeTo("slow", 1.0); // This should set the opacity back to 30% on mouseout
});
});
</script>
<script type='text/javascript'>
$(document).ready(function(){
$(".latest_img").fadeTo("slow", 1.0); // This sets the opacity of the thumbs to fade down to 30% when the page loads
$(".latest_img").hover(function(){
$(this).fadeTo("slow", 0.5); // This should set the opacity to 100% on hover
},function(){
$(this).fadeTo("slow", 1.0); // This should set the opacity back to 30% on mouseout
});
});
</script>
5. Kemudian Simpan Template. dan lihat hasilnya.
Lihat juga artikel lainnya :)
