TutorialWebForBlogger

TW4B It's about a blog that talking about blogging widgets, blogger template tutorials, search engine optimization SEO and other useful blogging tips

Let's review a topic about how to create jquery link nudging plugin . It can create your link moving from left to right. When mouse curs... nopict

How to Create Jquery Link Nudging Plugin

Let's review a topic about how to create jquery link nudging plugin. It can create your link moving from left to right. When mouse cursor pointed on the link, it moves. you can create jquery link nudging for text or image.

Text link below :
YouTube
Flickr
Technorati
Digg
Twitter

Image link below :



How to create Jquery Link Nudging Plugin ? ...

1. Go to Dashboard, click Design, click Edit HTML

2. Find code of HTML below :

</head>

you can use (Ctrl+F) to find easily

3. Right Before </head> place code of HTML below :

<!--Link-Nudging-BEGIN-->
<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function() {
$(&#39;a.nudge&#39;).hover(function() { //mouse in
$(this).animate({ paddingLeft: &#39;20px&#39; },400);
}, function() { //mouse out
$(this).animate({ paddingLeft: 0 }, 400);
});
});
</script>
<!--Link-Nudging-END-http://tutorialwebforblogger.blogspot.com-->


4. Click Save Template.

5. Using jquery link nudging plugin for Text link :

<a class="nudge" href="http://www.youtube.com">YouTube</a>


And Or,

Using jquery link nudging plugin for Image link :

<a class="nudge" href="http://astarle.com/anime-icons/avatars/100x100/naruto/naruto5.png"><img src="http://astarle.com/anime-icons/avatars/100x100/naruto/naruto5.png" /></a>


Done. Now, you've already created jquery link nudging plugin.

There are no comments yet for 'How to Create Jquery Link Nudging Plugin'