Place Your Ads Here 460x68 ads

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="http://only4everyone.blogspot.com">Name1</a></li>  
<li class="sliding-element"><a href="http://only4everyone.blogspot.com">Name2</a></li>   
<li class="sliding-element"><a href="http://only4everyone.blogspot.com">Name3</a></li>   
<li class="sliding-element"><a href="http://only4everyone.blogspot.com">Name4</a></li>
<li class="sliding-element"><a href="http://only4everyone.blogspot.com">Name5</a></li>
<li class="sliding-element"><a href="http://only4everyone.blogspot.com">Name6</a></li>
<li class="sliding-element"><a href="http://only4everyone.blogspot.com">Name7</a></li>
<li class="sliding-element"><a href="http://only4everyone.blogspot.com">Name8</a></li>
<li class="sliding-element"><a href="http://only4everyone.blogspot.com">Name9</a></li>
<li class="sliding-element"><a href="http://only4everyone.blogspot.com">Name10</a></li>
</ul>



In this code you can see http://only4everyone.blogspot.com replace it with  your URL.
Name is what you put to URL name. 



Sameera ChathurangaAbout Author Shoyab Khan

Blogger, MAC user, Apple Fan, Online Content Writer, Designer, Gamer, Programmer and Jovial Guy!. Like my Facebook Fan Page. Catch me on Twitter and Google+. Read more about Me and Www. Only4Everyone.Blogspot.com. Download Free Games,Download Free Software,Download Movies and Watch Online,Blogger Wordpress and Website Tips , Tricks ,Widgets,Templets, and many other Sources and Health Tips,Photo Gallery contact me

Thank You

0 comments:

Post a Comment

loading...
Related Posts Plugin for WordPress, Blogger...