How To Create A Drop Down Menu To Blogger/Blogspot

A drop down menu is needed when you want your blog-content  to be fully organized or simply wanting to be organized in your own house.  In this tutorial, I will show you you on how to create a drop down menu in a navigation. Only a simple code  that can be fully customize to make your preferred changes. So, lets jump to process!

Live Demo

Check also How to Add Vertical Tabs in  Blogger Sidebar

How To Create a Drop Down Menu?

To add a drop down menu to your blogger blogs do the  following steps:
Step 1. Go To Blogger Dashboard >> Lay-out>> Add gadget
Step 2. Select an HTML/JavaScript Widget just under the header and paste the following code inside it,

<div id='bttnavbar'>
      <ul id='bttnav'>
        <li>
          <a href='#'>Home</a>
        </li> 
        <li>
          <a href='#'>About</a>
       </li> 
        <li>
          <a href='#'>Contact</a>
        </li> 
  <li>
           <a href='#'>Templates</a>
            <ul>
                <li><a href='#'>Hacks</a></li>
                <li><a href='#'>Downloads</a></li>
                <li><a href='#'>Advertise</a></li>
              </ul>
        </li>
      </ul> 
    </div>

Short Customization:

Replace # with your own  Page Links and the bolded text ( pink) with your relevant page names. The orange  bolded code is responsible for the drop down menu. If you want to make some drop down navigation,you can copy and paste it under any tab you want just before </li>
To add another tab, paste this code above </ul>

<li>
          <a href='#'>Name Of Your  New Tab Here</a>
        </li>

Step 3.  Click Save

Let us move to the second part of the tutorial

1.  From the Blogger Dashboard >> Go to Template >> Edit HTML
2.   Backup your template then search for  this  piece of code, ]]></b:skin> 
3.   Just above it paste the code below,

/*----- BTT Drop Down Menu ----*/

#bttnavbar {
    background:  #158aee ;
    width: 960px;
    color: #FFF;
        margin: -20px; 30px; 0px; -10px;
        padding: 0;
        position: relative;
        border-top:0px solid #960100;
        height:35px;
}

#bttnav {
    margin: 0;
    padding: 0;
}
#bttnav ul {
    float: left;
    list-style: none;
    margin: 0;
    padding: 0;
}
#bttnav li {
    list-style: none;
    margin: 0;
    padding: 0;
 border-left:1px solid #333;
 border-right:1px solid #333;
        height:35px;
}
#bttnav li a, #bttnav li a:link, #bttnav li a:visited {
    color: #FFF;
    display: block;
   font:normal 12px Helvetica, sans-serif;    margin: 0;
    padding: 9px 12px 10px 12px;
        text-decoration: none;
     
}
#bttnav li a:hover, #bttnav li a:active {
    background: green;
    color: #FFF;
    display: block;
    text-decoration: none;
        margin: 0;
    padding: 9px 12px 10px 12px;
     
 
     
}
#bttnav li {
    float: left;
    padding: 0;
}
#bttnav li ul {
    z-index: 9999;
    position: absolute;
    left: -999em;
    height: auto;
    width: 160px;
    margin: 0;
    padding: 0;
}
#bttnav li ul a {
    width: 140px;
}
#bttnav li ul ul {
    margin: -25px 0 0 161px;
}
#bttnav li:hover ul ul, #bttnav li:hover ul ul ul, #bttnav li.sfhover ul ul, #bttnav li.sfhover ul ul ul {
    left: -999em;
}
#bttnav li:hover ul, #bttnav li li:hover ul, #bttnav li li li:hover ul, #bttnav li.sfhover ul, #bttnav li li.sfhover ul, #bttnav li li li.sfhover ul {
    left: auto;
}
#bttnav li:hover, #bttnav li.sfhover {
    position: static;
}
#bttnav li li a, #bttnav li li a:link, #bttnav li li a:visited {
    background: green;
    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;
 
}
#bttnav li li a:hover, #bttnavli li a:active {

    background: orange;
    color: #FFF;
    display: block;     margin: 0;
    padding: 9px 12px 10px 12px;
        text-decoration: none;

}

Short Customization: (Optional)

• Replace  #158aee  to change the background color of your Main menu
• Replace  the red highlighted text to change font color, size and family
• Replace  green to change the background of a tab on mouse hover
• Replace  green to change the background color of the drop down menu
• Replace  orange to change the background color of drop down menu upon mouse hover
• Change the yellow highlighted text in order to change the borders of your tab names
• Select different border styles here.

4.    Save your template and you are done! Have a nice day pal!
Credits goes to My bloggertricks with some modifications by me..

About the Author:

Hello folks! This is GOLDEN WORKS TV, the admin of this blog. No words could described my grateful appreciations to all newbie and professional bloggers around the world and most especially to Almighty God who gave me the wisdom...Read More

Follow him @ Twitter |Facebook