Horizontal CSS Menu Tutorial to blogger

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'>
#tabs24 {
  float:left;
  width:100%;
  background:#BBD9EE;
  font-size:93%;
  line-height:normal;
  }
#tabs24 ul {
 margin:0;
 padding:10px 10px 0 50px;
 list-style:none;
  }
#tabs24 li {
  display:inline;
  margin:0;
  padding:0;
  }
#tabs24 a {
  float:left;
  background:url(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTYgBV4dLkHEXLBFZNSd4cdj6VOQSyKa95nYElp_uayKGWjQRpdVE6Z9UFun_x_Xn_iq8AqcqQ4LA12Dg1W7PTRFuB5G75rRpTWRiJFHghQupJElLMc7L-N_HNw-othmnjwVuFanU4WRMK/&quot;) no-repeat left top;
  margin:0;
  padding:0 0 0 4px;
  text-decoration:none;
  }
#tabs24 a span {
  float:left;
  display:block;
  background:url(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXzYQh4n85tQ9htOQGf9r6cmJYd5gtc011NEmohhsw_KpRJyg-u7SCMBUXkzZEVo_0fCA2x_2bId_c2rKhd2eRgMYdWtXtRl6CfWiZmpGBW3Cdmmt5fWWSAZmaeuYj2JMVMXwE58dAhCMG/&quot;) no-repeat right top;
  padding:5px 15px 4px 6px;
  color:#666;
  }

#tabs24 a span {float:none;}
/* End IE5-Mac hack */
#tabs a:hover span {
  color:#FF9834;
  }
#tabs24 a:hover {
  background-position:0% -42px;
  }
#tabs24 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="tabs24">

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

Horizontal CSS Menu Tutorial to blogger