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. image
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.
Add Drop Down Menu To New Blogger Templates
Go To Blogger > Design > Edit HTML
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;
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);
}
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.
/*----- MBT Drop Down Menu ----*/
#mbtnavbar {
background: #060505;
width: 100%;
color: #FFF;
margin: 10px 0;
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:34px;
}
#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;
}
6 March 2012 at 00:57
Is there a limitation to 4 tabs in the code.
Mine is showing only 4 tabs, the other 3 I want to add are displayed like code lines under the main menu.
thank you for your time
7 March 2012 at 01:28
Moving the */ made: 1) the menu appear as all white (background and text) with black lines separating the menu items and 2) did not make the menu span the entire width of my header. When I hovered over where I thought a menu items would be, it did give me the drop down menu and I could see the drop down menu options.
It seems in my case that the simple template doesn't like having the */ moved.
Thanks for your help. Do you have any other suggestions?
7 March 2012 at 07:04
Thank you so much for this post. Your code solved a problem I had been trying to figure out for hours! Just one issue: the drop-down menu works perfectly in Firefox, Chrome and Safari, but for some reason does not work in IE (IE8, which is what I and most of my readers use). When I hover over the tab, the menu drops down, but it is partially behind the rest of the text on the page and I can't select any of the links. Any idea how to fix this in IE?
24 February 2013 at 08:32
Howdy! This is kind of off topic but I need some help from
an established blog. Is it very hard to set up your own blog?
I'm not very techincal but I can figure things out pretty fast. I'm thinking about setting up my own
but I'm not sure where to begin. Do you have any tips or suggestions? Thank you
Here is my weblog; work from home jobs uk