How to Add Top Navigation Menu To Your Blog !!

 

Hi guys,

This tutorial is about how to add Horizontal or vertical menu whatever you like (but I would prefer horizontal).

Now this tutorial is written specially on a one of my blog's reader and a friend's request.

Now as you know Blogger has already introduced static pages and you dont have to do much to show those static pages and there is new gadgets which is "Pages". This gadget will directly show all the static pages you hav on your blog like a vertical or horizontal menu.

But then you wont be able to edit the links. what of you dont want to show static pages link and would like to show some labels link. In this tutorial I will help you in making a good horizontal/vertical navigation menu.

As always just follow some simple steps and always back up your template before doing so :

Steps :

• Log into your blogger account
• Go to Design > page element.

Do you see something like the image below :

Now if you See Add a Gadget just below your header then click on it and add a gadget HTML/Javascript.

And insert the code below.

<ul class="basictab">
<li class="selected"><a href="#">Home</a></li>
<li><a href="#">Blogger </a></li>
<li><a href="#">Blogger</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>

And make some changes like Change all the highlighted name like home, blogger, blogger, edit etc to the name you prefer Keep home as it is if you want. change it according to your blog.

Ok and now change all the #  to the URL you want to direct your readers to. If you want to add more menu just add this line after each menu

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

Now you know what you have to change right? 

Save it and you are done.

Here is the demo how your Navigation menu will look. Demo.

Now lets say you dont have that, Something similar to what image I have shown you above then follow this steps. And its a littl big steps so follow it carefully.

• Log in to your bloggers account
• Go to Design > Edit HTML and find this code

]]></b:skin>

And jsut before this code Add the below code

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

Save template and you are done now. Now lets go back to page element.

Wait there is still more to do.

Now Go to Page element.

Add a gadget and add html/javacript and paste in it the below code.

<ul class="basictab">
<li class="selected"><a href="#">Home</a></li>
<li><a href="#">Blogger </a></li>
<li><a href="#">Blogger</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 you already know what you have to edit right ? So do it.

Now drag this gadget either just below the header Gadget or just above the Blog posts.

Now go see this demo and you will know whats the difference between dragging the above blogpost or just below header. Whatever suites your template fine do that.

Now If you want to change the color which you definitely want to then change this particular pars of the code. the code which you pasted just before the ,

]]></b:skin>

Now customize you code :

To change the main background color.
Find

background-color: #f6ffd5; 

 and change f6ffd5 to your favorite color.
To change the selected and hover background color.
Find

background-color: #DBFF6C; 

background-color: #DBFF6C;
and change DBFF6C to your favorite color.
To change the text color
Find

color: black;

and change black to #xxxxxx and xxxxxx should be your new color code
you are done, and you have got your own customized code,
Save it and you are done.

Go here if you want color codes

Now If you still get some problem feel free to contact me through comments or through my fun "N" Chat section.

Posted in: Blogging