How To Add JQuery Fade Effect to Blogger / Website

Posted by Lasantha Bandara on May 17th, 2010 File Under : image, jquery12 Comments

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.

File Under : image, jquery

12 Responses to “How To Add JQuery Fade Effect to Blogger / Website”

  1. Robin says:

    Thank You very much

  2. danger-boy says:

    that's cool ... thanks

  3. Beben says:

    yeah...more elegant with script stack up of CSS
    great

  4. Wunan says:

    marvelous...

    got it in my blog. http://dmal-photography.blogspot.com/ & http://dmaltravel.com

  5. Historian says:

    Nice...

  6. vanezza astilla says:

    wow. thanks for this. cooool! 😀

  7. th3m@d0xt3r says:

    Awersome! thanks!

  8. jrenn says:

    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/

  9. xl says:

    great!
    thanks a lot!

  10. oxy-radon says:

    nice post friend. go head and share exclusive post for us.

  11. hotboy says:

    very nice post thanks for this and good work...

  12. Kushal Jain says:

    Ultimate! Thank you 🙂

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.