This quick tutorial explains how to add jquery fade effect to your images in blogger or any other web site.This is very easy and you can do this less than a minute.But this effect will add some attractive appearance to your blog or web site.You can look at the DEMO page of this tricks from here.Now follow the steps below to do this.
1.Login to your blogger dashboard--> layout- -> Edit HTML
2.Scroll down to where you see </head> tag .
3.Copy below code and paste it just before the </head> tag .
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/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>
4.Now save your template and you are done.
Thank You very much
that's cool ... thanks
yeah...more elegant with script stack up of CSS
great
marvelous...
got it in my blog. http://dmal-photography.blogspot.com/ & http://dmaltravel.com
Nice...
wow. thanks for this. cooool! 😀
Awersome! thanks!
Hi there, could you please help me?
I've tried various plugins but none have worked and i'm sure it's down to my missing something very obvious (incompetence in other words), and this fade effect though being so simple has been another failure on my behalf
i look after a educational blog so have to be careful with altering things, so i set up a temp blog to test sliders et al and latterly this fade, alas.
i'd be very grateful if you could have a look and tell me where i am going so badly wrong with jquery!
thank you
test blog here
http://anthrtst.blogspot.com/
great!
thanks a lot!
nice post friend. go head and share exclusive post for us.
very nice post thanks for this and good work...
Ultimate! Thank you 🙂