Thursday, 20 September 2012

jQuery Nudging In Blogger

Important: All scripts hosted on widcraft.googlecode.com don't work anymore because Google has blocked that SVN repository.

This simple jQuery effect will make your simple links to dancing links and it's too easy to add this effect on your blogger with only a little bit jquery script.

Installing :

  • Go To Blogger > Template > Edit HTML
  • Just above </head> post following jquery :

<script src='http://widcraft.googlecode.com/svn/jquery.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://www.wwefansnation.com" class="nudge">Link-Text</a>

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

<a href="http://www.wwefansnation.com" class="nudge"><img src="YourImage"/></a> 
Important: Check our new website TricksPanda.com for WordPress tutorials, plugins and more.
 
Powered by Blogger.