How To Make Menu Bar In Blogger

Ok we are going to learn How to make menu bar in blogger, but before that, do you know what the menu bar is right? not yet huh? Well, that's okay, I'll explain. Menu bar is a tab/bar that the contents of the navigation links. Menu bar function is to store important links on a blog, so that visitors, easier to visit the main pages that exist on a blog. To see how a screenshot of the bar menu, see below:

The menu bar can also be made again to the submenu below it. Well, for example you want to set up a submenu of the link, simply add a bit of html code, if you want to know how to make menu bar in blogger with submenu bar, see here. Already know how menu bar on the blog look like? Good :) , how to make menu bar in blogger is not difficult.
1. Login on blogger
2. Go to Template
3. Edit HTML
4. Find the code  ]]></b: skin>  (use ctrl + f)
5. Put the following code above the html code  ]]></b: skin>

#menubar{

width:900px;height:32px;background:#de360f;margin: 0 auto;}#menubar ul{float:left;margin:0;padding:0;}#menubar li{float:left;list-style:none;margin:0;padding:0;}#menubar li a, #menubar li a:link{border-right:1px solid #F0512D;float:left;padding:8px 12px;color:#fff;text-decoration:none;font-size:13px;font-weight:bold;}#menubar li a:hover, #menubar li a:active, #menubar .current_page_item a  {color:#ffa500;text-decoration:underline;}#menubar li li a, #menubar li li a:link, #menubar li li a:visited{font-size: 12px;background: #de360f;color: #fff;text-decoration:none;width: 150px;padding: 0px 10px;line-height:30px;}#menubar li li a:hover, #menubar li li a:active {background: #F0512D;color: #ffa500;}#menubar li ul{z-index:9999;position:absolute;left:-999em;height:auto;width:170px;margin-top:32px;border:1px solid ##F0512D;}#menubar li:hover ul, #menubar li li:hover ul, #menubar li li li:hover ul, #menubar li.sfhover ul, #menubar li li.sfhover ul, #menubar li li li.sfhover ul{left:auto}#menubar li:hover, #menubar li.sfhover{position:static}

6. Next, Find the html code  <div id="content-wrapper">
7. Put the following html code above bold code on No. 6.
8. Exceptions if there is no code similar to No. 6, you can put in other div element id. Usually there is a blog template html code like <div id = 'header .... So, you can put it under a code similar to the <div id = "header ...

<div id='menubar'><ul><li><a expr:href='data:blog.homepageUrl'>Home</a></li>
<li><a href='URL'>Menu name</a></li>
<li><a href='URL'>Menu name</a></li></ul></div>

9. Save the template. And see preview.

Note:

• Replace the words are colored red with a URL link desired for menu bar, for example: post links, link categories or other links 
• Replace the words colored blue (Menu name) by writing the title bar menu, such as: About, Contact, Download or other.
• To change the length of the menu bar you can change the writing 900px into whatever you like.

Suppose <div id="content-wrapper"> or the like does not really exist. You can put it in the header area code. The way you can click the widget and clicking Jump to header1 widget. The example in the picture below :

Put the html code menu bar located in Step 8, below the widget code in the header of your blog. Can below
 </b:section> or under the code </div> in the image.

How is it? Easy to do right?. Remember, the key to success in how make menu bar in blogger is precision in editing and installing html code. Suppose there are less or a little mistake, the menu bar will be fail or not installed. So, you should be more careful, good luck ;)