Thursday, 16 March 2017

How to create Drop Down Menu in Blogger with Pictures

Hello friends, welcome to the Techtspot Blogger tutorial today I will show you how to add create Drop Down Menu in Blogger blog with pictures.
How to create Drop Down Menu in Blogger with Pictures

Guys we insert add drop down navigation menu with sub menu in Blogger blog, Tab Menu can categories our Blogger blog posts like we have Html and windows trick post then we create these categories or tabs like:-
" Web Design " have two sub menu [html] [CSS] and
" Computer Tricks " have one sub menu [Windows trick]

These are Following Steps:-


Step 1: First we go to Blogger Layout and click Add a Gadget Link.
Create Menu Tabs In Blogger Blog 1
Step 2: Click the HTML/JavaScript link.
Create Menu Tabs In Blogger Blog 2
Step 3: Paste the Code in Content area and Click Save button.
Create Menu Tabs In Blogger Blog 3
<ul id="menu_bar">
  <li><a href="#">Home</a></li>
  <li><a href="#">Menu 0</a></li>
  <li>
    Menu 1
    <ul>
      <li><a href="#">Sub-menu 1</a></li>
      <li><a href="#">Sub-menu 2</a></li>
      <li><a href="#">Sub-menu 3</a></li>
    </ul>
  </li>
<li>
    Menu 2
    <ul>
      <li><a href="#">Sub-menu 1</a></li>
      <li><a href="#">Sub-menu 2</a></li>
      <li><a href="#">Sub-menu 3</a></li>
    </ul>
  </li>
 <li><a href="#">Menu 3</a></li>
  <li><a href="#">Menu 4</a></li>
</ul>
Step 4: Now Click Blogger Theme link and click the Customise button.
Create Menu Tabs In Blogger Blog 4
Step 5: Click the Advanced Link and scroll Down links then Click Add CSS link. Here we paste the CSS Code and click Apply to Blog button.
Create Menu Tabs In Blogger Blog 5
.tabs-inner .widget ul#menu_bar {
  text-align: left;
  display: inline;
  margin: 0;
  padding: 15px 4px 17px 0;
  list-style: none;
  border:none;
}
.tabs-inner .widget ul#menu_bar 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#menu_bar li a {
padding:0;
font-family: sans-serif; /* Font for the menu links */
border:0;
}
.tabs-inner .widget ul#menu_bar 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#menu_bar li:hover a {
  background: transparent;
  color: #fff; /* font colour when you roll over a menu title link */
}
.tabs-inner .widget ul#menu_bar 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#menu_bar 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#menu_bar li ul li a{
  color:#fff  /* link colour of the sub menu items */
}
.tabs-inner .widget ul#menu_bar li ul li:hover {
  background: #666; /* background colour when you roll over sub menu items */
}
.tabs-inner .widget ul#menu_bar li:hover ul {
  display: block;
  opacity: 1;
  visibility: visible;
}
Step 6: Go to the Blogger Blog.


Note:- Here we Replace # RED Code with Blog URL.

Read More:- 
How to Add Animated Download Buttons in Blogger
How to Make Money Using Affiliate Marketing
How to Remove Newer Post And Older Post Link in Blogger
How to Change Author Name in Blogger

I hope you enjoy this Post. If any problem comment it.

40 comments:

  1. Very useful. Good to refresh good tips on the mind!!!

    ReplyDelete
  2. Great... I want see more...

    ReplyDelete
  3. You are right. I have added. It takes no time.

    ReplyDelete
  4. Thanks... works perfect!!!

    ReplyDelete
  5. thanks dude this is work.....

    ReplyDelete
  6. please help me
    how can i post on each sub menu

    ReplyDelete
    Replies
    1. hello sir

      All Sub menus have own LABLE and don't worry. I create a video on this topic with in 2 3 day.

      Delete
  7. Sir how to likn dropdown menu and submenus with my data plz give information about it

    ReplyDelete
    Replies
    1. hello there replace # with your URL and rename the menu 1, 2 like tricks and how to

      Delete
  8. How do I hide the sub menus so the viewer would have to click on the main menu to see the sub menu?

    ReplyDelete
  9. It worked Thank you very much
    uttarakhandadventureguide.com

    ReplyDelete
  10. Hey!thanks a lot.but i want to add 3rd level of deop down can you please help me out.

    ReplyDelete
    Replies
    1. just do this

      < li >
      Menu 1
      < ul >
      < li >Sub-menu 1< /li >
      < li >Sub-menu 2< /li >
      < li >Sub-menu
      < ul >
      < li >< a href="#" >Sub-menu 3< /a >< /li >
      < /ul >
      < /li >
      < /ul >
      < /li >

      thanks for comment :)

      Delete
    2. hey bro thanks for advice.. great post.. but how if i want to add more than 3 in subb menu.. i already copy code

      but its not worked bro.. please help me out

      Delete
  11. Can you please tell me what else to add in css for third level drop down. As after including html i am unable to view third level on right side. 2nd and 3rd levels are overlapping. I m unable to find solution.please help.thanks in advance.

    ReplyDelete
    Replies
    1. hello there can you give me you blog or site url and if you want to add 3rd level drop down html code and CSS code

      Delete
    2. Ofcourse, http://learnaturdesk.blogspot.com is my blog url.

      Delete
  12. In this video you can know How To Create Menu and Dropdown Menu in Blogger. Watch now .. https://goo.gl/SVxVQF ... It help you.

    ReplyDelete
  13. How do I create a sub menu to my sub menu? In other words, it would be s total of 2 dub menus??
    Thanks

    ReplyDelete
  14. how do i create multi level menus? thanks

    ReplyDelete
    Replies
    1. hello i think you should user III rd party templates for multi level menus

      Delete
  15. HI SIR BUT HOW TO ADD MY CONTENT ON THAT SUB MENU PLS HELP ME

    ReplyDelete
    Replies
    1. Hello when you copy my first code and you edit it >>> Remove Menu 4 with Contact Us >>> # tag with URL like:-

      < li >< a href="https://your-site.com/contact.html" > Cpntact Us

      Delete
    2. < li >< a href="https://your-site.com/contact.html" > Contact Us < / a > < / li >

      Delete
  16. Hello :) How to add inside borders so that categories are in separate boxes? Thank you!

    ReplyDelete
  17. hi, it works perfect on my computer but not when viewed on a mobile! please help as ive tried every trick! thanks

    ReplyDelete
    Replies
    1. Hello there The Solution is >>>>
      1. Go to Blogger Theme option and click setting ICON below the Mobile View.
      2. Now here you click the drop down button and select custom option then click save button.

      Delete
  18. pls i don't understand the 6th step. pls what to you mean by blogger blog?

    ReplyDelete
    Replies
    1. Hello sir if you apply these steps on your blog then you must open your blog and check it. (step 6 means) !! It work or not
      Thanks

      Delete
  19. Agg laa dali
    Agg laga dali

    tu mumbai aaega

    ReplyDelete