Follo Molo (Become My Stalker And Ask Me To Stalk Back....I prefer a Yandere...)

Bored?You can play around with these line of colours for a while.....it is 100times better than PS4...because I dont have one....

15 Ogos 2010

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

Reply

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

Reply

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

Reply

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

Reply

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

Reply

Nota: Hanya ahli blog ini sahaja yang boleh mencatat ulasan.

At the post page,this banner can be spin around ;)