New Published Post: How To Fix Adsense Not Showing After Redirecting Blogger To Custom Domain
Like Us:
Facebook



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

adding drop down menu in blogger



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:
tilt  hover effect
Hello folks! This is Viral Apps, 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

No comments :

Post A Comment!

Post A Comment!
We love to hear your feedbacks and suggestions. We will try our best to reply to your queries as soon as time allows. Please keep in mind that all comments are moderated manually by our editors team to minimize spamming, and all the links are nofollow.

Note:
1. To add HTML code in the box, please use our HTML editor generator.
2. Please do not spam. Those type of comments will be deleted upon our review.
3. We should appreciate an individual and suggestive discussion.

Best Regards,

Cerwenlloyd Gefjun

Related Posts Plugin for WordPress, Blogger...