Dancing Links - That's Jquery Link Nudging

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!