DROP DOWN MENU: Add Stylish Drop Down Menu In Blogger Without Javascript
Drop down menu or horizontal navigation menu helps to categories posts under pages in blogger. Though officially blogger doesn't support to add posts under pages in blogger, but with some little tweaks you can create sub-categories in blogger. The main advantage of adding drop down menu in blogger is, you can create sub-pages in blogger. In this tutorial I brought a stylish drop down menu in blogger without Javascript. So, let's dive in..!!
What is Drop Down Menu In Blogger?
In Blogger drop-down menu is a list of items that appear whenever a piece of text is clicked. It is similar to list box, where a user can select listed sub-pages or sub-categories from the lists by clicking or hovering a button or text. In blogger drop down menu is also known as horizontal menu or mega menu.
Benefit of using Drop Down Menu In Blogger?
For Professional Blogging its always recommended to use a drop down menu. Drop down menu adds a lot's of value to blog. Drop down menu is beneficial both in terms of of SEO as well as design of blog. Some of the best advantages of using drop down menu in blog were:
- Drop down menu makes blog look stylish.
- Drop down menu helps to create sub-menu in blogger.
- Drop down menu helps to create sub categories by defining post label in blogger.
- Drop down menu helps to keep blog clean by defining proper navigation.
- Apart from labels with the help of drop down menu you can place your important links upfront in navigation.
How to add drop down menu in blogger?
1. Login to your blogger dashboard and select your blog.
2. Go to Layout and in the header area click "Add a Gadget".
3. A pop-up box gadget box will appear, then select "HTML/JAVASCRIPT".
4. Then paste the HTML codes and save it.
<center><ul id="DROPDOWNMENU"> <li><a href="#">Home</a></li> <li><a href="#">Blog</a></li> <li> Categories <ul> <li><a href="#">SEO</a></li> <li><a href="#">Widgets</a></li> <li><a href="#">Blogger Template</a></li> </ul> </li> <li><a href="#">About Us</a></li> <li><a href="#">Privacy</a></li></ul></center>5. After adding HTML codes go to Theme > Edit HTML.
6. Press anywhere inside the code area and press [CTRL+F], a pop-up box will appear in the corner of the code area.
7. Paste ]]></b:skin> and hit enter.
8. Above ]]></b:skin> paste these CSS codes and save your theme.
.tabs-inner .widget ul#DROPDOWNMENU {
text-align: left;
display: inline;
margin: 0;
padding: 15px 4px 17px 0;
list-style: none;
border:none;
}
.tabs-inner .widget ul#DROPDOWNMENU li {
font-size: 12px/18px;
font-family: sans-serif; /* Font for the menu */
display: inline-block;
margin-right: -4px;
position: relative;
padding: 15px 20px;
background: #fff; /* background colour of the main menu */
float:none;
cursor: pointer;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s;
}
.tabs-inner .widget ul#DROPDOWNMENU li a {
padding:0;
font-family: sans-serif; /* Font for the menu links */
border:0;
}
.tabs-inner .widget ul#DROPDOWNMENU li:hover {
background: #555; /* background colour when you roll over a menu title */
color: #fff; /* font colour when you roll over a menu title */
}
.tabs-inner .widget ul#DROPDOWNMENU li:hover a {
background: transparent;
color: #fff; /* font colour when you roll over a menu title link */
}
.tabs-inner .widget ul#DROPDOWNMENU li ul {
z-index:1000;
border:none;
padding: 0;
position: absolute;
top: 45px;
left: 30px;
float:none;
width: 150px;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
display: none;
opacity: 0;
visibility: hidden;
-webkit-transiton: opacity 0.2s;
-moz-transition: opacity 0.2s;
-ms-transition: opacity 0.2s;
-o-transition: opacity 0.2s;
-transition: opacity 0.2s;
}
.tabs-inner .widget ul#DROPDOWNMENU li ul li {
background: #555; /* background colour of the sub menu items */
display: block;
color: #fff; /* font colour of the sub menu items */
text-shadow: 0 -1px 0 #000;
}
ul#DROPDOWNMENU li ul li a{
color:#fff /* link colour of the sub menu items */
}
.tabs-inner .widget ul#DROPDOWNMENU li ul li:hover {
background: #666; /* background colour when you roll over sub menu items */
}
.tabs-inner .widget ul#DROPDOWNMENU li:hover ul {
display: block;
opacity: 1;
visibility: visible;
}
Customization
After adding these codes make sure to change "Home", "Privacy", "SEO", Blogger" etc names with your blog topics and replace # with your post or category link. For changing color of the navigation menu change #fff with your desired color. You can use this color code tool to select color codes. To change hover color, tab color, tabs background change #xxxxx . with your desired color code.
How to add drop down menu in gooyaabitemplates/ soratemplates or any free blogger templates?
In any custom blogger template like gooyaabitemplate, soratemplates or any other free blogger templates, the designer of the template already adds drop down menu feature in the template.
Then how to add drop down menu in free blogger templates?
Some of the newbies may find it difficult to add a drop down menu in free blogger template. Different blogger templates has different process of adding drop down menus in their blogger templates.
In some of the free blogger templates you can add drop down menu in layout section where as in some blogger template you have to add drop down menu in changing codes in Theme section.
Adding Drop Down Menu using Blogger Layout
Using Layout on free blogger templates menus are generally configured using "Linklist". To add drop down menu in the linklist:
1. Go to Layout > Select Menu Widget (linklist).
2. For adding sub category under a category just add "_subname".
eg. Suppose if your main category is TECH, under tech it is blogging under blogging it is seo. i.e TECH>BLOGGING>SEO then, first link in the linklist is TECH, then _BLOGGING, then __SEO for every sub category you have to add "_" before the name of that sub-category. For sub-sub-category use "__" twice.
Adding Drop Down Menu editing blogger theme
To add drop down menu editing code area follow these steps:
- Goto Theme > Edit HTML.
- Click anywhere inside code area and press [CTRL+F] and type "HOME" or any category which is showing in your menu bar and hit enter.
- Name under which you want to make sub-menu or sub-category follow these codes.
<li>Categories <ul> <li><a href="#">SEO</a></li> <li><a href="#">Widgets</a></li> <li><a href="#">Blogger Template</a></li> </ul> </li>
Say you want to add drop down under "HOME" then first search "Home" inside the blogger theme (code area).
Then, You will see that home is bounded with these codes "<li><a href="#">Home</a></li>".
Now, for adding drop down under "HOME" add these simple codes. <ul> </ul>
Say you want to add "Demo" and "Blog" under "Home" then,
<li><a href="#">Home</a></li>
<ul>
<li><a href="#">DEMO</a></li> <li><a href="#">BLOG</a></li>
</ul>
Just follow these steps to add unlimited numbers of sub-menus. For adding sub-sub-menu follow the same step.
Say, Home ------->DEMO------>NEW DEMO.Follow the same process.
<li><a href="#">Home</a></li>
<ul>
<li><a href="#">DEMO</a></li> <ul><li><a href="#">NEW DEMO</a></li></ul>
<li><a href="#">BLOG</a></li>
</ul>
This is the simple process for adding drop down menu in blogger by editing blogger theme code area.
Conclusion
I tried my best to provide you all the necessary information in the most simplest way to add a multi drop down menu in blogger without Javascript. If you are still having issues to implement these codes feel free to comment and let me know, I will try to sort out your problem within 12 working hours. If you are benefited by this tutorial please share this article to Facebook and other social media sites. Comment down let me know how you implemented this code and added new drop down menu.🙋
Comments
Post a Comment
[[ DOFOLLOW COMMENT ]]