Animated JQuery Link For Blogger

This is about animated JQuery link.

1. Go to your blogger and click "Design" on your dashboard and click "Edit HTML"

2. Make sure "Expand Widget Templates" checked.

3. Find these tag  by using Ctrl+F      </head>  

4. Copy below code and paste just before   </head>  

$(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> 

5. Save the template and Go to layout Click page element >> Add a gadget.

6. select "HTML /java script" and copy and paste below code.

<ul id="sliding-navigation"> 
<li class="sliding-element"><a href="Link1">Name1</a></li>    
<li class="sliding-element"><a href="Link2">Name2</a></li>     
<li class="sliding-element"><a href="Link3">Name3</a></li>     
<li class="sliding-element"><a href="Link4">Name4</a></li>  
<li class="sliding-element"><a href="Link5">Name5</a></li> 
<li class="sliding-element"><a href="Link6">Name6</a></li> 
<li class="sliding-element"><a href="Link7">Name7</a></li> 
<li class="sliding-element"><a href="Link8">Name8</a></li> 
<li class="sliding-element"><a href="Link9">Name9</a></li> 
<li class="sliding-element"><a href="Link10">Name10</a></li> 
</ul>

In this code you can see Link its about your URL.
Name is what you put to URL name. 


You're done.. hay friend don't forget to share us and leave a comment.