how to create a top menu bar responsive and attractive in blogger site in Hindi

how to create a top menu bar responsive and attractive in blogger site in Hindihow to create a top menu bar responsive and attractive in blogger site in Hindi



Intro:- नमस्कार दोस्तों अगर आप टॉप मीनू बार को रेस्पॉन्सिव बनाना चाहते हैं तो हर एक स्टेप को अच्छी तरह से पढ़े तो चलिए शुरू करते हैं.
तो दोस्तों अगर आपके पास पहले से ब्लॉगर पर अकाउंट है तो उसे ओपन कर ले और Edit html में जाए और इसके बाद नीचे दिए गए स्टेप्स(Steps) को फॉलो करें.

Step no 1  create a top menu bar responsive and attractive in blogger

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

.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;
}

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

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

.topnav .icon {
  display: none;
}

@media screen and (max-width: 600px) {
  .topnav a:not(:first-child) {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;
  }
}
</style>

Step No 2  create a top menu bar responsive and attractive in blogger

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

“और इसके बाद आप इनमें दिए गए मीनू नेम और लिंक्स की जगह अपनी मर्जी से मीनू नेम और उनके लिंक्स डाल देना”
<div class="topnav" id="myTopnav">
  <a href="#home" class="active">Home</a>
  <a href="#news">News</a>
  <a href="#contact">Contact</a>
  <a href="#about">About</a>
  <a href="javascript:void(0);" class="icon" onclick="myFunction()">
    <i class="fa fa-bars"></i>
  </a>
</div>

<script>
function myFunction() {
    var x = document.getElementById("myTopnav");
    if (x.className === "topnav") {
        x.className += " responsive";
    } else {
        x.className = "topnav";
    }
}
</script>
Note:- अगर आप यह सब नहीं कर सकते तो आप मेरी इस पोस्ट पर जाएं यहां आपको पहले से सब कुछ किया हुआ Tamplate मिल जाएगा इसका लिंक यह है =>>

Video tutorial :- अभी भी अगर कोई परेशानी हो तो यह वीडियो देख लें इसमें आपको बारीकी से  सिखाया गया है