w1z439

Dancing Links – That’s Jquery Link Nudging

If you are a regular reader of BloggerStop, then you might have noticed some of the links in the sidebar (bottom) start dancing as soon as you hover your mouse cursor on them. This is done using Jquery – Link Nudging.

Here’s the live demo (hover your mouse cursor on these links):
BloggerStop.Net

Nudging in Images:
Dancing Blogger Icon Dancing Delicious Icon Dancing Digg Icon Dancing Digg Icon
Instructions to add similar dancing links to your blog:
STEP #1
Log in to Blogger and go to Layout -> Edit HTML
and find (CTRL+F) this code in the template:

</head>

STEP #2
Now immediately ABOVE/BEFORE it, paste this code:

<!–DANCING-NUDGE-LINKS-STARTS–>
<script src=’http://code.jquery.com/jquery-latest.js’ type=’text/javascript’/>
<script type=’text/javascript’>
$(document).ready(function() {
$(‘a.nudge’).hover(function() { //mouse in
$(this).animate({ paddingLeft: ’20px’ },400);
}, function() { //mouse out
$(this).animate({ paddingLeft: 0 }, 400);
});
});
</script>
<!–DANCING-NUDGE-LINKS-STOPS-http://bloggerstop.net–>

And save the template.

Now whenever you want to add this dancing effect to any of your links/images (either in widgets/posts), add this code (class=”nudge”) to the HTML “a” tag, like this:

<a href=”http://bloggerstop.net” class=”nudge”>Link-Text</a>

and to use images instead of text, use this code:

<a href=”http://bloggerstop.net” class=”nudge”><img src=”http://i41.tinypic.com/5wf6h5.jpg”/></a>

That’s it. Let your images dance for your readers!

Related Products (From Amazon):

15 thoughts on “Dancing Links – That’s Jquery Link Nudging

  1. Ooooh! Waited for this post since long time. :-*

    I have one more question – Can you tell, how may I have multi headers in my blog i.e. one header for one label. Like if my blog reader clicks on 'Travel' Labe,l I should be able to show ONLY travel related header and if someone clicks on 'Health' Label, my blog header should be changed as ONLY health related header. (Not two or three headers one upon one). Want to surprise my readers. 😮 Thank you.

    P.S. Last comment deleted coz question was not formed properly. :-t

  2. Great post!
    But I have problem when I follow your instruction.
    After I paste the code there is appear:
    XML error message: The string "–" is not permitted within comments.
    What should I do?

    Thanks in advance.
    Ramli

  3. @कांचन कराई
    You are welcome, I hope it will serve your purpose, in case there's still some problem then feel free to comment anywhere in this blog.

    @Admin
    Oops sorry, there was a missing hiphen (-) in the code, I have corrected the post, try it now it won't give any error now. Thanks for mentioning that.

Leave a Reply

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