ADD JQUERY LINK NUDGING ON LINKS HOVER FOR BLOGGER BLOGS

7:22:00 PM |


  1. Log in to your blogger account
  2. Template Edit HTML
  3. Search for </head>tag and add following code just Before </head> tag 
<script src="https://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>
<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>
Save Your template.

When You want to Add link Nudging to your links, Simply add a class “linknudge” to your links should look like this.
<a class="linknudge" href="https://www.ns-services.blogspot.com/">Zo Hornbill</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="https://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>
Save and Done!