How To Add Nice CSS Horizontal Menu to blogger

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'>
#tabs20 {
float:left;
width:100%;
background:#000;
font-size:93%;
line-height:normal;
}
#tabs20 ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#tabs20 li {
display:inline;
margin:0;
padding:0;
}
#tabs20 a {
float:left;
background:url(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-6k7gpYvXCjI46GPnO878jrCDYxR8mjiME3OJHPH6JN-Vpl6L4_izjy06bvSvHmXTqrqZVSkk16Q_o9hR5AfMPyFzmsAd_mHicrHQsSiITSf7NkqesJMvRLiTKuSPbRqs7f4-ZFkz4FcX/&quot;) no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabs20 a span {
float:left;
display:block;
background:url(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfwurcN5RZoLus2urM31Rkk9isS_85EmKm19dUKVV7FhBIdZHmR2ylFhH6mB_afVlu1Oe6O_cYZscX7xqbYio6BlT1xp-joehwxF3t1VU9w6Wv5ptoEMme6nMMxffW_Yw2yL_s6hEhYNnw/&quot;) no-repeat right top;
padding:5px 15px 4px 6px;
color:#FFF;
}

#tabs20 a span {float:none;}
/* End IE5-Mac hack */
#tabsH a:hover span {
color:#FFF;
}
#tabs20 a:hover {
background-position:0% -42px;
}
#tabs20 a:hover span {
background-position:100% -42px;
}
</style>


 Please Host above 2 images yourself.
Now click Save Templste.

Then, Go To > Design > Page Elements.

Simply add a Gadget of HTML/JavaScript type.

add this code in to it:

<div id="tabs20">

<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> 

Replace Names and # with your contents.
Now click save and you are done.

Posted in: