Add An Animated Bump Effect To Labels List On Blogger




| 24 comments

jquery blogger effect

In 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.

Drop Your Comments And Questions Below.


Join over 5000 Subscribers! Please sign up to receive Updates.

SUYB has its Focus on Quality. If we post Crap, you can unsubscribe.

No Spam and No Garbage! - Use RSS, Twitter & Facebook as an Alternative


If You Enjoyed This Post Please Take 5 Seconds To Share It.

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 :D Every tutorial on this blog is tested...tested again ...tested again, just follow the steps exactly and everything will work.

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

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

    ReplyDelete
  18. 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
  19. nice man i loved it so much and i apply it on my blog
    http://earnwithptc2011.blogspot.com/

    ReplyDelete
  20. 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
  21. Hay Buddy thanks for this nice tutorial now my blog is looking professional and awesome... by Shan King Khan

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

    ReplyDelete



Important - If you ask a question make sure you tick the "Notify Me" box below the comment form to be notified of follow up comments and replies.


Hire Us