Sunday, 19 August 2012

Now add left right dancing link effect in your blogger blog.

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

No comments: