Add Nice and smooth link nudging to Links on hover. This is great plugin and more attractive to your blog visitors. Here is I am giving two types. that is for custom links and for blogger labels plus custom links.
Also read : jQuery to Turn off or Turn on the lights while watching videos
How to Add Link Nudging by jQuery?
First Go to Blogger Dashboard > Design Tab > Edit HTML Tab
Search for
</head> tag
Add following code just Before
</head> tag
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>
var dur = 400; // Duration Of Animation in Milli Seconds
jQuery(document).ready(function($) {
$('a.linknudge').hover(function() {
$(this).animate({
paddingLeft: '25px'
}, dur);
}, function() {
$(this).animate({
paddingLeft: 0
}, dur);
});
}); // end of Jquery Script
</script>
Now Save Your template!
When You want to Add link Nudging to your links, Simply add a class “linknudge” to your links like this!
<a class='linknudge' href='http://www.bloggerwidgetgenerators.com'>Blogger Widget Generators</a>
The above code is For Custom links those are you animating by adding a class of ‘linknudge‘
Here is another code i am giving that is for your labels as well as for your custom links
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'>
</script>
<script type='text/javascript'>
var dur = 400; // Duration Of Animation in Milli Seconds
$(document).ready(function() {
$('a.linknudge, .Label ul li a').hover(function() {
$(this).animate({
paddingLeft: '25px'
}, dur);
}, function() {
$(this).animate({
paddingLeft: 0
}, dur);
});
}); // end of Jquery Script
</script>
Enjoy!
Subscribe to our RSS Feed or
Follow me on Twitter for more Cool Posts !