How To Add jQuery Link Nudging to Blogger/Websites

Posted by Lasantha Bandara on December 14th, 2009 File Under : jquery1 Comment

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='https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/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 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>

You are done.

jQuery Link Nudging

Demo

File Under : jquery

One Response to “How To Add jQuery Link Nudging to Blogger/Websites”

  1. The Genuine Islam says:

    Very beautiful , Thanks !

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.