Login To Blogger Go To > Design > Edit HTML.
and mark the tick box "Expand Widget Templates"
Then, find (CTRL+F) this code in the template.
</head>
And immediately before it, paste this code:<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>
Now save your template.<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>
Then, Go To > Design > Page Elements.
Simply add a Gadget of HTML/JavaScript type.
add this code in to it:
<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>
<li class="sliding-element"><a href="#">Link 6</a></li>
<li class="sliding-element"><a href="#">Link 7</a></li>
<li class="sliding-element"><a href="#">Link 8</a></li>
<li class="sliding-element"><a href="#">Link 9</a></li>
<li class="sliding-element"><a href="#">Link 10</a></li>
</ul>
Now click Save the Template.<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>
<li class="sliding-element"><a href="#">Link 6</a></li>
<li class="sliding-element"><a href="#">Link 7</a></li>
<li class="sliding-element"><a href="#">Link 8</a></li>
<li class="sliding-element"><a href="#">Link 9</a></li>
<li class="sliding-element"><a href="#">Link 10</a></li>
</ul>
Now whenever you want to add this dancing effect to any of your links/images (either in widgets/posts), add this code (class="nudge") to the HTML "a" tag, like this:
<a href="Your URL" class="nudge">Link-Text</a>
and to use images instead of text, use this code:<a href="Your URL" class="nudge"><img src="Image URL"/></a>
That's it.
0 comments so far:
Post a Comment