Blogger में Dropdown Menu कैसे बनाये? How to Add Submenu in Blogger Hindi

📌 Blogger में Dropdown Menu कैसे बनाएं? – पूरी Step-by-Step Guide हिंदी में

अगर आप Blogger (Blogspot) यूज़र हैं और चाहते हैं कि आपके Menu Bar में Submenu या Dropdown Menu हो –
जैसे:

Home | Blogging ▼  
              ├ Blogging Tips  
              ├ SEO Guide  
              └ Google AdSense

तो आप बिलकुल सही जगह आए हैं।

इस आर्टिकल में जानिए:

Blogger में Dropdown Menu क्या होता है?
Submenu बनाने के लिए HTML/CSS कोड
Blogger Theme में इसे Add कैसे करें
Mobile-Friendly & SEO-Friendly Menu Setup

✅ Dropdown Menu क्या है?

Dropdown Menu या Submenu वह मेनू होता है जो आपके Navbar (Top Menu Bar) में किसी एक आइटम पर Hover करने से नीचे खुलता है।

यह ब्लॉग को:

Professional Look देता है
User Navigation आसान करता है
Bounce Rate घटाता है
SEO में सुधार करता है

🧑‍💻 Blogger में Dropdown Menu कैसे Add करें?

🔧 Step 1: Blogger में Login करें

Blogger.com पर जाएं
अपने ब्लॉग को Select करें
Left Panel से “Theme” > Edit HTML पर क्लिक करें

🧾 Step 2: CSS Code Add करें

अब नीचे दिया गया CSS कोड <head> टैग के ठीक पहले </head> से पहले पेस्ट करें:

<style>
/* Main Menu Style */
.navbar ul {
  list-style: none;
  padding: 0;
  margin: 0;
  background: #333;
  display: flex;
}

.navbar ul li {
  position: relative;
}

.navbar ul li a {
  display: block;
  padding: 10px 20px;
  color: white;
  text-decoration: none;
}

.navbar ul li:hover {
  background: #444;
}

/* Dropdown Submenu Style */
.navbar ul li ul {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: #444;
  min-width: 180px;
}

.navbar ul li:hover ul {
  display: block;
}

.navbar ul li ul li a {
  padding: 10px;
  color: white;
}
</style>

🧾 Step 3: HTML Menu Structure Add करें

अब <body> के अंदर या जहां भी आपका Navbar दिखता है वहां नीचे का HTML कोड जोड़ें:

<div class="navbar">
  <ul>
    <li><a href="/">Home</a></li>
    <li>
      <a href="#">Blogging</a>
      <ul>
        <li><a href="/p/blogging-tips.html">Blogging Tips</a></li>
        <li><a href="/p/seo-guide.html">SEO Guide</a></li>
        <li><a href="/p/google-adsense.html">Google AdSense</a></li>
      </ul>
    </li>
    <li><a href="/p/about.html">About</a></li>
    <li><a href="/p/contact.html">Contact</a></li>
  </ul>
</div>

✅ अपने पेज URLs और नाम अपनी साइट के अनुसार एडजस्ट करें।

🧪 Step 4: Save करें और ब्लॉग देखें

अब Save बटन पर क्लिक करें और अपने ब्लॉग को ओपन करके Dropdown Menu को टेस्ट करें।
Hover करने पर Submenu नीचे आना चाहिए।

📱 Mobile-Friendly Dropdown Menu Tips

Blogger के कुछ Themes (जैसे Contempo, Soho) में Responsive Menu पहले से होता है।
अगर Dropdown Menu Mobile पर काम नहीं कर रहा हो तो आप JavaScript से Toggle Menu बटन भी ऐड कर सकते हैं।

📌 Advance JS Toggle Menu चाहिए? मैं आपके लिए Responsive JS Code भी बना सकता हूँ।

❓FAQs – Dropdown/Submenu in Blogger

Q1: क्या Blogger में बिना कोडिंग के Dropdown Menu Add हो सकता है?
👉 हां, कुछ Premium Templates में पहले से होता है, लेकिन Free Templates में कोडिंग करनी पड़ती है।

Q2: क्या Dropdown Menu SEO में Help करता है?
👉 बिल्कुल! यह Site Structure और Internal Linking को Strong करता है।

Q3: Submenu में कितने लिंक डाल सकते हैं?
👉 कोई Limit नहीं है, लेकिन 3–5 अच्छे UX के लिए Best हैं।

🔚 निष्कर्ष

Blogger में Dropdown Menu या Submenu जोड़ना एक आसान लेकिन ज़रूरी SEO Step है।
अगर आप चाहते हैं कि आपका ब्लॉग प्रोफेशनल दिखे और विज़िटर लंबे समय तक रुके, तो ये Menu Structure ज़रूर अपनाएं।