How to add a horizontal navigation bar or menu to Blogger?

We have seen a horizontal menu or a navigation bar on many websites and blogs especially the wordpress blogs.But very few Blogger blogs have a horizontal navigation bar like we have here at our blog.



Here are some simple steps for setting up a Horizontal Navigation Bar -

Step 1.-Dashboard > Layout > Edit HTML. Here find this - /* Header */

Step 2.- Add this code below that -

#menu ul li{
font-size:100%;
list-style-type: none;
display:inline;
padding:0px;
margin:10px;
border:0px solid;
}

#menu li a{
color:#dfffed;
}

#menu li a:visited {
color: #57E964;
}

#menu li a:hover {
color: #F88017;
background: #ffff66;
}

You should edit this code after step 6,so that you could know how does it looks like.

(Edit margin values for placement,and various html color values below for respective colours.)

Step 3.- Find this -

b:section class='header' id='header' maxwidgets='1' showaddelement='no'

Step 4.- Change -

1. showaddelement='no' to showaddelement='yes'
2. maxwidgets='1' to maxwidgets='4'

Save template and go to Page Elements.

Step 5.- In the Header , Add Page Element > Add HTML .

Step 6.- Leave the title Blank and add the following code in text field -

<div id='menu'>
<ul>
<li><a href="Your URL">Home</a></li>
<li><a href="Your URL">Advertise</a></li>
<li><a href="Your URL">About Me</a></li>
<li><a href="mailto:YOUR EMAIL ADDRESS">Contact</a></li>
</ul></div>

Add your desired values in above code marked red. Save it.

Now you can edit the code in Step 2.