Make a simple but good looking Site Menubar at the header of your Blog

Menubar will always play a vital role for your blog. Be it site navigation, or categories, or contact users will always have an ease to navigate through your blog easily from your header menu bar! Like I have added a image based Menubar at my greenTechspot! But by default blogger does not supports any Menu-bar! So we need to make them at our own. It not that difficult! Just follow the instructions given below.

1. Firstly download this small little zip file from dynamicdrive and upload the dropdown.js file inside it to some free hosting site like www.freehostia.com or www.bravenet.com and so. You need to know the address of that file like http://www.YOURNAME.YOURHOST.com/YOURFOLDER/dropdown.js
2. Goto your blogger Layout > Edit HTML and search for:
   

   <div id=’header-wrapper’>
   <b:section class=’header’ id=’header’ maxwidgets=’1′ showaddelement=’no’>

3. Now change the maxwidgets=’1′ showaddelement=’no’ to maxwidgets=’3′ showaddelement=’yes’ so that it ulmitaley looks like this:
   

   <div id=’header-wrapper’>
   <b:section class=’header’ id=’header’ maxwidgets=’3′ showaddelement=’yes’>

4. Now you will have an addition of 2 widget space for the header section. [By default it is 1]
5. Now scroll down a little bit to search for:
   

   ]]></b:skin>

   and ABOVE THAT that add the following codes So that it may ultimately look like this:

   /*Header menu bar! Created by Swashata
   ———————————————————–*/
   #newnavbar {
   width: 92%;
   height: 60px;
   background: #000000 none repeat scroll 0 0;
   }

   #newnavbar ul {
   float: left;
   background: #000000 none repeat scroll 0 0;
   border-top: none;
   border-right: none;
   border-left: none;
   border-bottom: none;
   list-style-image: none;
   list-style-type: none;
   margin: 0;
   padding: 0;
   }

   #newnavbar li{
   float: left;
   background: #000000;
   font-size: 17px;
   font-family: Tahoma;
   border-right: groove #898900;
   }

   #newnavbar li a{
   font-size: 17px;
   color: #FFFFFF;
   text-decoration: none;
   float: left;
   display: inline;
   height: 28px;
   padding: 3px 5px 0 5px;
   margin: 0 5px;
   line-height: 24px;
   text-decoration: none;
   }

   #newnavbar li a:visited {
   font-size: 17px;
   color: #FFFFFF;
   }

   #newnavbar li a:hover {
   color: #000000;
   background: #FFFFFF;
   text-decoration: none;
   font-size: 17px;
   -webkit-border-radius: 0.1em; /* for Safari */
   -moz-border-radius: 0.1em; /* for Firefox */

   }

   #menu_child {
   border: 1px groove #868687;
   background: #000000 none repeat scroll 0% 50%;
   width: 200px;
   margin-top: 33px;
   margin-left: -110px;
   }

   #menu_child a{
   font-size: 13px;
   color: #FFFFFF;
   text-decoration: none;
   float: left;
   display: inline;
   padding: 3px 5px 0 5px;
   margin: 0 5px;
   text-decoration: none;
   height: 21px;
   line-height: 18px;
   display: block;
   }

   #menu_child a:hover{
   color: #000000;
   background: #FFFFFF;
   text-decoration: none;
   font-size: 13px;
   -webkit-border-radius: 0.1em; /* for Safari */
   -moz-border-radius: 0.1em; /* for Firefox */
   }

   /*End of header menu
   —————————————-*/
   ]]></b:skin>

6. Now save your Template and goto Page Elements and Click on Add gadget and then select the “HTML/Javascript. (You can play with the colour codes)
7. Now simply add this code on the Gadget:
   

   <script src=”http://www.YOURNAME.YOURHOST.com/YOURFOLDER/dropdown.js” type=”text/javascript”></script>
   <hr style=”width:100%; “>#898900;”/><div id=”newnavbar”><ul><li><a href=”HOME URL“>Home</a></li><li><a href=” URL of your About page“>About</a></li><li><span id=”menu_parent”><a href=”#”>Categories</a>
   </span>
   </li></ul>
   </div>
   <span id=”menu_child”>
   <a href=”CATEGORY URL“>LABEL NAME</a><br/>
   <a href=”CATEGORY URL“>LABEL NAME</a><br/>
   <a href=”CATEGORY URL“>LABEL NAME</a><br/>
   <a href=”CATEGORY URL“>LABEL NAME</a><br/>
   </span>
   <script type=”text/javascript”>
   at_attach(“menu_parent”, “menu_child”, “hover”, “y”, “pointer”);
   </script>

8. DO change the bolded Orange coloured code to give your label URL and Label name or whatever you want
9. Click on save and then see your Blog

Remember to change the orange coloured options manually and also tweak your color and style according to your need

TIP: Want to add other sections rather than Home and About! Obviously you can do that! Here is what you need to do:

• Copy
  

  <li><a href=”URL of What you want”>Your custom label</a></li>

  Before

  <li><span id=”menu_parent”><a href=”#”>Categories

  So that it ultimately looks like

  …<li><a href=”URL of What you want”>Your custom label</a></li><li><span id=”menu_parent”><a href=”#”>Categories…

  Or even

  …<li><a href=”URL of What you want1″>Your custom label1</a></li><li><li><a href=”URL of What you want2″>Your custom label2</a></li><li><span id=”menu_parent”><a href=”#”>Categories…

Remember that there is no end of customization and addition of your own unique categories You can also apply custom HEX colour codes which you can generate from here

Update:
With a little of my imagination, patience and “Trial & Error” I made this Toolbar for my Team Blog Blakut
If I can do it then you can also do it with some of your creativity and patience

RATE IT: (1) Sucks (2) Stupid (3) Kewl (4) Rad (5) Wicked