Drop Down Navigation Menu in Blogger Blog

drop down navigation menu in blogger blogDrop down navigation menu is particularly useful for those who have lots of different tags.Drop down navigation menu will provide a very easy to use and presentable format of displaying the topics.This one very helpful for readers.In this post we will learn about creating a drop down navigation menu in Blogger powered Blogspot blogs.There are two ways of doing this.One is by JavaScript and another one by CSS.We will discard the Javascript method as search engine spiders ignore the links in Javascripts. So Javascript method is not good for SEO.Ok..Here is how to do it in CSS.I’ve chosen Minima template to display how to do this .
Now log in to you blogger account.Click on layout and go to edit html. First of all back up your blogger template.
Now let’s proceed further.
Put the following CSS just above/before ]] .

/*******************Navigation Bar*******************/

#navbartop {
background: #E1DCCA url( );
width: 660px;
height: 35px;

font-size: 12px;
font-family: Arial, Tahoma, Verdana;
color: #FFFFFF;
font-weight: bold;
margin: 0px;
padding: 0px;
}

#nav {
margin: 0px;
padding: 0px;
}

#nav ul {
float: left;
list-style: none;
margin: 0px;
padding: 0px;
}

#nav li {
list-style: none;
margin: 0px;
padding: 0px;
}

#nav li a, #nav li a:link, #nav li a:visited {
color: #495D5C;
display: block;
font-size: 14px;
font-family: Georgia, Times New Roman;
font-weight: normal;
text-transform: uppercase;
margin: 0px;
padding: 9px 15px 8px 15px;
}

#nav li a:hover, #nav li a:active {
background: #EBE6D4 url();
color: #495D5C;

margin: 0px;
padding: 9px 15px 8px 15px;
text-decoration: none;
}

#nav li li a, #nav li li a:link, #nav li li a:visited {
background: #E1DCCA;
width: 150px;
color: #495D5C;
font-size: 12px;
font-family: Georgia, Times New Roman;
font-weight: normal;
text-transform: uppercase;
float: none;
margin: 0px;
padding: 7px 10px 7px 10px;
border-bottom: 1px solid #FFFFFF;
border-left: 1px solid #FFFFFF;
border-right: 1px solid #FFFFFF;
}

#nav li li a:hover, #nav li li a:active {
background: #85ACAC;
color: #FFFFFF;
padding: 7px 10px 7px 10px;
}

#nav li {
float: left;
padding: 0px;
}

#nav li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 170px;
margin: 0px;
padding: 0px;
}

#nav li li {
}

#nav li ul a {
width: 140px;
}

#nav li ul a:hover, #nav li ul a:active {
}

#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;
}

Now, search for .Scroll down untill you find

.
All we have to do is to put the code given below after header and before content.
Check out the screen-shot given.
drop down navigation blogger blog

Preview your template and save.

How to customize the look ??

In the CSS check out the the code in green.
You can change the background color using hex color code.Just Google hex color code and get online application to find your preferred color.

Otherwise you can put hot-link to image file in the url() to set it as background.

You can also change the length and width of the navigation bar.

The child links can be customized by changing color code of CSS in red.

You may also like...

Leave a Reply

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