How To Add 3D CSS Horizontal Menu to Blogger

Posted by Lasantha Bandara on October 16th, 2009 File Under : css, html1 Comment

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'>
#tabs22 {
float:left;
width:100%;
background:#efefef;
font-size:93%;
line-height:normal;
border-bottom:1px solid #666;
}
#tabs22 ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#tabs22 li {
display:inline;
margin:0;
padding:0;
}
#tabs22 a {
float:left;
background:url(&quot;http://3.bp.blogspot.com/_4HKUHirY_2U/SwETmrJlbuI/AAAAAAAAAL8/g83uzf12qao/left.gif&quot;) no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabs22 a span {
float:left;
display:block;
background:url(&quot;http://2.bp.blogspot.com/_4HKUHirY_2U/SwETpUS577I/AAAAAAAAAME/7I6usunI8ys/right.gif&quot;) no-repeat right top;
padding:5px 15px 4px 6px;
color:#666;
}
#tabs22 a span {float:none;}

#tabsF a:hover span {
color:#FFF;
}
#tabs22 a:hover {
background-position:0% -42px;
}
#tabs22 a:hover span {
background-position:100% -42px;
}
</style>

Note : Please Host above 2 images yourself.

4.Save your template.

5.Now Go to Layout-->Page Elements and click on "Add a gadget".

6.Select "html/java script" from header section and add the code given below and click save.

<div id="tabs22">

<ul>
<li><a href="#"><span>Home</span></a></li>
<li><a href="#"><span>HTML</span></a></li>
<li><a href="#"><span>CSS</span></a></li>
<li><a href="#"><span>Java Script</span></a></li>
<li><a href="#"><span>About</span></a></li>
<li><a href="#"><span>Contact</span></a></li>
<li><a href="#"><span>Privacy Policy</span></a></li>
</ul>

</div>

7.Now you are done.It will look like this:

CSS Horizontal Menu
Beautiful CSS Horizontal Menu For Blogger

File Under : css, html

One Response to “How To Add 3D CSS Horizontal Menu to Blogger”

  1. perera says:

    nice work man..........

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.