Free Blog Themes, Blog Tutorials, Blog Templates, Blogger Tips, Blog Resources

If you want to beatify your navigation style, then you can use 3D Link List. In this tutorial, you will find a way to add 3D horizontal Link List to your blog. Just follow the instructions step by step.
1.Login to your blogger dashboard–> layout- -> Edit HTML
2.Scroll down to where you see </head>tag .
3.Copy below code and paste it just before the </head> tag .

<style type='text/css'>ul#topnav {margin: 10px 0 20px;padding: 0;list-style: none;font-size: 1.1em;clear: both;float: left;width: 99%;}ul#topnav li{margin: 0;padding: 0;overflow: hidden;float: left;height:40px;}ul#topnav a, ul#topnav span {padding: 10px 20px;float: left;text-decoration: none;color: #fff;text-transform: uppercase;clear: both;height: 20px;line-height: 20px;background: #1d1d1d;}ul#topnav a { color: #7bc441; }ul#topnav span {display: none;}

ul#topnav.v2 span{background: url(http://4.bp.blogspot.com/_ar9PeTUrwMY/SurvAv9Rh3I/AAAAAAAAAzg/6yumbEnfpmA/a_bg.gif) repeat-x left top;}ul#topnav.v2 a{color: #555;background: url(http://4.bp.blogspot.com/_ar9PeTUrwMY/SurvAv9Rh3I/AAAAAAAAAzg/6yumbEnfpmA/a_bg.gif) repeat-x left bottom;}</style><script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js' type='text/javascript'/><script type='text/javascript'>

$(document).ready(function() {

$(&quot;#topnav li&quot;).prepend(&quot;<span/>&quot;); //Throws an empty span tag right before the a tag

$(&quot;#topnav li&quot;).each(function() { //For each list item...var linkText = $(this).find(&quot;a&quot;).html(); //Find the text inside of the a tag$(this).find(&quot;span&quot;).show().html(linkText); //Add the text in the span tag});

$(&quot;#topnav li&quot;).hover(function() { //On hover...$(this).find(&quot;span&quot;).stop().animate({marginTop: &quot;-40&quot; //Find the span tag and move it up 40 pixels}, 250);} , function() { //On hover out...$(this).find(&quot;span&quot;).stop().animate({marginTop: &quot;0&quot; //Move the span back to its original state (0px)}, 250);});

});</script>

Please host image yourself.

You can change width,height,color,… as your choice.

4.Now go to Layout–>Page Element and click on "Add a gadget".

5.Select "html/java script" and add one of code below and click save.

Code 1:

<div class="container">

<ul id="topnav" class="v2">

<li><a href="http://bloggertipandtrick.blogspot.com">Home</a></li><li><a href="http://bloggertipandtrick.blogspot.com/search?max-results=999">TOC</a></li><li><a href="http://www.bloggertipandtrick.blogspot.com/search/label/widget?max-results=1000">Widgets</a></li><li><a href="http://bloggertipandtrick.blogspot.com/search/label/Templates?max-results=1000">Templates</a></li><li><a href="http://bloggertipandtrick.blogspot.com/search/label/jQuery?max-results=1000">jQuery</a></li><li><a href="http://bloggertipandtrick.blogspot.com/2009/01/blogger-tips-and-tricks-ads-details.html">Advertise</a></li><li><a href="http://bloggertipandtrick.blogspot.com/2009/01/contact-me.html">Contact</a></li>

</ul>

</div>

Result:

Code 2:

<div class="container">

<ul id="topnav">

<li><a href="http://bloggertipandtrick.blogspot.com">Home</a></li><li><a href="http://bloggertipandtrick.blogspot.com/search?max-results=999">TOC</a></li><li><a href="http://www.bloggertipandtrick.blogspot.com/search/label/widget?max-results=1000">Widgets</a></li><li><a href="http://bloggertipandtrick.blogspot.com/search/label/Templates?max-results=1000">Templates</a></li><li><a href="http://bloggertipandtrick.blogspot.com/search/label/jQuery?max-results=1000">jQuery</a></li><li><a href="http://bloggertipandtrick.blogspot.com/2009/01/blogger-tips-and-tricks-ads-details.html">Advertise</a></li><li><a href="http://bloggertipandtrick.blogspot.com/2009/01/contact-me.html">Contact</a></li>

</ul>

</div>

Bookmark It

Hide Sites