Skip to main content

How to Create Drop Down Menu in Blogger


How to Create Drop Down Menu in Blogger

Create Drop Down Menu in Blogger Default Themes

Procedure:

  • Open your browser and go to your blogger dashboard.
  • Click on layout page in the Blogger dashboard.
  • There you can see sidebar gadgets and click on "add gadgets " to edit.
  • Now you see a new pop-up window, it will give you a couple of options of what gadgets you would like to put in your side bar menu.
  • At the top of new pop-up window you can see "visible" option, check on it
  • Choose HTML/Java gadget you need and click on "+" .
  • Enter the title of your gadget in the Title text box and your HTML/Java Script content in the content area.
  • At the top of new pop-up window you can see "visible" option, check on it.
  • Click on save. Now your gadget is successfully added to your side bar.
  • Now you have to hold the gadget and place it below the page list.


At the bottom of the layout page , you can see "save" button click on it.
Your changes will be successfully saved to your blogger layout page.
Click on "view blog" to check changes in your blogger website.
You can see green colour tab as shown in below.

Note: For every changes that you have done in your layout page, make sure to click on "save". Otherwise your changes will not happen in your blogger website.

Drop down menu:

Html code:

<style>
.dropbtn {
  background-color: #4CAF50;
  color: white;
  width: 150px;
  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: 140px;
  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">Quiz</button>
  <div class="dropdown-content">
  <a href="#">Quiz 1</a>
  </div>
</div>



Comments

Post a Comment