Saturday, January 29, 2011

Animated JQuery Link For Blogger

This is about animated JQuery link.visit DEMO

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.

7. Enjoy it

6 comments:

  1. hello, when i save the templates

    Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
    XML error message: The element type "head" must be terminated by the matching end-tag "".

    what should i do?
    feedback me at my shoutbox www.aliffsingle.blogspot.com
    thnak you :)

    ReplyDelete
  2. alep', it mean after you edited, it have some error(may be some tags are not closed). so do it properly.

    ReplyDelete