 |
| Sidebar Link Nudging effect |
Look at the image at right side. It is a linkbar stated in a blog sidebar. This linkbar has a special effect. It is an uniques style which can be implement in any blogger.com blog. When blogreader hove mousepointer through a link, that link will be nudge slightly. It is calle sidebar link nudging effect. Today we will know how to nudge a link in a sidebar.
- First of all you must login in blogger.com with your Google id and password.
- Then go directly to Layout > HTML tab section.
- There paste the code below just before the <head> tag.
- Take a look preview befor save themplate
<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>
- After adding the code now save the template.
- Now go to Layout > Page elements section and get an "Add a new Gadget"
- Take a 'HTML/ Javascript' and write your links as the style 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>
</ul>
- You can add as many link you want. Change the '#' mark with "URL" and "Link1,2,3,4" with linkname.
- Save it.
- Check your blog. It rocks.
No comments:
Post a Comment
Please help me to improve my English. Please Email me or comment below. Thanks...