How to create Drop Down menu in blogger site 2019 free

How to create Drop Down menu in blogger site 2019 free

How to create Drop Down menu in blogger site 2019 free


Intro This Post:- तो दोस्तों इस पोस्ट में मैं आपको बताऊंगा कि आप अपनी ब्लॉगर वेबसाइट में ड्रॉप डाउन मेनू कैसे क्रिएट करें  रेस्पॉन्सिव मोबाइल फ्रेंडली मीनू बनाना खाएंगे !
सबसे पहले हम शुरू करें उससे पहले आप अपने ब्लॉग पर चले जाइए और थीम्स पर जाकर एडिट एचटीएमएल को खोलें ले खोल ले इसके बाद आप इस पोस्ट पर वापस आ जाइए और इन स्टेप्स को फॉलो करिए

Step no 1 for create Dropdown Menu in bloger

पहले आपको यह जो मैंने कोड दिया हूं इसको आपने कॉपी करके पेस्ट करना है तो अब बात करते हैं कि यह आपने कहा पेस्ट करना है इस कोड को आप कॉपी करें और हेड <head> टैग के नीचे बेस्ट कार दें और इसके बाद Step No 2 को फॉलो करें.
<style>
body {margin:0;font-family:Arial}

.topnav {
  overflow: hidden;
  background-color: #333;
}

.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.active {
  background-color: #4CAF50;
  color: white;
}

.topnav .icon {
  display: none;
}

.dropdown {
    float: left;
    overflow: hidden;
}

.dropdown .dropbtn {
    font-size: 17px;    
    border: none;
    outline: none;
    color: white;
    padding: 14px 16px;
    background-color: inherit;
    font-family: inherit;
    margin: 0;
}

.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 {
    float: none;
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

.topnav a:hover, .dropdown:hover .dropbtn {
  background-color: #555;
  color: white;
}

.dropdown-content a:hover {
    background-color: #ddd;
    color: black;
}

.dropdown:hover .dropdown-content {
    display: block;
}

@media screen and (max-width: 600px) {
  .topnav a:not(:first-child), .dropdown .dropbtn {
    display: none;
  }
  .topnav a.icon {
    float: right;
    display: block;
  }
}

@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
  .topnav.responsive .dropdown {float: none;}
  .topnav.responsive .dropdown-content {position: relative;}
  .topnav.responsive .dropdown .dropbtn {
    display: block;
    width: 100%;
    text-align: left;
  }
}
</style>

Step no 2 for create Dropdown Menu in bloger

इसमें भी आपको ऊपर वाला काम करना है लेकिन इस कोड को आपने कई और पेस्ट करना है. तो अब इस कोड को कॉपी पेस्ट के बारे में जान लेते हैं. इस कोड को आपने कॉपी करना है और वहां पेस्ट करने हैं जहां पर आपके पिछले  मीनू का कोड है वहां से पुराना कोड हटा दे और यह नीचे दिए Code को पेस्ट कर दे और अपनी मर्जी मुताबिक मीनू के नेम और सब सब नेम चेंज कर लें और उसने अपने लिंक डाल दे

<div class="topnav" id="myTopnav">
  <a href="#home" class="active">Home</a>
  <a href="#news">News</a>
  <a href="#contact">Contact</a>
  <div class="dropdown">
    <button class="dropbtn">Dropdown 
      <i class="fa fa-caret-down"></i>
    </button>
    <div class="dropdown-content">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
    </div>
  </div> 
  <a href="#about">About</a>
  <a href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="myFunction()">&#9776;</a>
</div>
<script>
function myFunction() {
    var x = document.getElementById("myTopnav");
    if (x.className === "topnav") {
        x.className += " responsive";
    } else {
        x.className = "topnav";
    }
}
</script>

Note:- अगर और भी फ्री की से जानना चाहते हैं तो यह वीडियो देख ले.