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-https://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=”https://bloggerstop.net” class=”nudge”>Link-Text</a>

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

<a href=”https://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):

Leave a Reply

15 Comments on "Dancing Links – That’s Jquery Link Nudging"

Notify of
avatar
Sort by:   newest | oldest | most voted
Beben
Guest

i have to do it 😀
thanks brooo 🙂

View Comment
कांचन कराई
Guest

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

View Comment
Divya Sai
Guest

Well yes you can do that, follow this method:
https://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 (https://bloggerstop.net/search/label/Blogger%20Help)

View Comment
कांचन कराई
Guest

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

View Comment
Admin
Guest

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

View Comment
Divya Sai
Guest

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

View Comment
Anup
Guest

Hmmm coool i am trting to know more javascript!

View Comment
Reza@Blogging Guide
Guest

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

View Comment
Divya Sai
Guest

Yes you can do that Reza…

View Comment
Angelina
Guest

Thanks, I used this in my blog too 🙂

View Comment
Abhishek
Guest

i have tried a lot but its not working ….

Please see my blogs….
for fun and career

View Comment
GÖK-TÜRK
Guest

İt s great but it s not work in my template…What can I do ? 🙁

View Comment
Zeegi
Guest

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/

View Comment
mba in bangalore
Guest

nice tutorial

View Comment
Music
Guest

Perfect just what I was searching for!

View Comment
wpDiscuz