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
- Login On Blogger.
- Go to "Layout " Option .
- "Add a Gadget" In the Layout.
- Add "HTML/JavaScript" in the Gadget.
- Save the Gadget.
- Drag & Drop the Menu Gadget to the Pages in the Layout .
- Edit Menu Gadget.
- 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>
- Save
- Save Arrangement.
- Refresh Blogger.
- Drop Down Menu Added .
10 Comments
Home
ReplyDeleteQuarantine
Registration
Quarantine center list
Contact tracing person list
Contact
please above shows menu will be generate sir and send the code sir
This does not work with mobile prewiew.
ReplyDeleteHi, where do I insert links for the Menu and Submenu items?
ReplyDeleteNevermind, fount it :) https://www.youtube.com/watch?v=s2Mc61k0Ujo
DeleteHi, Thanks a lot.
ReplyDeleteIt 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.
not working
ReplyDeleteNice Article.
ReplyDeleteAlso Refer below Articles:
Top 20 SSIS Interview Questions with detailed answers
Top 15 Power BI interview Questions with detailed Answers
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
ReplyDeleteThis comment has been removed by the author.
ReplyDeleteThanks, I added this on my site, success is the only option
ReplyDeletebut 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?