How to Create a Simple Menu Bar in Blogger

Creating a simple horizontal menu bar for your own Blog for beginners becomes so easier nowadays. There are many tutorials on net are available, search on google for the same topic and you will find many tutorials on web for designing different menu bars.

Here i m showing you how to design a simple horizontal menu bar for your blog.

Steps: 
1. Login to your Blogspot.
2. Go to Dashboard, Layout.
3. Click on "Add a Gadget" and select HTML/JavaScript.
4. Now in Title form type Menubar and paste the HTML code below (in blue text) in the Content form.

          HTML Code:

<style type="text/css" media="screen">
#horizontalmenu ul {
padding:1; margin:1; list-style:none;
}
#horizontalmenu li {
float:left; position:relative; padding-right:30; display:block;
background:none; 
border-style:none;
}
#horizontalmenu li ul {
    display:none;
position:absolute;
}
#horizontalmenu li:hover ul{
    display:block;
    background:#eee;
height:auto; width:auto; 
}
#horizontalmenu li ul li{
    clear:both;
border-style:none;}
</style>

<div id="horizontalmenu">
 <ul> 
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Others</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>

To add more tabs just add the code

 <li><a href="#">Others</a></li> 

 before " </ul> "and renamed as you require. Also replace the "#" with the your post/page link.

5. Now click Save.
6. Adjust your Menubar gadget in the Layout by dragging where you want to show your Menubar on the page.
7. Last click on "Save Arrangement" in the Layout and see the Preview and it's all done.

Now you have Menubar on your Blog.