I love playing with Responsive and CSS Blogger widgets as they are really awesome.
Today we are going to learn "How to Add CSS Drop Down Menu For Blogger"
1. Full Responsive.
2. Doesn't affect site loading time.
3. SEO optimized.
4. Easy to Install.
5. User Friendly
6. Tested on Firefox, Chrome, IE [100% Working]
Drop Down Menu helps users to navigate or browse your Blog's or Website's Contents effortlessly. It is also called as Pull Down Menu. It plays very important roll for creating a user friendly blog. If you are beginner blogger then you should check Our Blogger Beginner Guide.
We all know that default blogger templates do no provide any kind of Drop Down Menus, so we have to add them manually, I'm here to tell you how to add the Splendid Super CSS Drop Down Menu in Blogger.
I have took this Drop Down Menu from MyBlogger-Tricks , I've done several changes which give this CSS Drop Down Menu a classy look with optimized coding !
So You should try this widget on your blog.
Its really easy to add such Drop Down Menus in Blogger, you need to follow these Simple steps.
1. Go to Blogger > Dashboard > Template.
2. Click Edit Template.
3. Then find the following code.
]]></b:skin>4. After finding above code, Just copy the following code above it.
#mbt_menu {
background: #656870;
width: 100%;
margin: 0px;
height: 60px;
padding: 0px;
font-size: 13px;
font-family: 'Trebuchet MS', sans-serif;
font-weight: normal;
word-spacing: 2;
-webkit-font-smoothing: antialiased;
}
#mbt_menu li.home a {
padding: 0px 30px;
}
#mbt_menu li.home img {
vertical-align: middle;
}
#mbt_menu ul {
height: 60px;
list-style: none;
margin: 0;
padding: 0px;
}
#mbt_menu li {
float: left;
padding: 0px;
}
#mbt_menu li a {
background: #656870;
color: #CCC;
display: block;
font-weight: bold;
line-height: 60px;
margin: 0px;
padding: 0px 25px;
text-align: center;
text-decoration: none;
-webkit-transition: all 900ms cubic-bezier(0.47, 0, 0.745, 0.715);
-moz-transition: all 900ms cubic-bezier(0.47, 0, 0.745, 0.715);
-o-transition: all 900ms cubic-bezier(0.47, 0, 0.745, 0.715);
-ms-transition: all 900ms cubic-bezier(0.47, 0, 0.745, 0.715);
transition: all 600ms cubic-bezier(0.47, 0, 0.745, 0.715);
}
#mbt_menu li a:hover, #mbt_menu ul li:hover a {
background: #46484E;
color: #FFFFFF;
text-decoration: none;
-webkit-transition: all 900ms cubic-bezier(0.47, 0, 0.745, 0.715);
-moz-transition: all 900ms cubic-bezier(0.47, 0, 0.745, 0.715);
-o-transition: all 900ms cubic-bezier(0.47, 0, 0.745, 0.715);
-ms-transition: all 900ms cubic-bezier(0.47, 0, 0.745, 0.715);
transition: all 600ms cubic-bezier(0.47, 0, 0.745, 0.715);
}
#mbt_menu li ul {
background: #656870;
display: none;
height: auto;
padding: 0px;
margin: 0px;
border: 0px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
position: absolute;
width: 225px;
z-index: 200;
/*top:1em;
/*left:0;*/;
}
#mbt_menu li:hover ul {
display: block;
}
#mbt_menu li li {
display: block;
float: none;
margin: 0px;
padding: 0px;
width: 225px;
}
#mbt_menu li:hover li a {
background: none;
color: #979EAF;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
}
#mbt_menu li ul a {
display: block;
height: 60px;
font-size: 13px;
font-style: normal;
margin: 0px;
padding: 0px 10px 0px 15px;
text-align: left;
}
#mbt_menu> ul > li ul li a {
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
-webkit-transition: color ease 0.3s;
-moz-transition: color ease 0.3s;
-ms-transition: color ease 0.3s;
-o-transition: color ease 0.3s;
}
#mbt_menu li ul a:hover, #mbt_menu li ul li:hover a {
background: #46484E;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
color: #FFF;
text-decoration: none;
padding: 0px 10px 0px 15px;
}
6. After Saving the Template go to Layout > Add Gadget.
7. Select "HTML/Java Script"
8. Copy the following code and paste in it.
<div id="MBT_menu">9. Now you can edit the contents which I've highlighted with Red Color to your desired contents. Replace '#' with your Blog Content Links.
<ul>
<li class="home"><a href="http://techethix.blogspot.com/" title="Home Page"><img alt="Home" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjW2riYu5awXHWXN7QmT7EkbHbLqPVKWHyZmo9O_j82vcbU2u42G6-k_o6vm_uh5EMeul20Rb3yHHqXkfKwufXdR57Pxb7zFqM5oiC0c-jUlhtc5ywoZP_X2ZTxoJmdnMcNMygQaij3dAhs/s1600/Very- Basic-Home-icon.png"/></a></li>
<li class="sub "><a href="#"><span>Blogger</span></a>
<ul>
<li><a href="#"><span>SEO</span></a></li>
<li><a href="#"><span>CSS</span></a></li>
<li><a href="#"><span>Widgets</span></a></li>
<li><a href="#"><span>Blogger</span></a></li>
</ul>
</li>
<li><a href="#"><span>Applicatoin</span></a>
<ul>
<li><a href="#"><span>HTML Encoder</span></a></li>
<li><a href="#"><span>HTML Editor</span></a></li>
</ul></li>
<li><a href="#"><span>Tools »</span></a>
<ul>
<li><a href="#"><span>Online HTML Editor</span></a></li>
<li><a href="#"><span>Color Code</span></a></li>
<li><a href="#"><span>Page Rank Checker</span></a></li>
</ul>
</li>
<li><a href="#"><span>Faqs</span></a></li>
<li><a href="#"><span>About Us</span></a></li>
<li><a href="#"><span>Contact Us</span></a></li>
</ul>
</div>
10. Click Save, That's it ! You are done. Move the widget above Post Body and Hit Save Arrangement.
Now Go to your Blog and check our CSS Drop Down Menu.
Don't forget to Subscribe Us and You can also Share this post with your friends.
if you have any problem about this post feel free to contact with me or you can also post comment here.
