How to Install a Drop Down Navbar in Blogger
- 1). Go to Blogger.com and log in to your account.
- 2). Click "Design." This takes you to your blog editing interface.
- 3). Click on the "Design" tab.
- 4). Select "Edit HTML."
- 5). Click "Download Full Template" to save a copy of your current template as backup, in case something goes wrong.
- 6). Click on the box beside "Expand Widget Templates."
- 7). Locate the "Header" segment of your blog template. You'll see this text:
<header> - 8). Copy and paste the following code beneath the header segment of your blog template. Note that if you already have a navigation bar code, you'll need to paste over it.
/* Navigation Menu
------------------------------------------------------*/
#NavbarMenu {
width: 100%;
height: 35px;
background:#cdaa7d URL(http://3.bp.blogspot.com/_zO7E0wkpor4/TUzT8qbOyvI/AAAAAAAACds/ASv7BABxWzY/s1600/white%2Bto%2Bblack.png) repeat-x top;
color: #cdaa7d
margin: 0 auto 0;
padding: 0;
font: normal 12px Arial, Tahoma, Verdana;
border-top: 1px solid #855e42;
border-bottom: 1px solid #855e42;
}
#NavbarMenuleft {
width: 1200px;
float: left;
margin: 0;
padding: 0;
}
#nav {
margin: 0;
padding: 0;
}
#nav ul {
float: left;
list-style: none;
margin: 0;
padding: 0;
}
#nav li {
list-style: none;
margin: 0;
padding: 0;
}
#nav li a, #nav li a:link, #nav li a:visited {
color: #ff0000;
display: block;
text-transform: capitalize;
margin: 0;
padding: 9px 15px 8px;
font: bold 12px Arial, Tahoma, Verdana;
}
#nav li a:hover, #nav li a:active {
background:#ffffff;
color: #8b5a00;
margin: 0;
padding: 9px 15px 8px;
text-decoration: none;
}
#nav li li a, #nav li li a:link, #nav li li a:visited {
background: #cdaa7d URL(http://3.bp.blogspot.com/_zO7E0wkpor4/TUzT8qbOyvI/AAAAAAAACds/ASv7BABxWzY/s1600/white%2Bto%2Bblack.png) repeat-x top;
width: 140px;
color: #fff;
text-transform: capitalize;
float: none;
margin: 0;
padding: 7px 10px;
border-bottom: 1px solid #855e42;
border-left: 1px solid #855e42;
border-right: 1px solid #855e42;
font: normal 12px Arial, Tahoma, Verdana;
}
#nav li li a:hover, #nav li li a:active {
background: #ffffff;
color: #8b5a00;
padding: 7px 10px;
}
#nav li {
float: left;
padding: 0;
}
#nav li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 170px;
margin: 0;
padding: 0;
}
#nav li ul a {
width: 140px;
}
#nav li ul ul {
margin: -32px 0 0 171px;
}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
left: -999em;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
left: auto;
}
#nav li:hover, #nav li.sfhover {
position: static;
} - 9). Find the following HTML code:
"/b:section - /div"
The easiest way to do this is to press "CTRL" and "F" simultaneously to open the "Find" function on your browser, then copy and paste "/b:section - /div" and click "Find." - 10
Copy and paste the following code beneath "/b:section - /div":
<div id='NavbarMenu'>
<div id='NavbarMenuleft'>
<ul id='nav'>
<li><a expr:href='data:blog.homepageUrl'>Home</a></li>
<li><a href='#'>SECTION</a>
<ul>
<li><a href='http://www.theredheadriter.com'>SECTION</a></li>
<li><a href='http://www.theredheadriter.com'>SECTION</a></li>
<li><a href='http://www.theredheadriter.com'>SECTION</a></li>
<li><a href='http://www.theredheadriter.com'>SECTION</a></li>
<li><a href='http://www.theredheadriter.com'>SECTION</a></li>
</ul>
</li>
<li><a href='#'>SECTION</a>
<ul>
<li><a href='http://www.theredheadriter.com'>SECTION</a></li>
<li><a href='http://www.theredheadriter.com'>SECTION</a></li>
<li><a href='http://www.theredheadriter.com'>SECTION</a></li>
<li><a href='http://www.theredheadriter.com'>SECTION</a></li>
<li><a href='http://www.theredheadriter.com'>SECTION</a></li>
</ul>
</li>
<li><a href='#'>SECTION</a>
<ul>
<li><a href='http://www.theredheadriter.com'>SECTION</a></li>
<li><a href='http://www.theredheadriter.com'>SECTION</a></li>
<li><a href='http://www.theredheadriter.com'>SECTION</a></li>
<li><a href='http://www.theredheadriter.com'>SECTION</a></li>
<li><a href='http://www.theredheadriter.com'>SECTION</a></li>
</ul>
</li>
<li><a href='#'>SECTION</a>
<ul>
<li><a href='http://www.theredheadriter.com'>SECTION</a></li>
<li><a href='http://www.theredheadriter.com'>SECTION</a></li>
<li><a href='http://www.theredheadriter.com'>SECTION</a></li>
<li><a href='http://www.theredheadriter.com'>SECTION</a></li>
<li><a href='http://www.theredheadriter.com'>SECTION</a></li>
</ul>
</li>
<li><a href='#'>SECTION</a>
<ul>
<li><a href='http://www.theredheadriter.com'>SECTION</a></li>
<li><a href='http://www.theredheadriter.com'>SECTION</a></li>
<li><a href='http://www.theredheadriter.com'>SECTION</a></li>
<li><a href='http://www.theredheadriter.com'>SECTION</a></li>
<li><a href='http://www.theredheadriter.com'>SECTION</a></li>
</ul>
</li>
<li><a href='#'>SECTION</a>
<ul>
<li><a href='http://www.theredheadriter.com'>SECTION</a></li>
<li><a href='http://www.theredheadriter.com'>SECTION</a></li>
<li><a href='http://www.theredheadriter.com'>SECTION</a></li>
<li><a href='http://www.theredheadriter.com'>SECTION</a></li>
<li><a href='http://www.theredheadriter.com'>SECTION</a></li>
</ul>
</li>
<li><a href='#'>SECTION</a>
<ul>
<li><a href='http://www.theredheadriter.com'>SECTION</a></li>
<li><a href='http://www.theredheadriter.com'>SECTION</a></li>
<li><a href='http://www.theredheadriter.com'>SECTION</a></li>
<li><a href='http://www.theredheadriter.com'>SECTION</a></li>
<li><a href='http://www.theredheadriter.com'>SECTION</a></li>
</ul>
</li>
</ul>
</div>
</div> <!-- end navbar --> - 11
Click "Preview" to see how it looks, then click "Save Template" if it looks good.
Source...