Add jQuery Link Nudging On Links Hover For Blogger Blogs

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.

How to Add Link Nudging by jQuery?

1. First Go to Blogger Dashboard > Design Tab > Edit HTML Tab
2. Search for </head> tag
3. Add following code just Before </head> tag

   <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/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').hover(function() {
               $(this).animate({
                   paddingLeft: '25px'
               }, dur);
           }, function() {
               $(this).animate({
                   paddingLeft: 0
               }, dur);
           });
       }); // end of Jquery Script
   </script>

4. 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.way2blogging.org'>Way2blogging</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.6.4/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 !