Add Easy Blogger Navigation Menu on Top of Your Blog

Most of the new blogger often confused to put an eye catching menu bar on their own blog. I had received lots of email regarding this. I also have seen a huge number of articles on it, but problems is that some articles are creating confusion when the new blogger are going to do that.

Here is a very simple technique - so that you can create it easily on your blogger blog.

How?

First you have to change your blogger template

 

Go to Blogger Dashboard – Click on Edit HTML > search this syntax (code) </b:skin>
You are advised to add this lines (This is basically a CSS code) just before the code </b:skin>

.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;

}

Save your template
Step-2
Adding Menu to Template
From the Blogger Dashboard click on Page Elements
Add a new Gadget (choose from the above top most) Just after the Title
Click on HTML/JavaScript
Keep Title Blank
Add the this code in text box area

<ul class="basictab">

<li class="selected"><a href="#">My Content</a></li>

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

<li><a href="#">About Me</a></li>

<li><a href="#">My Vision</a></li>

<li><a href="#">My Favorites Sites</a></li>

</ul>

Click on Save and view your blog

Step-3
Customizing Menu
Instead of “#” put your Links and Titles.
I hope, this article will help you to customize you own blogger blog.