Simple Drop Down Menus In Blogger Blog

The menu tabs / drop down menus are mostly clicked when visitors arrived in our blog for the first time. This is because the menu tabs can explain visitors more of the site contents.

For me i like the simple menu tabs that can show visitors the point of my contents. 

  
To create this drop down menu tabs, You need to add a HTML widget and insert some HTML codes through the template's HTML editor :

Add HTML widget

• Log in to Blogger.
• Go to Dashboard > Layout.
• Click on "Add a Gadget".
• Select HTML/Java Script widget.
• Paste the following codes into the widget box :  

Home

 

About
 
 

 

Contact
 
 

 

Sitemap
 

 

Name of sub page 1
 

Name of sub page 2http://www.blogger.com/blogger.g?blogID=1249722152444307586#editor/target=post;postID=2058096017693136811
 

Name of sub page 3
  
 
  

• Replace the RED TEXT with main links and names of your pages (i.e for Home, About, Contact, etc). 

• To add a Main Menu, Please add this code after the GREEN TEXT : 
• Name of MAIN MENU
 and before LINK OF SITEMAP PAGE.

• To add a Sub-Menu, Please add this code after the 
   
  in PINK TEXT : 
• Name of SUB-MENU
 and before the first 

 also in PINK TEXT.

• Save your widget above or below the header in layout.

Insert HTML codes through the template's HTML editor

• Go to Dashboard > Template.
• Click Edit HTML > Proceed. 
•  Expand Widgets templates.
• Use Ctrl + F to search for this code ]]>

.

Paste the following codes BEFORE ]]>

 : 

     /*----- infozguide Drop Down Menu ----*/
    #infozguidenavbar {     background: #060505;     width: 960px;     color: #FFF;         margin: 0px;         padding: 0;         position: relative;         border-top:0px solid #960100;         height:35px;}
    #infozguidenav {     margin: 0;     padding: 0; } #infozguidenav ul {     float: left;     list-style: none;     margin: 0;     padding: 0; } #infozguidenav li {     list-style: none;     margin: 0;     padding: 0;         border-left:1px solid #333;         border-right:1px solid #333;         height:35px; } #infozguidenav li a, #infozguidenav li a:link, #infozguidenav li a:visited {     color: #FFF;     display: block;    font:normal 12px Helvetica, sans-serif;    margin: 0;     padding: 9px 12px 10px 12px;         text-decoration: none;         } #infozguidenav li a:hover, #infozguidenav li a:active {     background: #BF0100;     color: #FFF;     display: block;     text-decoration: none;         margin: 0;     padding: 9px 12px 10px 12px;                     }#infozguidenav li {     float: left;     padding: 0; } #infozguidenav li ul {     z-index: 9999;     position: absolute;     left: -999em;     height: auto;     width: 160px;     margin: 0;     padding: 0; } #infozguidenav li ul a {     width: 140px; } #infozguidenav li ul ul {     margin: -25px 0 0 161px; } #infozguidenav li:hover ul ul, #infozguidenav li:hover ul ul ul, #infozguidenav li.sfhover ul ul, #infozguidenav li.sfhover ul ul ul {     left: -999em; } #infozguidenav li:hover ul, #infozguidenav li li:hover ul, #infozguidenav li li li:hover ul, #infozguidenav li.sfhover ul, #infozguidenav li li.sfhover ul, #infozguidenav li li li.sfhover ul {     left: auto; } #infozguidenav li:hover, #infozguidenav li.sfhover {     position: static; }#infozguidenav li li a, #infozguidenav li li a:link, #infozguidenav li li a:visited {     background: #BF0100;     width: 120px;     color: #FFF;     display: block;     font:normal 12px Helvetica, sans-serif;     margin: 0;     padding: 9px 12px 10px 12px;         text-decoration: none; z-index:9999; border-bottom:1px dotted #333;    } #infozguidenav li li a:hover, #infozguidenavli li a:active {     background: #060505;     color: #FFF;     display: block;     margin: 0;     padding: 9px 12px 10px 12px;         text-decoration: none; } 

• Save your template.