Add Jquery Nudging Links on Hover for Blogger

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?

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!