Nudge Effect for Label and Link on Blogger

Thursday 25 July 2013

This tutorial will help to add Nudge effect when he hover over link. This is very stylish plugin this will attract your visitor easily. Here I gonna give two types, that is for blogger labels and also for custom link which you choose to take effect.




Watch live demo below:

                       Jebus
                       Nesaraj


Adding Nudge Effect to Label

Step 1. Go to blogger.com then Log in using your user name and password.

Step 2. From your Blogger dashboard, go to Template and click on the Edit HTML button:


Step 3. Then click anywhere inside the code area to search (using CTRL + F) and find </head> tag:

Step 4. Add the following code just above it.
 <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>  

Step 5. Now save the Template.

Adding Nudge Effect to Particular Link and Label

Step 1. You have follow same Steps 1-5 .

Step 2. When you want to add Nudge Effect to custom links, Simply add class"linknudge" like below:

 <a class='linknudge' href='http://jebusnesaraj.blogspot.com'>Jebus Nesaraj</a>  

- Above code is for custom links only.

No comments:

Post a Comment