How To Add 3D Horizontal Link List to Blogger

Add This To Del.icio.us StumbleUpon This Add to Technorati Digg This

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:

<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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkT2EYeqwqXzEKVyy46uotMlwS7uEf3w8K3ukuHm2TkgJGhdvJXV7a7VYCPSV22y6a17tQ2BCxKCzQ3E9Cf37DJ7zJu06Xxp8wD1XaKugIeyVX72puAEqsrGIo2fCrK5eBwg-Pg6Fw3Sg/s1600/a_bg.gif) repeat-x left top;
}
ul#topnav.v2 a{
color: #555;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkT2EYeqwqXzEKVyy46uotMlwS7uEf3w8K3ukuHm2TkgJGhdvJXV7a7VYCPSV22y6a17tQ2BCxKCzQ3E9Cf37DJ7zJu06Xxp8wD1XaKugIeyVX72puAEqsrGIo2fCrK5eBwg-Pg6Fw3Sg/s1600/a_bg.gif) repeat-x left bottom;
}
</style>
<script src='http://yourjavascript.com/20561118251/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>

Now click Save Template.

Then, Go To > Design > Page Elements.

Simply add a Gadget of HTML/JavaScript type.

Now copy one of the below codes and add that code in to it:

Code 1:

<div class="container">

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

<li><a href="http://bdlab.blogspot.com">Home</a></li>
<li><a href="#">TOC</a></li>
<li><a href="#">Widgets</a></li>
<li><a href="#">Templates</a></li>
<li><a href="#">jQuery</a></li>
<li><a href="#">Advertise</a></li>
<li><a href="#">Contact</a></li>

</ul>

</div>

Code 2:

<div class="container">

<ul id="topnav">

<li><a href="http://bdlab.blogspot.com">Home</a></li>
<li><a href="#">TOC</a></li>
<li><a href="#">Widgets</a></li>
<li><a href="#">Templates</a></li>
<li><a href="#">jQuery</a></li>
<li><a href="#">Advertise</a></li>
<li><a href="#">Contact</a></li>

</ul>

</div>

Replace Names and # with your contents.
Now click Save.