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'>
#tabs26 {
float:left;
width:100%;
background:#000;
font-size:93%;
line-height:normal;
}
#tabs26 ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#tabs26 li {
display:inline;
margin:0;
padding:0;
}
#tabs26 a {
float:left;
background:url(http://2.bp.blogspot.com/_4HKUHirY_2U/SwO0C_gNhKI/AAAAAAAAANU/FMa7w4ZkTs4/left.gif) no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabs26 a span {
float:left;
display:block;
background:url(http://2.bp.blogspot.com/_4HKUHirY_2U/SwO0GFQwdKI/AAAAAAAAANc/MPQGBY1DG_U/s1600/right.gif) no-repeat right top;
padding:5px 15px 4px 6px;
color:#FFF;
}
#tabs26 a span {float:none;}
#tabsE a:hover span {
color:#FFF;
}
#tabs26 a:hover {
background-position:0% -42px;
}
#tabs26 a:hover span {
background-position:100% -42px;
}
</style>
Note: Please host above 2 images yourself.
4.Now save your template.
5.Go to Layout-->Page Elements and click on "Add a gadget".
6.Select "html/java script" and add the code given below and click save.
<div id="tabs26"> <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>
You are done.It will look like this:
How To Create Horizontal Menu Using CSS