Latest

6/recent/ticker-posts

Header Ads Widget

Create Drop Down Menu on Blogger Default Templates || Sub Menu Tutorial with easy steps

In this tutorial, we learn how can we create a Blogger Drop-down menu in the Blogger Default theme. In the Blogger default theme, Unfortunately, the main menu and sub-menu list are not provided, so we have to create itself through Coding. If you don't know to code then don't worry, in this article, we will guide to create drop down from start to endPoint. 




To Create the Drop Down we have to follow some steps :

In this article, we will learn how to create a default blogger theme main menu and sub-menus with step By steps. Read the Full Article very Carefully and Follow the Steps. 


CREATE SUB-MENU OR DROP DOWN MENU IN BLOGGER (VIDEO TUTORIAL)





HOW TO CREATE SUB-MENU OR DROP DOWN MENU IN BLOGGER


  1. Login On Blogger.
  2. Go to "Layout " Option .
  3. "Add a Gadget" In the Layout.
  4. Add "HTML/JavaScript" in the Gadget.
  5. Save the Gadget.
  6. Drag & Drop the Menu Gadget to the Pages in the Layout .
  7. Edit Menu Gadget.
  8. Copy & Paste the Below Code in the Menu Gadget.<!doctype html> <style> .dropbtn { background-color: #4CAF50; color: white; padding: 16px; font-size: 16px; border: none; cursor: pointer; } .dropdown { position: relative; display: inline-block; } .dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; } .dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; } .dropdown-content a:hover {background-color: #f1f1f1} .dropdown:hover .dropdown-content { display: block; } .dropdown:hover .dropbtn { background-color: #3e8e41; } </style> <div class="dropdown"> <button class="dropbtn">NAME OF MENU</button> <div class="dropdown-content"> <a href="#">SUB MENU 1</a> <a href="#">SUB MENU 2</a> <a href="#">SUB MENU 3</a> </div> </div> </!doctype>
  9. Save
  10. Save Arrangement.
  11. Refresh Blogger.
  12. Drop Down Menu Added .

Post a Comment

10 Comments

  1. Home
    Quarantine
    Registration
    Quarantine center list
    Contact tracing person list
    Contact

    please above shows menu will be generate sir and send the code sir

    ReplyDelete
  2. This does not work with mobile prewiew.

    ReplyDelete
  3. Hi, where do I insert links for the Menu and Submenu items?

    ReplyDelete
    Replies
    1. Nevermind, fount it :) https://www.youtube.com/watch?v=s2Mc61k0Ujo

      Delete
  4. Hi, Thanks a lot.
    It was great help. I have applied this code on my blog www.sipwealthcreator.blogspot.com and it works great. But When I hover on sub menus all the sub menus get highlighted and that's look bad so is it possible to get only the specific sub menu gets highlighted when hover on it?

    Thanks in advance and I subscribed to your youtube channel.

    ReplyDelete
  5. this works great on the old blogger templates but not my newer ones...but how do I get 2 dropdowns to sit side by side???? help please

    ReplyDelete
  6. This comment has been removed by the author.

    ReplyDelete
  7. Thanks, I added this on my site, success is the only option
    but for some reason, it only works when i move the gadget to the sidebar. If I have it on the page list section the drop down does not work - any ideas?

    ReplyDelete