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

• Latest Post 1
• Latest Post 2
• Latest Post 3
• Latest Post 4
• Latest Post 5
• Latest Post 6
• Latest Post 7
• Latest Post 8

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:

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

• "Building Website Traffic: PROVEN Low and No-Cost Web Traffic Generating Tips, Secrets, Tools, & Resources, That Get More Web Traffic To Your Websites and Blogs!"
• The Complete Idiot's Guide to Creating a Web Page & Blog, 6th Edition
• The Huffington Post Complete Guide to Blogging
• How to Make Money with Your Blog: The Ultimate Reference Guide for Building, Optimizing, and Monetizing Your Blog (How to Make . . .)