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>
Save Template,Dah Siap,Tu jela^^
Klik sini untuk lihat demo
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
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>
<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>
<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
wah..smart gak..hehe
Reply@Anip™ Dah cuba tak?
Replywahhhh..yang ni jadi..thanks3
Reply@Fina Fento Sama sama =)
Reply;ar! hehe :x
Replysilap ! :ar!
Replyhyep... yg ni mmg sy perlukans esangat.. but I really need your help with this code lah >___<
Replymacammana 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
Replyawww... 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..
nanti kalau sy nak guna tuto nih ltak dkat blog sy boleh?
Replythanks sebab post yg nih.. akhirnya..
sy kredit blog awk 5-p
ooops tersilap smiley nak ltak yg ni tadi ---> y-)
Replyhehe
Haha,sama sama
Boleh je,kalau awak nk letak kat blog 
Replyowh yeah... ^___^ thanks ^__^
ReplyNota: Hanya ahli blog ini sahaja yang boleh mencatat ulasan.