Hello Friends, Today I am very excited to share very important tips for blogger blog or website. Actually, I am going to share how to add drop down menu without any install any new template. We can add it by a simple widget as you add others widget in blogger. So it's very simple and clear coding. I think you are fed up to get some boring and long coding to add it. Somebody suggests you install another drop down menu template. But here I am telling you here, that you can customize your simple blogger template in drop-down menu and can enjoy this facility. So let's start how to do it.
First off all create a map your URL and title which you want to list in the menu. I mean decide which post you want to add your wishing list. Suppose you have four main menus, Home, About Company, Services, and plans. you can keep your wishing URL list in About Company, or Services, whatever your requirement.
Here I am giving you Primary Sample - Just Edit your URL and Text which you want to add in Drop down menu.
So See in this Example -
<!-- start navmenu -->
<ul id='cssnav'>
<li class="active"><a href='http://LINK.com'>Home</a></li>
<li class="sub"><a href='http://CATEGORY-ONE-LINK.com'>Category 1</a>
<ul>
<li><a href='http://SUB-CATEGORY-ONE-LINK.com'>SUB-category1</a></li>
<li><a href='http://SUB-CATEGORY-TWO-LINK.com'>SUB-category2</a></li>
<li><a href='http://SUB-CATEGORY-THREE-LINK.com'>SUB-category3</a></li>
</ul>
</li>
<li><a href='http://CATEGORY-TWO-LINK.com'>Category 2</a>
<ul>
<li><a href='http://SUB-CATEGORY-ONE-LINK.com'>SUB-category1</a></li>
<li><a href='http://SUB-CATEGORY-TWO-LINK.com'>SUB-category2</a></li>
<li><a href='http://SUB-CATEGORY-THREE-LINK.com'>SUB-category3</a></li>
</ul>
</li>
<li><a href='http://CATEGORY-THREE-LINK.com'>Category 3</a>
<ul>
<li><a href='http://SUB-CATEGORY-ONE-LINK.com'>SUB-category1</a></li>
<li><a href='http://SUB-CATEGORY-TWO-LINK.com'>SUB-category2</a></li>
<li><a href='http://SUB-CATEGORY-THREE-LINK.com'>SUB-category3</a></li>
</ul>
</li>
<li><a href='http://CATEGORY-FOUR-LINK.com'>Category 4</a>
<ul>
<li><a href='http://SUB-CATEGORY-ONE-LINK.com'>SUB-category1</a></li>
<li><a href='http://SUB-CATEGORY-TWO-LINK.com'>SUB-category2</a></li>
<li><a href='http://SUB-CATEGORY-THREE-LINK.com'>SUB-category3</a></li>
</ul>
</li>
</ul>
<!-- end navmenu -->
Note:
1. Don't delete any things in red text as I mention Above.
2. Don't Edit home Category just paste your Home URL
3. Now You can Edit you Next Category and Sub Category as your requirement.
here I have shown above coding - Just Edit you Subcategory URL and its name (As Blue) About Company (what you want)
4. Take care of <li> and <Ul> Tag. if any list wrong then it will not work. so Edit your Menu list very carefully. You can Add Extra Categories and Subcategories.
If you are Confused then see the other Example, where you can see the live demo. www.excelentcontent.com.
<!-- start navmenu -->
<ul id='cssnav'>
<li class="active"><a href='http://www.excelentcontent.com/'>Home</a></li>
<li class="sub"><a href='http://www.excelentcontent.com/p/about-us.html'>About Us</a>
<ul>
<li><a href='#'target = "blank">Company</a></li>
</ul>
</li>
<li><a href='http://www.excelentcontent.com/p/seo-services.html'>SEO Services</a>
<ul>
<li><a href='http://www.excelentcontent.com/2015/01/design-and-implement-your-seo-strategy.html'>SEO Strategy 2015</a></li>
<li><a href='http://www.excelentcontent.com/2015/01/follow-2015-techniques-trends-to-make.html'>SEO technique 2015</a></li>
</ul>
</li>
<li><a href='http://www.excelentcontent.com/p/blog-page.html'>Content Development</a>
<ul>
<li><a href='http://www.excelentcontent.com/2015/01/what-is-role-of-content-to-boost.html'>Role of Content</a></li>
<li><a href='http://www.excelentcontent.com/2015/02/want-to-become-emperor-of-web-world.html'>The Emperor Of The Web World</a></li>
</ul>
</li>
<li><a href='http://www.excelentcontent.com/p/website-designing.html'>Website Designign</a>
<ul>
<li><a href='http://www.excelentcontent.com/2015/01/website-designing-and-development.html'>Website Design at cheap Price</a></li>
<li><a href='http://www.excelentcontent.com/2015/01/which-is-best-option-freelancer-or.html'>Which is best Company or Freelance</a></li>
</ul>
</li>
<li><a href='http://www.excelentcontent.com/p/blog-page_25.html'>Plan</a>
<ul>
<li><a href='http://www.excelentcontent.com/p/blog-page_25.html'>SEO Plan</a></li>
<li><a href='http://www.excelentcontent.com/p/blog-page_25.html'>Contant Writing Plan</a></li>
<li><a href='http://www.excelentcontent.com/p/blog-page_25.html'>Designing Paln</a></li>
</ul>
</li>
<li><a href='http://www.excelentcontent.com/p/blog-page_1.html'>Contact Us</a>
<ul>
<li><a href='http://www.excelentcontent.com/p/blog-page_1.html'>Contact 91-8285241104 </a></li>
</ul>
</li>
</ul>
<!-- end navmenu -->
Now I think you are very clear.
After mapping like your links Do the following steps;
1. Log in your Blogger Account
2. Go to layout
3. Add an HTML/Java Gadget
4. Give the Title. Drop Down
5. And Paste your all mapping Code in the text Area and save it.
Note: here One very important thing Add this Gadget Below Heading section I mean replace it with Page Gadget. See in the Screen short.
6. Save or arrange the Gadget. and see the website. then you see the adding menus scattering here and there. so you have to do one step more to arrange it in Order.
Now. Do this.
7. Go to your Template Menu and Click on Customize Button.
8. Here Go to Advance menu
9 And in the Advance menu go to last below button Add CSS
10 After Click the Add CSS you see her blank box.
11. Here Paste the following Code
/* ----- CSS Nav Menu Styling ----- */
#cssnav {
margin: 0px 0 0 -30px;
padding: 0px 0px 0px 0px;
width: 1050px; /* Set your width to fit your blog */
font: $(tabs.font); /* Template Designer - Change Font Type, Size, Etc */
color: $(tabs.text.color); /* Template Designer - Change Font Size */
}
#cssnav ul {
background: $(tabs.background.color) $(tabs.background.gradient) repeat-x scroll 0 -800px;
_background-image: none; /* Template Designer - Change Menu Background */
height: 20px; /* Change Height of Menu */
list-style: none;
margin: 0px;
padding: 0px;
}
#cssnav li {
float: left;
padding: 0px;
}
#cssnav li a {
background: $(tabs.background.color) $(tabs.background.gradient) repeat-x scroll 0 -800px;
_background-image: none; /* Template Designer - Change Menu Background */
display: block;
margin: 0px;
font: $(tabs.font); /* Template Designer - Change Font Type, Size, Etc */
text-decoration: none;
}
#cssnav > ul > li > a {
color: $(tabs.text.color); /* Template Designer - Change Font Color */
}
#cssnav ul ul a {
color: $(tabs.text.color); /* Template Designer - Change Color */
}
#cssnav li > a:hover, #cssnav ul li:hover {
color: $(tabs.selected.text.color); /* Template Designer - Change Font Color on Hover */
background-color: $(tabs.selected.background.color); /* Template Designer - Change Font Background on Hover */
text-decoration: none;
}
#cssnav li ul {
background: $(tabs.background.color) $(tabs.background.gradient) repeat-x scroll 0 -800px;
_background-image: none; /* Template Designer - Change Menu Background */
display: none;
height: auto;
padding: 0px;
margin: 0px;
position: absolute;
width: 200px; /* Change Width Of DropDown Menu */
z-index:9999;
}
#cssnav li:hover ul {
display: block;
}
#cssnav li li {
background: $(tabs.background.color) $(tabs.background.gradient) repeat-x scroll 0 -800px;
_background-image: none; /* Template Designer - Change Background */
display: block;
float: none;
margin: 0px;
padding: 0px;
width: 200px; /* Change Width Of DropDown Menu */
}
#cssnav li:hover li a {
background: $(tabs.selected.background.color); /* Template Designer - Change Background of Link on Hover */
}
#cssnav li ul a {
display: block;
height: auto;
margin: 0px;
padding: 10px;
text-align: left;
}
#cssnav li ul a:hover, #cssnav li ul li:hover > a {
color: $(tabs.selected.text.color); /* Template Designer - Change Text Color on Hover */
background-color: $(tabs.selected.background.color); /* Template Designer - Change Background on Hover */
border: 0px;
text-decoration: none;
}
12. Save it. (Apply blog)
Now refresh the website.
13. Here you see the life with your Drop Down Menu. Enjoy it.
Note: - Sometimes you can see some extra long menu bar. So you can give your Template width See above red Code.
I think you have done all and Successfully Add Dropdown Menu in your simple Template.
Note: If you want to add more link in future then simply edit Dropdown Menu and add your URL.
Have fun!!
You might like to read: How to Disable Comment Link in Blogger Blog Post & Page