How to add horizontal navigation bar to a blogger blog

Navigation bars are easier way of navigating through any website, in fact i cant imagine any website without a navigation bar. I have been to many forums and groups and have seen so many folks ask about they can add navigation bars to their blogspot blogs. So I am writing this for such folks. To add a navigation bar to a blogspot, the simple trick is to tweak the template by adding a css code and then create your links. So I am going to teach you the simple method to add a navigation menu to your blogger template today. Before we start remember to make a backup copy of your template.

Steps to add horizontal navigation bar to a blogger blog:

First is to add Css to your template: Go to Blogger dashboard, then Layout, then choose Edit HTML, use CTRL+F to find </b:skin>.

Next add the following code just before the </b:skin> tag.


/*URL: http://www.netmediablog.com/ */

.basictab{

padding: 3px 0;

margin-left: 0;

font: bold 12px Verdana;

border-bottom: 1px solid gray;

list-style-type: none;

text-align: left; /*set to left, center, or right to align the menu as desired*/

}

.basictab li{

display: inline;

margin: 0;

}

.basictab li a{

text-decoration: none;

padding: 3px 7px;

margin-right: 3px;

border: 1px solid gray;

border-bottom: none;

background-color: #f6ffd5;

color: #2d2b2b;

}

.basictab li a:visited{

color: #2d2b2b;

}

.basictab li a:hover{

background-color: #DBFF6C;

color: black;

}

.basictab li a:active{

color: black;

}

.basictab li.selected a{ /*selected tab effect*/

position: relative;

top: 1px;

padding-top: 4px;

background-color: #DBFF6C;

color: black;

}

 

After adding that code save you template.  Next will be to add the menu to our template. Go to Blogger dashboard, then to layout, choose page element above the post area and click add gadget, choose Add HTML/Javascript, leave the title empty and add the following code  to the content area.


<div id='topnav'>

<ul>

<li><a href='/'>Home</a></li>

<li><a href='#'>Contact</a></li>

<li><a href='#'>Link 3</a></li>

<li><a href='#'>Link 4</a></li>

</ul>

</div>

 

Edit the code by replacing the ‘#’ tag with your url’s .Then save your template and preview your blog on a browser remember to also Subscribe to NetMediaBlog Feeds by Email