Blogger9:- Now add left right dancing link effect in your blogger blog. 0

| | , , , ,

This trick give your blogger great effect because when you add this trick in your blog and when touch link from your mouse cursor link text dance left and right .

Now follow simple and easy step to give cool effect to your blogger selective link.--->>>>

* First go to your blogger Dashboard.

* Now click in design tab and edit HTML.

* Click in small box to expand your blogger template now.

* Find this code </head> by CTRL+F key easily from your web browser.

* Copy below code and paste before </head>

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


* Click in sve tab to save your blogger template now.

* Again go blogger DASHBOARD and click in design tab.

* Now you are here--->>> Add new element.

* Click in add new gadget which is sidebar now.

* Select HTML/Javascript from list and when open new blank box copy below code and paste in blank box.


<ul id="sliding-navigation">
      
<li class="sliding-element"><a href="#">Your Link 1</a></li>
      
<li class="sliding-element"><a href="#">Your Link 2</a></li>
      
<li class="sliding-element"><a href="#">Your Link 3</a></li>
      
<li class="sliding-element"><a href="#">Your Link 4</a></li>
      
<li class="sliding-element"><a href="#">YourLink 5</a></li>

<li class="sliding-element"><a href="#">Your Link 6</a></li>

<li class="sliding-element"><a href="#">Your Link 7</a></li>

<li class="sliding-element"><a href="#">Your Link 8</a></li>

<li class="sliding-element"><a href="#">Your Link 9</a></li>

<li class="sliding-element"><a href="#">Your Link 10</a></li>
  
</ul>









Note- Change your link with your own Label link ok.

* Now save your HTML/Javascript and your are done

StumpleUpon DiggIt! Del.icio.us Blinklist Yahoo Furl Technorati Simpy Spurl Reddit Google I'm reading: Blogger9:- Now add left right dancing link effect in your blogger blog. ~ Twitter FaceBook

0 Responses So Far:

Categories

Select Your Categories