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>
</ul></center>
<style>
#menu li {               
 display: inline;               
 list-style: none;               
 padding: 0;           
 }                   

 #menu li a {                                 
 padding: 15px 20px 15px 20px;               
 text-decoration: none;               
  color:white;
  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;
  font-size:18px;
  -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 {                                 

  padding-bottom:20px;
}
.hmlink{
  background:#24459A;
}
.winlink{
  background-color: rgba(9,173,217,1);
}
.maclink{
  background-color: rgba(108,109,112,1);
}
  .weblink{
    background:#EEEE00;
    color:black;
  }
.andlink{
  background-color: rgba(149,191,43,1);
}
.gamlink{
  background-color: rgba(212,2,43,1);
}
.seclink{
  background-color: rgba(0,158,62,1);
}
.linlink{
  background-color: rgb(123, 82, 138);
}
#menubor{
  border-top:1px solid black;
  margin-bottom:-1px;
}
  .header-outer{
    padding-bottom:20px;
  }
</style>

Changes

  • 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 !
    
    
SHARE

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

28 comments:

  1. how to add this comment wedget to blogger blog

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

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

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

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

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

    ReplyDelete
  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

    ReplyDelete
  7. Replies
    1. thx dear
      I've added this widgets to my site...
      http://chatolk.blogspot.com/
      thx dear

      Delete
  8. 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 http://focsoft.blogspot.com

    ReplyDelete
  9. 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...

    ReplyDelete
  10. 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!

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

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

    ReplyDelete
  13. thanks bro its working.



    www.livewayz.com

    ReplyDelete
  14. 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?

    ReplyDelete
  15. The website is gurusline.com please check it iftikar..

    ReplyDelete
  16. اذا كنت من اصحاب راس المال المتوسط وترغب في بداء مشروعك الخاص فننصحكم بالاستثمار في ماكينات التعبئة والتغليف وخاصةً ماكينات تعبئة سكر اوتوماتيك حيث انها تتميز بسرعة العائد علي الاستثمار فـ بأمكان المكينة تعبئة السكر في اصابع اكياس لتصبح جاهزة للبيع للمطاعم والفنادق.

    ReplyDelete