Many of the visitors kin to know " how to add animated Link in the blogger ", This tutorial will describe how to use jQuery for Animated Or Nudging Link. I have provided a demo or example for my friends about this.

1. Login to your blogger dashboard -- layout -- Edit HTML
2. Scroll down to where you see </head> tag .
3. Copy below code and paste it just before the </head> tag.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>

<script type='text/javascript'>
//<![CDATA[

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

6. Now save your template.
7. Go to Layout -- Page Elements and select " Add a gadget ".
8. Select " html or 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>

Here is the demo for Animated Or jQuery Link Nudging.

You are done with this feature and please donot forget to comment

Incoming search terms:-

How To Add Animated Or jQuery Link Nudging To Blogger

Add Animated Or jQuery Link Nudging To Blogger

Blogger tricks and tips

Tricks For Blogger

Tips For Blogger

Tricks

Posted in: Blogging Tricks