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

ProBlogger - Inspiring Others Realize Their Dreams!

Share this

Related Products

Related Posts

Previous
Next Post »

16 comments

Write comments
January 06, 2010 12:46 PM delete

i have to do it :D
thanks brooo :)

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

Reply
avatar
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)

Reply
avatar
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.

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

Reply
avatar
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.

Reply
avatar
January 07, 2010 9:11 PM delete

Hmmm coool i am trting to know more javascript!

Reply
avatar
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?

Reply
avatar
January 08, 2010 9:18 AM delete

Yes you can do that Reza...

Reply
avatar
February 19, 2010 6:04 AM delete

Thanks, I used this in my blog too :)

Reply
avatar
March 22, 2010 10:51 AM delete

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

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

Reply
avatar
April 16, 2010 3:25 PM delete

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

Reply
avatar
May 10, 2010 8:29 PM delete This comment has been removed by the author.
avatar
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/

Reply
avatar
November 10, 2011 5:37 AM delete

Perfect just what I was searching for!

Reply
avatar

Comments are moderated on this blog

Allowed HTML tags: <b>, <i> and <a>

Comment Like This! and Optimize your blog EmoticonEmoticon