How to Create Dropdown Menu in Blogger

Spread the love

If you want to make your site navigation easier than a Drop Down menu can help you in many ways. A drop down menu is a horizontal bar with some options. Those options include some more options in Menu. Your blog visitor can easily find the post that he wants. Your Blog visitor can browse those blogs from their favorite category. They can see those category list at the starting of your blog page if you include those in your drop down menu. They will also get a home, about and contact us options in Drop Down menu. So, your visitor can go at your blog homepage by one click. They can also get information about your blog and contact you by this Drop Down menu.

But there is no Automated option to add a Drop Down menu in Blogger. So you have to add it to your blogger blog site manually. Don’t worry don’t need to run after script to make a workable Drop Down menu for your blog/Blog Spot. We will show you how to add a Drop Down menu in your Blog. In this tutorial we will explain this process in easy way. Just follow those steps:

Create Dropdown Menu in Blogger

Step 1. At first go to Layout >> Add Gadget from Blogger Dashboard.

Note: We recommend you to add this Gadget at Cross-Column section.

How to Create Dropdown Menu in Blogger

Step 2.  After that a window will pop-up with some options. Select HTML/JavaScript from those options in the pop-up menu.

How to Create Drop down Menu in Blogger

Step 3. Now you will get window with 2 empty box named Title and Content. Just Copy and paste the code in the Content box. You don’t need to fill the Title box.

How to Create Drop down Menu in Blogger

The code has given here:

[wpsm_codebox style=”1″]

<div id=’mbtnavbar’>
<ul id=’mbtnav’>
<li>
<a href=’#‘>Home</a>
</li>
<li>
<a href=’#‘>About</a>
</li>
<li>
<a href=’#‘>Contact</a>
</li>
<li>
<a href=’#‘>Sitemap</a>
<ul>
<li><a href=’#‘>Sub Page #1</a></li>
<li><a href=’#‘>Sub Page #2</a></li>
<li><a href=’#‘>Sub Page #3</a></li>
</ul>
</li>
      </ul>
</div>[/wpsm_codebox]

Note: Replace the # with your page links. The bolder  text with red color represent the options name of Drop Down menu and those bolder green texts represent the  component of sub menu.   Replace the Sitemap with your name  or category.

If you want to add more tab in Drop Down menu than  at fist copy and paste this code just below <li>

The code have been given here:

[wpsm_codebox style=”1″]<a href=’#‘>Sitemap</a> [/wpsm_codebox]

Example:

[wpsm_codebox style=”1″] <li>

<a href=’#‘>Sitemap</a> [/wpsm_codebox]

IF you want to add Drop Down menu list(Sub pages) under any Tab in Drop Down menu than just copy and paste the highlighted code with yellow color under any Tab title code. Just like this:

  [wpsm_codebox style=”1″]<li>
           <a href=’#‘>Sitemap</a>
<ul>
<li><a href=’#‘>Sub Page #1</a></li>
<li><a href=’#‘>Sub Page #2</a></li>
<li><a href=’#‘>Sub Page #3</a></li>
</ul> [/wpsm_codebox]

the code with green color is the title code of menu.

Step 4.  After adding a Gadget in your Blogger Blog Spot now go to Template  >> Edit HTML from Blogger Dashboard.
How to Create Drop down Menu in Blogger

Step 5. Then you will see a HTML Editor. Simply click any ware in the HTML Editor box and press CTRL + F to get the search box inside the HTML Editor box. You will see a search box at the top right side of HTML Editor Box

How to Create Drop down Menu in Blogger

Step 6. Now Type or copy and paste this tag inside the search box. Then press Enter to find the tag inside HTML Editor box.

The tag has given here:

[wpsm_codebox style=”1″]]]></b:skin>[/wpsm_codebox]

Step 7. IF you have found this tag inside the HTML box, then just copy and the this code above/before the tag.

The code has given here:

[wpsm_codebox style=”1″]/*—– MBT Drop Down Menu —-*/
#mbtnavbar {
background: #060505;
width: 960px;
color: #FFF;
margin: 0px;
padding: 0;
position: relative;
border-top:0px solid #960100;
height:35px;
}
#mbtnav {
margin: 0;
padding: 0;
}
#mbtnav ul {
float: left;
list-style: none;
margin: 0;
padding: 0;
}
#mbtnav li {
list-style: none;
margin: 0;
padding: 0;
border-left:1px solid #333;
border-right:1px solid #333;
height:35px;
}
#mbtnav li a, #mbtnav li a:link, #mbtnav li a:visited {
color: #FFF;
display: block;
font:normal 12px Helvetica, sans-serif;    margin: 0;
padding: 9px 12px 10px 12px;
text-decoration: none;
}
#mbtnav li a:hover, #mbtnav li a:active {
background: #BF0100;
color: #FFF;
display: block;
text-decoration: none;
margin: 0;
padding: 9px 12px 10px 12px;
}
#mbtnav li {
float: left;
padding: 0;
}
#mbtnav li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 160px;
margin: 0;
padding: 0;
}
#mbtnav li ul a {
width: 140px;
}
#mbtnav li ul ul {
margin: -25px 0 0 161px;
}
#mbtnav li:hover ul ul, #mbtnav li:hover ul ul ul, #mbtnav li.sfhover ul ul, #mbtnav li.sfhover ul ul ul {
left: -999em;
}
#mbtnav li:hover ul, #mbtnav li li:hover ul, #mbtnav li li li:hover ul, #mbtnav li.sfhover ul, #mbtnav li li.sfhover ul, #mbtnav li li li.sfhover ul {
left: auto;
}
#mbtnav li:hover, #mbtnav li.sfhover {
position: static;
}
#mbtnav li li a, #mbtnav li li a:link, #mbtnav 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;
}
#mbtnav li li a:hover, #mbtnavli li a:active {
background: #060505;
color: #FFF;
display: block;     margin: 0;
padding: 9px 12px 10px 12px;
text-decoration: none;
} [/wpsm_codebox]

Note:  You can customize some options of Drop Down menu by following those instruction:

  • If you want to change the background color of main menu that just change this color hex code #060505 with your favorite color hex color code.
  • To customize the front of Drop Down menu just change the orange colored text.
  • To Change the font color of font, replace this #FFF   with your color hex code.  To change the size of font just increase or decrease the value of 12px
  • Change         #BF0100    with your color code to change the background color of tabs on muse hover.
  • To change the color of Drop Down menu just change #BF0100 .
  • Change #060505  with your color code to change the color of drop down menu on muse hover.

Step 8. Now just save the template by clicking “Save template”.

Now you will get a Drop Down menu  under your blog heading and it will help your visitor to navigate your site easily.

If you need any help please comment here or contact us and send your questions and problems.

bnewtech Editorial Staff

Editorial Staff at Bnewtech is a team of reviews and tutorial writing experts led by BTS. Page maintained by BTS.


Spread the love

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.