Add Cool Drop Down Menu in Blogger

Drop Down Navigation Menu For Blogger : You may have seen many drop-down menus but today "ThatsBlogging" will present you an incredible Drop Down menu , which is really a magnificent drop down menu.Actually it is developed by the combination of CSS with HTML . Beautiful Colors combinations are used which makes it more significant drop down menu.Actually , drop down menu makes your blog navigative and easy to expand.This drop down menu is very stylish which means your Blog Beauty will increase by adding this menu.Moreover this menu will not slow your blog loading speed.

How To Add Cool Drop Down Menu in Blogger

  • Go To Blogger Dashboard
  • Click On Template
  • Edit HTML
  • Search For </header>
  • Copy the Below Script and Add it below the Closing Header tag ( </header>)
<div id='menubor'></div><center><ul id='menu'>
<li><a class='hmlink' href='#'>Home</a></li>
<li><a class='winlink' href='#'>Blogger Templates</a></li>
<li><a class='maclink' href='#'>Blogger Widgets</a></li>
<li><a class='andlink' href='#'>How To Tuts</a></li>
<li><a class='gamlink' href='#'>Privacy Policy</a></li>
<li><a class='seclink' href='#'>Guest Post</a></li>
<li><a class='linlink' href='#'>About</a></li>
#menu li {               
 display: inline;               
 list-style: none;               
 padding: 0;           

 #menu li a {                                 
 padding: 15px 20px 15px 20px;               
 text-decoration: none;               
  font-family: 'Noto Serif', serif;
-moz-box-shadow: inset 0 0 13px -2px #000;
-webkit-box-shadow: inset 0 0 13px -2px #000;
box-shadow: inset 0 0 13px -2px #000;
  -webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-moz-border-radius-bottomright: 10px;
-moz-border-radius-bottomleft: 10px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
  transition: padding-bottom .666s;
-webkit-transition: padding-bottom .666s;
-moz-transition: padding-bottom .666s;
-o-transition: padding-bottom .666s;
-ms-transition: padding-bottom .666s;
 #menu li a:hover {                                 

  background-color: rgba(9,173,217,1);
  background-color: rgba(108,109,112,1);
  background-color: rgba(149,191,43,1);
  background-color: rgba(212,2,43,1);
  background-color: rgba(0,158,62,1);
  background-color: rgb(123, 82, 138);
  border-top:1px solid black;


  • For Changing the Links Replace # with your Own Links and the Anchor text with your desired text
  • That's it , Save Your template and have fun !
  • If you are interested in adding extra <li> options for that add  <li><a class='desiredword' href='#'>text</a></li> between <ul> and </ul> tags.
  • After implementing the above step ,  you have to define the class in CSS for that define the class between the style container and hit save.
  • If you have any Question ask it freely !! Stay Blessed , Happy Blogging !

Iftikhar Uddin

I am a Web Developer,Graphic Designer,Blogger Wizard,WordPress Samurai,Code Engineer,SEO Guru,Software Engineer and food hunter.

  • Image
  • Image
  • Image
  • Image
  • Image
    Blogger Comment
    Facebook Comment


  1. how to add this comment wedget to blogger blog

    1. Just Search in Google "Spice up like comment for blogger" and read the article!

  2. thanx brother for this post awsm...:)

  3. thank you so much....the information was so helpful to me..... Make Money , Blogging Tips

  4. mr. iftikhar uddin, do i have to search for under the "Jump to widget" drop down menu?

  5. i mean, do i have to search for header under the Jump to widget drop down menu?

  6. thank you so much,for your posting
    Read more interesting news,amazing news, bangla news paper, bangla news, bangla blog, english news, english blog.etc

  7. Replies
    1. thx dear
      I've added this widgets to my site...
      thx dear

  8. blogging tricks @ tips money making ideas and all methodes of seo see in this site

  9. Get Free Hacking Tools, Hacking Tutorials, Hacking eBooks, Hacking Videos, Learn Ethical Hacking, SEO Tips And Tricks, All Network Database, Exploits And All Stuff Related Hacking Only At

  10. How do I add more than one link to a menu button please ??? what do I put between the links? I'm doing something wrong as 1 link works but not 2...

  11. Best for widget..

  12. Thanks for the code. I was wondering how do you edit that to add the sub menu items? I have been trying to do it on my own but am messing up the whole thing!

  13. Is it possible to add sub-menus to the template? If so how do you add them?

  14. Is it possible to add sub-menus to the template? If so how do you add them?

  15. thanks bro its working.

  16. Hello Iftikar bro.

    My website Hastoms Blogging Solutions is a money making tips blog, do you think I can add it as a widget without EDIT HTML?

  17. The website is please check it iftikar..