Add Custom Drop Down Menu To Templates

SHARE:

With the introduction of Blogger Template Designer, template editing has become more difficult for newbies due to excessive use of dynamic coding. The Famous templates are designed by Josh Peterson which includes the watermark and Picture Window template.

I introduced a drop down menu  in my earlier post and some of you had problems adding it to the new blogger templates. The code didn't work with the new templates because the CSS code I used was override by Josh's code. To solve this problem we will need to deactivate Josh's coding from your
template. We can do that in easy steps as discussed below.

Live Demo

Add Drop Down Menu To New Blogger Templates

1. Go To Blogger > Design > Edit HTML
2. Backup your template and search for a similar code like this one,

/* Tabs
-----------------------------------------------
.tabs-inner .widget ul {
  padding: 0;
display:none;
  background: $(tabs.background.color) $(tabs.background.gradient) repeat scroll bottom;
  -moz-border-radius: $(tabs.border.radius);
  -webkit-border-radius: $(tabs.border.radius);
  -goog-ms-border-radius: $(tabs.border.radius);
  border-radius: $(tabs.border.radius);
}
.tabs-inner .widget li {
  border: none;
display:none;}
.tabs-inner .widget li a {
  display: inline-block;
  padding: .5em 1em;
  margin-$endSide: $(tabs.spacing);
  color: $(tabs.text.color);
  font: $(tabs.font);
display:none;
  -moz-border-radius: $(tab.border.radius) $(tab.border.radius) 0 0;
  -webkit-border-top-left-radius: $(tab.border.radius);
  -webkit-border-top-right-radius: $(tab.border.radius);
  -goog-ms-border-radius: $(tab.border.radius) $(tab.border.radius) 0 0;
  border-radius: $(tab.border.radius) $(tab.border.radius) 0 0;  border-$endSide: 1px solid $(tabs.separator.color);
}
.tabs-inner .widget li:first-child a {
  padding-$startSide: 1.25em;
display:none;
  -moz-border-radius-top$startSide: $(tab.first.border.radius);
  -moz-border-radius-bottom$startSide: $(tabs.border.radius);
  -webkit-border-top-$startSide-radius: $(tab.first.border.radius);
  -webkit-border-bottom-$startSide-radius: $(tabs.border.radius);
  -goog-ms-border-top-$startSide-radius: $(tab.first.border.radius);
  -goog-ms-border-bottom-$startSide-radius: $(tabs.border.radius);
  border-top-$startSide-radius: $(tab.first.border.radius);
  border-bottom-$startSide-radius: $(tabs.border.radius);
}
.tabs-inner .widget li.selected a,
.tabs-inner .widget li a:hover {
  position: relative;
  z-index: 1;

  background: $(tabs.selected.background.color) $(tab.selected.background.gradient) repeat scroll bottom;
  color: $(tabs.selected.text.color);
display:none;
  -moz-box-shadow: 0 0 $(region.shadow.spread) rgba(0, 0, 0, .15);
  -webkit-box-shadow: 0 0 $(region.shadow.spread) rgba(0, 0, 0, .15);
  -goog-ms-box-shadow: 0 0 $(region.shadow.spread) rgba(0, 0, 0, .15);
  box-shadow: 0 0 $(region.shadow.spread) rgba(0, 0, 0, .15);
}

You just need to remove the comment quote from the top i.e.
*/ and add it to the bottom as shown below:

/* Tabs
-----------------------------------------------

.tabs-inner .widget ul {
  padding: 0;
display:none;
  background: $(tabs.background.color) $(tabs.background.gradient) repeat scroll bottom;

  -moz-border-radius: $(tabs.border.radius);
  -webkit-border-radius: $(tabs.border.radius);
  -goog-ms-border-radius: $(tabs.border.radius);
  border-radius: $(tabs.border.radius);
}

.tabs-inner .widget li {
  border: none;
display:none;}

.tabs-inner .widget li a {
  display: inline-block;

  padding: .5em 1em;
  margin-$endSide: $(tabs.spacing);

  color: $(tabs.text.color);
  font: $(tabs.font);
display:none;
  -moz-border-radius: $(tab.border.radius) $(tab.border.radius) 0 0;
  -webkit-border-top-left-radius: $(tab.border.radius);
  -webkit-border-top-right-radius: $(tab.border.radius);
  -goog-ms-border-radius: $(tab.border.radius) $(tab.border.radius) 0 0;
  border-radius: $(tab.border.radius) $(tab.border.radius) 0 0;

  background: $(tab.background);

  border-$endSide: 1px solid $(tabs.separator.color);
}

.tabs-inner .widget li:first-child a {
  padding-$startSide: 1.25em;
display:none;
  -moz-border-radius-top$startSide: $(tab.first.border.radius);
  -moz-border-radius-bottom$startSide: $(tabs.border.radius);
  -webkit-border-top-$startSide-radius: $(tab.first.border.radius);
  -webkit-border-bottom-$startSide-radius: $(tabs.border.radius);
  -goog-ms-border-top-$startSide-radius: $(tab.first.border.radius);
  -goog-ms-border-bottom-$startSide-radius: $(tabs.border.radius);
  border-top-$startSide-radius: $(tab.first.border.radius);
  border-bottom-$startSide-radius: $(tabs.border.radius);
}

.tabs-inner .widget li.selected a,
.tabs-inner .widget li a:hover {
  position: relative;
  z-index: 1;

  background: $(tabs.selected.background.color) $(tab.selected.background.gradient) repeat scroll bottom;
  color: $(tabs.selected.text.color);
display:none;
  -moz-box-shadow: 0 0 $(region.shadow.spread) rgba(0, 0, 0, .15);
  -webkit-box-shadow: 0 0 $(region.shadow.spread) rgba(0, 0, 0, .15);
  -goog-ms-box-shadow: 0 0 $(region.shadow.spread) rgba(0, 0, 0, .15);
  box-shadow: 0 0 $(region.shadow.spread) rgba(0, 0, 0, .15);
}

*/ 

3. Save your template and you are done! You can reactivate the above coding anytime you want by reversing the step.
Now add your drop down menu happily by reading this tutorial -> Drop Down Menu
The only thing you need to do extra is to use the CSS code below instead of the one I shared in the earlier tutorial. Rest all steps are exactly the same.

/*----- MMK Drop Down Menu ----*/

#mmknavbar {
    background: #060505;
    width: 100%;
    color: #FFF;
        margin: 10px 0;
        padding: 0;
        position: relative;
        border-top:0px solid #960100;
        height:35px;

}

#mmknav {
    margin: 0;
    padding: 0;
}
#mmknav ul {
    float: left;
    list-style: none;
    margin: 0;
    padding: 0;
}
#mmknav li {
    list-style: none;
    margin: 0;
    padding: 0;
        border-left:1px solid #333;
        border-right:1px solid #333;
        height:34px;
}
#mmknav li a, #mmknav li a:link, #mmknav li a:visited {
    color: #FFF;
    display: block;
   font:normal 12px Helvetica, sans-serif;
   margin: 0;
    padding: 9px 12px 10px 12px;
        text-decoration: none;
      

}
#mmknav li a:hover, #mmknav li a:active {
    background: #BF0100;
    color: #FFF;
    display: block;
    text-decoration: none;
        margin: 0;
    padding: 9px 12px 10px 12px;



}

#mmknav li {
    float: left;
    padding: 0;
}
#mmknav li ul {
    z-index: 9999;
    position: absolute;
    left: -999em;
    height: auto;
    width: 160px;
    margin: 0;
    padding: 0;
}
#mmknav li ul a {
    width: 140px;
}
#mmknav li ul ul {
    margin: -25px 0 0 161px;
}
#mmknav li:hover ul ul, #mmknav li:hover ul ul ul, #mmknav li.sfhover ul ul, #mmknav li.sfhover ul ul ul {
    left: -999em;
}
#mmknav li:hover ul, #mmknav li li:hover ul, #mmknav li li li:hover ul, #mmknav li.sfhover ul, #mmknav li li.sfhover ul, #mmknav li li li.sfhover ul {
    left: auto;
}
#mmknav li:hover, #mmknav li.sfhover {
    position: static;
}

#mmknav li li a, #mmknav li li a:link, #mmknav 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;

}
#mmknav li li a:hover, #mmknavli li a:active {
    background: #060505;
    color: #FFF;
    display: block;
    margin: 0;
    padding: 9px 12px 10px 12px;
        text-decoration: none;
} 

If you needed any further help feel free to ask. Peace out.