How To Add Top Navigation Menu (Bar) To Blogger

Today i'm going to show you how to add top navigation menu to blogger

1. Add Css To You Template

First go to your Blogger Dashboard, Layout >> Edit HTML >> And find This code

]]></b:skin> or </b:sking>

and before it add next code:

/*URL: http://www.internetsolutionsblog.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;
}

That's it, and now let's add the menu it self to your template.

2. Add The Menu To our Template.

It's so easy to do guys just follow me

first go to your blogger dashboard, layout -----> page Elements >>

and now above blog posts area, click add gadget. 

 

And then choose add HTML/JavaScript

Leave the title empty and at the content area add this code given below

<ul class="basictab">
<li class="selected"><a href="http://www.AllBlogTools.com.com">Home</a></li>
<li><a href="http://www.allblogtools.com/blogger-templates/">Blogger Templates</a></li>
<li><a href="http://www.allblogtools.com/blogger-tricks-and-hacks/">Blogegr Tricks</a></li>
<li><a href="#">Edit</a></li>
<li><a href="#">Edit</a></li>
<li><a href="#">Edit</a></li>
<li><a href="#">Edit</a></li>
</ul>

Now save and check you blog. That's it