Followers

15 Ogos 2010

Ogos 15, 2010 - 12 comments

Blog Tutorial:Fade Effect/Efek Pudar Pada Gambar

Ok tutorial kali ni agak mudah tapi hasilnya agak menarik.Kita akan letak fade effect pada setiap gambar kita.

Log in kedalam Blogger,pergi ke Layout -> Edit HTML

Tugas korang,cuma perlu copy kod yang aku bagi ni dan letakkan sebelum kod </head>

<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>

Save Template,Dah Siap,Tu jela^^

Klik sini untuk lihat demo



Gerakkan mouse kat arah gambar di demo blog

P/S:Kod yang aku bagi ni,akan jadikan effek pudar tu lebih menarik dari demo yang aku tunjuk ni,tak percaya cubala,dah cuba jngn lupa komen^^.Setiap gambar yang korang letak akan automatik ada efek ni.

TAMBAHAN:Jika ingin ubah gambar dari kabur ke jelas,hanya perlu tukarkan set opacity,atau lebih mudah,gunakan keseluruhan kod ini sahaja menggantikan kod diatas
boleh lihat contoh disini

<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", 0.5); // This sets the opacity of the thumbs to fade down to 100% when the page loads
$(".post img").hover(function(){
$(this).fadeTo("slow", 1.0); // This should set the opacity back to 30% on hover
},function(){
$(this).fadeTo("slow", 0.5); // This should set the opacity to 100% on mouseout
});
});
</script>
<script type='text/javascript'>
$(document).ready(function(){
$(".latest_img").fadeTo("slow", 0.5); // This sets the opacity of the thumbs to fade down to 100% when the page loads
$(".latest_img").hover(function(){
$(this).fadeTo("slow", 1.0); // This should set the opacity back to 30% on hover
},function(){
$(this).fadeTo("slow", 0.5); // This should set the opacity to 100% on mouseout
});
});
</script>

12 ulasan:

hyep... yg ni mmg sy perlukans esangat.. but I really need your help with this code lah >___<
macammana kalau sy nak opacity dye dari kabur ke terang.. please...

tak pandai bab jquery neyh TT^TT

thanks ye ^^

Thank you,senang je tu,saya dah buat tambahan pada pos ni,sila baca pada tambahan dibawah pos,harap membantu :)

awww... thank you so so so much.. penat carik tutorial yg nih.. try ubah macam2 dekat kod awal yg awk pernah bagi tapi still takde perubahan..
thanks sebab post yg nih.. akhirnya.. :P nanti kalau sy nak guna tuto nih ltak dkat blog sy boleh?
sy kredit blog awk 5-p

ooops tersilap smiley nak ltak yg ni tadi ---> y-)
hehe

Haha,sama sama :) Boleh je,kalau awak nk letak kat blog :)

Catat Ulasan