Ads 468x60px

.

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(&quot;#sliding-navigation&quot;, 25, 15, 150, .8); }); 
function slide(navigation_id, pad_out, pad_in, time, multiplier) 
{ 
// creates the target paths 
var list_elements = navigation_id + &quot; li.sliding-element&quot;; 
var link_elements = list_elements + &quot; a&quot;; 

// 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(&quot;margin-left&quot;,&quot;-180px&quot;); 

// updates timer 

timer = (timer*multiplier + time); 

$(this).animate({ marginLeft: &quot;0&quot; }, timer); 
$(this).animate({ marginLeft: &quot;15px&quot; }, timer); 
$(this).animate({ marginLeft: &quot;0&quot; }, 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.

Don't Miss Another Post. Free Updates Like Us

Share this Article

Enter Your Email For Updates

Labels

Adsense (1) Automatic Backlink (11) b (1) Backlink (9) Blog beginners (134) blog designing (138) blog site (3) blog spot (1) Blog Templates Download (15) blog Tips and Tutorials (1) Blogger blog (4) Blogger help (4) Blogger Templates (1) Blogger tips (3) Blogger tutorial (5) Blogging Software (1) blogging tips and tricks (149) Blogging Tips and tutorials (156) Blogging Tools (131) Blogging widgets (101) Codes and scripts (72) Computer news and updates (31) Directorys (8) Ebooks (1) f (1) Facebook (16) Facebook And Blogger (1) Faceobook (1) Farmville (1) File hositng and sharing (2) Fonts and Images (1) Forums (1) Free online services (28) Freewares (34) Gadets (13) Games (3) Google (22) google blogs (3) how 2 start a blog (3) How do I Start a Blog (5) How do i start a blog for free (12) How do you start a blog (7) how to blog (1) How to Get Started Blogging for Yourself (1) how to start a blog (4) How to start a blog for free (3) How To Start A Free Blog (1) how to start blogging (1) how to write a blog (1) i pad (4) Internet (43) Internet money making tips and tutorials (7) make a free blog (1) Make a free blogger blog (2) make a free bloghow do i start a blog for free (1) make blog (1) make your own blog (1) Make your own web site (2) Make your own website free (7) Mobile (4) Photoshop plugins and tutorials (2) rss (3) Search engine optimization (52) Seo (55) Seo blogger (5) softwares (24) start a blog (4) start a blog how to (1) Start a blog Tips (1) start blog (6) start my own blog (1) start your own blog (4) Start your own blog free (2) starting a blog (5) starting a blog for free (2) Tips and Triks (58) Tips to Start Blogging Successfully (1) Twitter (4) updates (1) web designing (10) websites (1) Windows Tips and Triks (22) Wordpress (1) You tube (1)