Drop down menu is something that is very important in a blog, especially when the number of posts reaches in three figures. When total number of post crosses over 100 then it will became difficult for the readers to reach your older posts. They don't waste time in looking for older and older posts. This will decrease your page views and also increases your blog's bounce rate.
It is the duty of every blogger to make the content of a blog, easily reachable. The content should be categorized beautifully using labels and drop down menus. You can easily add labels while writing the post in blogger but, to create a drop down menu you have to make certain changes in your template.
In this post, I will show you how you can add a beautiful drop down in your blog and make your blog more clean and more professional. Follow the steps given below.
It is the duty of every blogger to make the content of a blog, easily reachable. The content should be categorized beautifully using labels and drop down menus. You can easily add labels while writing the post in blogger but, to create a drop down menu you have to make certain changes in your template.
In this post, I will show you how you can add a beautiful drop down in your blog and make your blog more clean and more professional. Follow the steps given below.
How To Create A Beautiful Drop Down Menu In Blogger
Step 1 : Open your bloggers account. Go to 'Template' and edit it in HTML form. Now using the keys Control+F, open the search box.
Step 2 : Search for ]]></b:skin>
Step 3 : Copy and paste the following code just above it.
/*-------- Begin Drop Down Menu -------*/
#menubar {
background-color: transparent;
width: 840px;
color: #424338;
margin: 0px;
padding: 0;
position: relative;
border-top:0px solid ##8C001A;
height:35px;
}
#menus {
margin: 0;
padding: 0;
}
#menus ul {
float: left;
list-style: none;
margin: 0;
padding: 0;
}
#menus li {
list-style: none;
margin: 0;
padding: 0;
border-left:0px solid #1A6680;
border-right:0px solid #1A6680;
height:auto;
}
#menus li a, #menus li a:link, #menus li a:visited {
color: #FFFFFF; /* This changes the text color of visited links. */
display: block;
font:normal 14px Arial, Tahoma, Helvetica, FreeSans, sans-serif; margin: 5;
/* change margin value to 0 if you want no space between tabs */
/* change 14 to another number to increase or reduce font size */
padding: 9px 12px 10px 12px;
text-decoration: none;
}
#menus li a:hover, #menus li a:active {
background: #424338; /* This is the main menu background color when a user hovers. */
color: #FFFFFF; /* This changes the text color. */
display: block;
text-decoration: none;
margin: 0;
padding: 9px 12px 10px 12px;
}
#menus li {
float: left;
padding: 0;
}
#menus li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 160px;
margin: 0;
padding: 0;
}
#menus li ul a {
width: 140px;
}
#menus li ul ul {
margin: -25px 0 0 160px;
}
#menus li:hover ul ul, #menus li:hover ul ul ul, #menus li.sfhover ul ul, #menus li.sfhover ul ul ul {
left: -999em;
}
#menus li:hover ul, #menus li li:hover ul, #menus li li li:hover ul, #menus li.sfhover ul, #menus li
li.sfhover ul, #menus li li li.sfhover ul {
left: auto;
}
#menus li:hover, #menus li.sfhover {
position: static;
}
#menus li li a, #menus li li a:link, #menus li li a:visited {
background: #424338; /* This is the background color for the drop down menu. */
width: 120px;
color: #FFFFFF; /* This changes the text color. */
display: block;
font:normal 14px Arial, Tahoma, Helvetica, FreeSans, sans-serif;
/* change 14 to another number to increase or reduce font size */
margin: 0;
padding: 9px 12px 10px 12px;
text-decoration: none;
z-index:9999;
border-bottom:0px solid #1A6680;
}
#menus li li a:hover, #menusli li a:active {
background: #424338; /* This is the background color for the drop down menu when a user hovers. */
color: #FFFFFF; /* This changes the text color. */
display: block; margin: 0;
padding: 9px 12px 10px 12px;
text-decoration: none;
}
/*-------- End Drop Down Menu -------*/
Step 4 : Save the template.
Step 5 : Now before going to next part, you should learn some basics so that you can change and customize the drop down menu according to your need.
Now look at the following code given below.
<div id='menubar'>
<ul id='menus'>
<li><a href='LINK'>TabName1</a></li>
<li><a href='LINK'>TabName2</a></li>
<li><a href='LINK'>TabName3</a></li>
<li><a href='LINK'>TabName4</a></li>
</ul>
</div>
This code will create a set of four horizontal menus naming TabName1 to TabName4. These are just simple horizontal menus with no drop down yet. Now to make a drop down in any of these menus, we have to add the following given below code inside it.
<ul>
<li><a href='LINK'>DropDownName1</a></li>
<li><a href='LINK'>DropDownName2</a></li>
<li><a href='LINK'>DropDownName3</a></li>
</ul>
The above code adds three drop down menus named as DropDownName1 to DropDownName3.
Now, combining the above two steps, the complete code will look like given below.
<div id='menubar'>
<ul id='menus'>
<li><a href='LINK'>DropDownName1</a></li>
<li><a href='LINK'>DropDownName2</a></li>
<li><a href='LINK'>DropDownName3</a></li>
<li><a href='LINK'>TabName4</a>
<ul>
<li><a href='LINK'>DropDownName1</a></li>
<li><a href='LINK'>DropDownName2</a></li>
<li><a href='LINK'>DropDownName3</a></li>
</ul>
</li>
</ul>
</div>
This code will create four horizontal menus and three sub menus under 'TabName4'. You can add as many as sub menu as you wish.
Don't forget to replace the LINK with the URL of your post or labels.
Step 6 : Now, go to 'Layout' and add a new gadget. Select HTML/Javascript and copy and paste the above code in it and make required changes in it. Save the widget and you are done.
Congrats!! You have successfully added drop down menu in your blog. I hope this tutorial helped you to add drop down menus in your blog. If you faced any problem doing it, then feel free to ask below in the comments.
