Add Navigation Menus Below or Above Header

(This post was written when I was still using this template. http://btemplates.com/2008/blogger-template-inspiration/demo/ ) However if you found this post useful you are free to copy or use it.

Realizing the template I am using for this blog doesn’t provide navigation menus, but I wanted to put some simple clickable texts with hyperlinks on the header area.  I felt I was so challenged to play around and start to look for tutorial about how to add navigation menus.

Just  found the solution on  this blog http://chocolateonmycranium.blogspot.com/2009/05/creating-header-navigation-menu-links.html   and it worked as you can see the screenshot of my blog header below.

Especially you whose template didn’t come along with nav menus you can give it a try the tutorial steps as explained in the the summary  below.

Step 1.

From the blogger dashboard, go  to  Template section and findthis code :
 

 <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

In my case I changed the value  '1'  to ‘3’ … (or you can put any number you desire). 

Then change the  ‘no’    to be    ‘yes’.  Mine as seen below.

 <b:section class='header' id='header' maxwidgets='3' showaddelement='yes'>

Next, click  Save Template to end the Step 1.

Check the layout section and you should see the result of the Step 1. as seen on below screenshot.

Step 2.

Back  to Template Editor again and look for these tags;

 /* Header
-----------------------------------------------
*/

 If you can’t find the  codes exactly as told and shown above. You can try to  to get to the tags in the header area. Just find the       */    code.  Copy and paste the below code right under  */

 #newnavbar ul li{
font-size:100%;
list-style-type: none;
display:inline;
padding:0px;
margin:10px;
border:0px solid;

 (For customizing the look of the menus like font size, padding, color, display, border, style etc …  you can change or modify the values. Or if you already know other codes you can put some as desired … J)

Save template..

See the following screenshot once I have modified the codes:

  Step 3.

Go back to  Layout again. Added a new Gadget  with  html/JavaScript  code for  menus links.

 Examples below taken from my blog.

 <div id='newnavbar'>
<ul><li><a href="http://mysimpleblognote.blogspot.com/">Home</a></li><li><a href="http://mysimpleblognote.blogspot.com/p/about-me.html">About Me</a></li><li><a href="http://mysimpleblognote.blogspot.com/p/my-business.html">My Business</a></li></ul></div>

(Change the blue color to your own blog url links).

Last, Save your template. Now you have added nav menus on your blog.