Free CSS Navigation Menus in Blogger.

A reader wanted to know how he could add a navigation menu bar in the header. You can add your most frequently occuring labels as tabs in the header (See header of this page) but if you want to add only four or five links like in the picture below :


here is an easy method to do so..............

CREATE POSTS

The first step is to create posts which will be linked to the various links in the menu bar. Create a post and title it 'Contact' and put in it all the information on how you can be contacted. If you want to remain anonymous you can put in an email form on the page. Publish the post and copy down it's link from the post title. Paste link in a Notepad file and save.


Create another post and title it 'Subscribe'. Put in it all your feed information and publish it. Copy down the link of the post to the same Notepad file and save. Create another post called 'Archives' and in it put all the links for your posts. Publish it and get it's link in same way.


Lastly create a 'Copyright' post and do the same. Login at Blogger.com and click 'View Profile' link on Dashboard. Your profile will open. Copy the link of the profile page from the address bar and save in the Notepad file.

GET IMAGES FOR MENU BAR

To choose the images for the navigation bar go here. They are available for commercial or private use and you can doownload them from free css navigation menus.


After this unzip the file and upload the images you want to a free host and copy their links to paste in the code in the next step.

ADD PAGE ELEMENT TO HEADER

The second step is to add a Html Page Element to the header. For this follow these steps :

1. Login at Blogger.com and click 'Layout' link on the Dashboard.

2. The Page Elements tab will open. Click Edit Html subtab of Template tab.

3. The Edit Html tab will open with the Template Code box.

4. Scroll down in the Template Code box to this code :

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

Change above code to :

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

Save Template.

5. Switch back to Page Elements tab. Click 'Add Page Element' link in the header.

6. In popup window choose Html/Javascript option.

7. Copy the code below and paste it in the contents window (leave Title blank.) :

<style type="text/css">
/*- Menu Tabs J--------------------------- */

    #tabsI {
      width:660px; 
      margin:5px 5px 0;
      background:#000;
      font-size:93%;
      line-height:normal;
      border-bottom:0px solid #24618E;
      }
    #tabsI ul {
      margin:0;
      padding:10px 10px 0 10px;
      list-style:none;
      }
    #tabsI li {
      display:inline;
      margin:0;
      padding:0;
      }
    #tabsI a {
      float:left;
      background:url("LINK_OF_tableftI.gif") no-repeat left top;
      margin:0;
      padding:0 0 0 5px;
      text-decoration:none;
      }
    #tabsI a span {
      float:left;
      display:block;
      background:url("LINK_OF_tabrightI.gif") no-repeat right top;
      padding:5px 15px 4px 6px;
      color:#24618E;
      }
    /* Commented Backslash Hack hides rule from IE5-Mac \*/
    #tabsI a span {float:none;}
    /* End IE5-Mac hack */
    #tabsI a:hover span {
      color:#FFF;
      }
    #tabsI a:hover {
      background-position:0% -42px;
      }
    #tabsI a:hover span {
      background-position:100% -42px;
      }
</style>
<div id="tabsI">
  <ul>
    <li><a href="BLOG_URL" title="Home"><span>Home</span></a></li>
    <li><a href="LINK_OF_CONTACT_POST" title="Contact"><span>Contact</span></a></li>
    <li><a href="LINK_OF_SUBSCRIBE_POST" title="Subscribe"><span>Subscribe</span></a></li>
    <li><a href="LINK_OF_COPYRIGHT_POST" title="Copyright"><span>Copyright</span></a></li>
    <li><a href="LINK_OF_PROFILE" title="About Us"><span>About Us</span></a></li>
   <li><a href="LINK_OF_ARCHIVES_POST" title="Archives"><span>Archives</span></a></li>
  </ul>
</div>

Replace the CAPS at the bottom with the links to the various posts created and paste the links to the uploaded images "LINK_OF_tableftI.gif" and "LINK_OF_tabrightI.gif". Save Page Element and you are done. View Blog. See picture below :



You can arrange it below the header by dragging it below the title on the Page Elements tab.


Enjoy!