How to Add Animanted Link or JQuery Link Nudging

Many visitors want to know how to add animated Link in the blogger or website. This tutorial will describe how to use JQuery for Link Nudging.  You can find a demo here.

Instruction To add Animated JQuery Link

First of all you have to Add JQuery in Blogger or Website.
1.Login to your blogger dashboard--> layout- -> Edit HTML
2.Scroll down to where you see </head>tag .
<script type='text/javascript'>

$(document).ready(function() 
  
{ 

  
slide("#sliding-navigation", 25, 15, 150, .8); 

  
}); 

  
  
function slide(navigation_id, pad_out, pad_in, time, multiplier) 

  
{ 

  
// creates the target paths 

  
var list_elements = navigation_id + " li.sliding-element"; 

  
var link_elements = list_elements + " a"; 

  
  
// initiates the timer used for the sliding animation 

  
var timer = 0; 

  
  
// creates the slide animation for all list elements 

  
$(list_elements).each(function(i) 

  
{ 

  
  // margin left = - ([width of element] + [total vertical padding of element]) 

  
  $(this).css("margin-left","-180px"); 

  
  // updates timer 

  
  timer = (timer*multiplier + time); 

  
  $(this).animate({ marginLeft: "0" }, timer); 

  
  $(this).animate({ marginLeft: "15px" }, timer); 

  
  $(this).animate({ marginLeft: "0" }, timer); 

  
}); 

  
  
// creates the hover-slide effect for all link elements    
$(link_elements).each(function(i) 

  
{ 

  
  $(this).hover( 

  
  function() 

  
  { 

  
   $(this).animate({ paddingLeft: pad_out }, 150); 

  
  },   
  function() 

  
  { 

  
   $(this).animate({ paddingLeft: pad_in }, 150); 

  
  }); 

  
}); 

  
} 

  
</script> 

  
<script type='text/javascript'> 

  
if (window.jstiming) window.jstiming.load.tick(&#39;headEnd&#39;); 

  
</script> 

3.Copy below code and paste it just before the </head> tag.


6.Now save your template.


7.Go to Layout-->Page Elements and click on "Add a gadget". 8.Select "html/java script" and add the code given below and click save.

<ul id="sliding-navigation"> 

  
      
<li class="sliding-element"><a href="#">Link 1</a></li> 

  
      
<li class="sliding-element"><a href="#">Link 2</a></li> 

  
      
<li class="sliding-element"><a href="#">Link 3</a></li> 

  
      
<li class="sliding-element"><a href="#">Link 4</a></li> 

  
      
<li class="sliding-element"><a href="#">Link 5</a></li> 

  


  
<li class="sliding-element"><a href="#">Link 6</a></li> 

  


  
<li class="sliding-element"><a href="#">Link 7</a></li> 

  


  
<li class="sliding-element"><a href="#">Link 8</a></li> 

  


  
<li class="sliding-element"><a href="#">Link 9</a></li> 

  


  
<li class="sliding-element"><a href="#">Link 10</a></li> 

  
  
</ul>