Horizontal Navigation Menu for Professional blog in html and css

Horizontal navigation menu is essential for every blogs. By default blogger does not provide horizontal navigation bar. So you have to include the html code of navigation menu in your template. The process is very simple and requires only few minutes. Here I am providing you the step by step procedure to include a beautiful navigation menu or bar in your professional blogs. Follow these simple steps.

1. Go to your template and click "edit html".
2. Find the code ]]></b:skin>.
3. Then paste the following CSS code in your template just before the above code.

  .navbar li {     display: inline; } .navbar li a {     background: #2F4F4F;     text-align: center;     color:#ffffff;     padding:10px;     text-decoration: none;     text-transform: uppercase;     -moz-border-radius: 15px;     font:italic bold 12px/30px Georgia,serif; } .navbar li a:visited {     background: #2F4F4F;     color:#ffffff; } .navbar li a:hover,.navbar li a:active {     background: #829595;     color:#ffffff;     }

4. Now go to your layout page  and click "Add a Gadget" and select "HTML/JavaScript".
5. Paste the following html code in that window.

<ul class="navbar"> <li class="navbar"><a href="LINK1">MENU1</a></li> <li><a href="LINK2">MENU2</a></li> <li><a href="LINK3">MENU3</a></li> <li><a href="LINK4">MENU4</a></li> <li><a href="LINK5">MENU5</a></li> <li><a href="LINK6">MENU6</a></li> <li><a href="LINK7">MENU7</a></li> <li><a href="LINK8">MENU8</a></li> </ul>

6. Now click save and you can see your beautiful navigation menu in your professional blog.

How to customize the Professional Navigation Menu
It is easy to customize the professional navigation menu. You can see "link1", "Link 2" etc. in the html codes. Replace these links with the links which you need in navigation menu. MENU1, MENU 2 etc. will be displayed in the navigation menu. You have to replace this with the NAME of your links. That's all and you will find the customized menu in your blog.

For live demo visit Professional Navigation Menu Demo 

We know that these design will not suit all your blogs. Some will need different colors and some other need different shapes. We cannot make a navigation menu which is suited in all blogs. But we are happy to serve you. If you need menu with different color, shape or anything feel free to ask us. Be descriptive while telling your needs so that we can easily understand what your desire is. If anyone put this navigation menu in your blog, please provide the link of your blog below. If you have any extra needs you are welcomed to ask us.

Thanks.