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:

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:

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

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):

Blog Admin : Divya Sai

ProBlogger - Inspiring Others Realize Their Dreams!

16 comments

Write comments

Beben Koben

January 06, 2010 12:46 PM delete

i have to do it :D
thanks brooo :)

Kanchan Karai (Mogaraafulalaa)

January 07, 2010 1:22 AM delete

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. :-o Thank you.

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

Divya Sai

January 07, 2010 5:16 AM delete

Well yes you can do that, follow this method:
http://bloggerstop.net/2008/12/show-widgets-in-only-specific-pages-or.html
and select the option to restrict a widget (header in your case), in a SPECIFIC URL/ARTICLE/POST-PAGE, where this specific url/post-page is the url of the label, like this in my blog (http://bloggerstop.net/search/label/Blogger%20Help)

January 07, 2010 9:17 AM delete

Ah, great! I will experiment it on my blog and reply. Thanks a lot for sucha a quick reply.

Admin

January 07, 2010 9:30 AM delete

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

January 07, 2010 9:38 AM delete

@कांचन कराई
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.

Anup

January 07, 2010 9:11 PM delete

Hmmm coool i am trting to know more javascript!

Reza@Blogging Guide

January 08, 2010 5:41 AM delete

Cool! I will try it on my blog as soon as possible? But one question, can the script hosted in my own host?

January 08, 2010 9:18 AM delete

Yes you can do that Reza...

Anonymous

February 19, 2010 6:04 AM delete

Thanks, I used this in my blog too :)

Abhishek

March 22, 2010 10:51 AM delete

i have tried a lot but its not working ....

Please see my blogs....
for fun and career

April 16, 2010 3:25 PM delete

İt s great but it s not work in my template...What can I do ? :(

Sasha Vong

May 10, 2010 8:29 PM delete This comment has been removed by the author.

Zeegi

June 27, 2010 2:52 PM delete

Ok this is creepy, but hey I might use this for the BlogRoll purpose.. This is the first I've seen..
Thanx and check this out http://zeegi-comix.blogspot.com/