How to add a horizontal navigation bar to your header

From this tutorial, you will be able to add a horizontal navigation bar to your header. As we all know, Blogger’s default templates doesn’t supply this option in it’s gadgets, but we are able to manually add it with html/javascript. Remember to always back up your current existing template before beginning any tutorials in case it doesn’t turn out as expected.

Steps to follow:

1. Login to your Blogger dashboard

2. Go to Layout > Edit HTML (Click on “expand widgets” box)

3. Now search for the following section code: ]]></b:skin>
and add the following section code below right BEFORE it

/* Menu Control
----------------------------------------------- */
.menu{
margin: 0;
padding: 0px;
font: bold 12px Verdana;
background: #000;
width:900px;
height:31px;
}

.menu ul{
margin: 0;
padding: 0;
list-style-type: none;
}

.menu ul li{
position: relative;
display: inline;
float: left;

}

.menu ul li a{
display: block;
background: #000;
color: white;
padding: 8px 10px;
border-right: 1px solid #778;
color: #2d2b2b;
text-decoration: none;
}

* html .menu ul li a{
display: inline-block;
}

.menu ul li a:link, .menu ul li a:visited{
color: white;
}

.menu ul li a:hover{
background: black;
color: white;
}

Note: You will need to replace the section code in red with your width’s template and adjust the height’s px to fit your style.

4. Next, you will need to search for the following section code:

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='test (Header)' type='Header'/>
</b:section>
</div>

5. Add the following section code below right under it:

<div class='menu'>
<ul>
<li><a href='http://'>Home</a>
<li><a href='http://search/label/tutorials'>Tutorials</a></li>
    <li><a href='http://search/label/templates'>Templates</a></li>
    <li><a href='http://search/label/widgets'>Widgets</a></li>
  <li><a href='http://search/label/designs'>Designs</a></li>
<li><a href='http://search/label/icons'>Icons</a></li>
<li><a href='http://search/label/fonts'>Fonts</a></li>
      </li>
</ul>
<br style='clear: left'/>
</div>

Note: You will need to replace all links in blue with that of yours, and all texts in red are texts that will be displayed in the menu bar.

6. Your done! You can also add some designs to your horizontal bar, check out the design section.