How To Add Link Nudging On Hover Links For Your Blog !!

Howdy Reader,

Now in this tutorial I will explain how to Add a Nudging to hover links. now this is a beautiful way to attract your visitors and make them stay longer on your pages and surf through your site.

It is a really good way to make your blog attractive.

Now as usual Save your template before adding anything and then Follow this simple steps.

Lets get started them.

• Log in to your blogger account.
• Go to Design > Edit Html anf find this code </Head> (use Crtl + F)
• Now just before this code add the code below

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

• Now Save the template.
• Go to Page element and "Click on Add a gadgets".
• Choose HTML/Javascript.
• And add the code below.

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

Now replace the # with your address where you want to direct your visitors to and Replace the link with what ever label you want it to be. Now save it and you are done.

Enjoy

And if you have any problem feel free to contact me. 

Posted in: Blogging