How To Create Horizontal Tab Menu Using CSS

How To Create Horizontal Tab Menu Using CSS

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'>
 #tabs28 {
   float:left;
   width:100%;
   background:#EFF4FA;
   font-size:93%;
   line-height:normal;
 border-bottom:1px solid #DD740B;
   }
 #tabs28 ul {
 margin:0;
 padding:10px 10px 0 50px;
 list-style:none;
   }
 #tabs28 li {
   display:inline;
   margin:0;
   padding:0;
   }
 #tabs28 a {
   float:left;
   background:url(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwKevXxKLtpNnlOE6iOQMCFpl5GyV2U9l5LSR29uMHIAqVlJv-evxH3B7iU5SuLqiLkHDQtyo32Zd3pW8dq98A2bFa3F06n4k_WYbpAvSa5yUDMTEKv7OvsmNQJykAo__0G0VSobopxNPV/&quot;) no-repeat left top;
   margin:0;
   padding:0 0 0 5px;
   text-decoration:none;
   }
 #tabs28 a span {
   float:left;
   display:block;
   background:url(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_vNxhVrN5pFof-NMZWP9LWC2JfV0K9i7w15GlmDy7ypkk4w5D4gJshEK-qTGgdD91RcPlpNmlD0zLj5o9fVBXYe7Wi627sirf9QcSg-nB3KzWbm2ifTIYOC3GAAwvPnx04AYRYqBTfQla/&quot;) no-repeat right top;
   padding:5px 15px 4px 6px;
   color:#FFF;
   }
 #tabs28 a span {float:none;}
 /* End IE5-Mac hack */
 #tabsI a:hover span {
   color:#FFF;
   }
 #tabs28 a:hover {
   background-position:0% -42px;
   }
 #tabs28 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="tabs28">

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

Create Horizontal Tab Menu Using CSS

File Under : css, html