Add An Animated Bump Effect To Labels List On Blogger

jquery blogger effectIn this post we have a fun effect you can add to the links in your blog labels list.This trick has been around for a while and i have been using it on some other blogs.The effect is created using jQuery and basically when a visitor places their cursor over a link it moves across horizontally.So in the same manner you might have links change color, underline or change background on hover this will make them move.

Live Demo – You can see a demo in the category section in the sidebar of Design And Blog : Best Blogger Templates.

Video Tutorial Included – Fore More Help See The Video Tutorial At The End Of The Post.

Add Animated Link Lists To Your Blog

Step 1. In your Blogger dashboard click > Design > Edit Html
Design Edit Html Blogger

Step 2. Find the following piece of code in your blogs Html : (Click Ctrl and F for a search bar to help find the code – More Info)

</head>

Step 3. Copy And Paste The Following Code Directly Above / Before </head>

<!–Animated Label Links For Blogger http://www.spiceupyourblog.com–><script src=’http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js’ type=’text/javascript’>
</script>
<script type=’text/javascript’>
var dur = 450;
$(document).ready(function() {
$(‘a.linknudge, .Label ul li a’).hover(function() {
$(this).animate({
paddingLeft: ’20px’
}, dur);
}, function() {
$(this).animate({
paddingLeft: 0
}, dur);
});
});</script><!–End Animated Label Links For Blogger http://www.spiceupyourblog.com–>

Step 4. Save Your Template.

Video Tutorial For Animated Links In Labels Gadget

That’s it now the links in your Labels Gadget will have this cool effect.

 

24 comments:

  1. Super.. i done it. 🙂

    Will you say how to add ‘Top to Bottom’ button in blog?

    By
    Hari (http://hari11888.blogspot.com)

    ReplyDelete

  2. @ Hari – Do you mean the way the link to best blogger templates jump right to the category’s ?

    ReplyDelete

  3. Really cool effect i just used it on my blog, well explained.

    ReplyDelete

  4. hello paul. can u do the tutorial bout new funtion for “share this”? like the top of ur blog post.. with a different design of “share this”? thanks 🙂

    ReplyDelete

  5. @ Haz Issac – I am currently working on a number of scripts from Add This, exactly what is the new funtion from share this ? What effect are you looking for ?

    ReplyDelete

  6. Amazing … thank you for sharing Paul.

    ReplyDelete

  7. @Admin: No. I like to add the button ‘back to top’button for ‘Top to bottom’.

    In previous post comments, admin reply in shine is very cool. How did you add this? i am using disqus. Is possible to add?

    Regards
    Hari (http://hari11888.blogspot.com)

    ReplyDelete

  8. everything works through the good work
    thank you

    ReplyDelete

  9. Great im glad you had no problems TDJ 🙂

    ReplyDelete

  10. This is cool. this can be a good substitute to the Tag Cloud (Blogumus) by Amanda

    ReplyDelete

  11. Paul,

    I added it and it worked beautifully but it totally screwed around with my featured post slider, but when I took the code back out it went back to normal, can you help me fix this?

    I really like this effect and would like to use it.

    – Tee

    ReplyDelete

  12. @Tamara Spicer : This is because Featured Post Slider is based on jquery and even this animated effect is based on jquery and you can add only one jquery application/script in a webpage.

    Even I have a Featured Post Slider and it was screwed when I added jquery Social Bookmarking Icons from Spiceupyourblog.com. I almost banged my head when my post slider wasn’t working and then I searched and found out about this.

    ReplyDelete

  13. @ Saif – That is not true you can add more that one jQuery effect in your blog, it is recommended you only add the jQuery script once but you can call on the jQuery as many times as you like.On the template site the demo leads to the Popular Posts and Labels both have jQuery effects.

    ReplyDelete

  14. @Admin – So then once I place jQuery script on my blog then all I have to do is add the html code of the particular effect I want? Or how does that work? e.g If I add the jQuery script for one of your post slider effects then when I place the social Bookmarking Icons from here, do I skip the jQuery and just add the html code?

    ReplyDelete

  15. @ Tamara – This is not something we need to get into, i was just making the point.I was referring to the main jQuery script however there may be other scripts that need to be added.It would be great if we just added a script and everything worked as we liked 😀 Every tutorial on this blog is tested…tested again …tested again, just follow the steps exactly and everything will work.

    ReplyDelete

  16. thank you

    ReplyDelete

  17. Brilliant HackersJune 5, 2011 at 5:10 PM

    excellent…simply superb effect. you are a magician for blogger audience

    ReplyDelete

  18. Really really awesome effect..thanks a loads for this video tutorial..

    ReplyDelete

  19. I Want To Add This Effect To My Random Posts Widget. How Can I Do This?
    Please Help..
    My Blog Is,
    http://www.cityofsms.blogspot.com

    ReplyDelete

  20. nice man i loved it so much and i apply it on my blog
    http://earnwithptc2011.blogspot.com/

    ReplyDelete

  21. thank you

    ReplyDelete

  22. Hello Paul,

    Thank you for this tutorial. It worked, but it is only for Labels. right?
    I want the other working animated like Blog Archive, Popular Posts, Blog List.
    Please HELP me to do this Blog Archive, Popular Posts, Blog List will be animated.
    Thank you.

    -jayryan09-

    ReplyDelete

  23. Bollywood HD PicturesJune 30, 2012 at 11:20 PM

    Hay Buddy thanks for this nice tutorial now my blog is looking professional and awesome… by Shan King Khan

    ReplyDelete

  24. Video scribe resourceAugust 21, 2013 at 12:33 PM

    Thank you for this excellent post full of ideas.It is helpful & your post motivated me..thank

    ReplyDelete