Blogspot Blog Me Responsive Dropdown Menu Add Or Edit Kaise Kare ?

--

Blogspot Blog बनाने के बाद हमे उसका डिज़ाइन ज़रूर Change कर लेना चाहिए.ब्लॉग को एक अच्छे से Theme के साथ Customize कर देना चाहिए क्योकि इससे ब्लॉग को एक बेहतर लुक मिलती है.आज की इस पोस्ट में भी हम Blog Designing की बात करने जा रहे है जिसमे हम Blogger Blog में Responsive Dropdown Menu Add kaise करते है व Menu Navbar को Edit कैसे करे,इसकी पूरी जानकारी आपको देंगे.

बहुत से नए ब्लॉगर जो अपना ब्लॉग Blogspot पर Create करते है उनको Blog में Navigation Set कैसे करते है या ब्लॉग में Navigation Set करना क्यों ज़रूरी होता है उनको इसकी Knowledge नहीं होती है,जिससे उनके ब्लॉग को विजिट करने वाले Visitors को ब्लॉग को नेविगेट करने में दिक्कत होती है.तो इस पोस्ट में हम आपको ब्लॉग नेविगेशन से सम्बंधित सभी मह्त्वपूर्ण जानकारियाँ देने की कोशिश करेंगे.तो आइये शुरुवात करते है.

Blog Me Responsive Dropdown Menu Add क्यों करना चाहिए ?

देखिये सबसे पहले यह जानते है की Blog में Menu क्या होता है ? Menu किसी भी ब्लॉग में एक Navigation BAR होता है,जिसमें उस ब्लॉग के सभी मुख्य Pages,Category की Links Add होती है,जिसके माध्यम से उस ब्लॉग पर आने वाला हर एक विजिटर ब्लॉग के हर पेज तक आसानी से पहुँच सकता है.

यानि की ब्लॉग पर आने वाले User को ब्लॉग नेविगेट करने में आसानी हो इसके लिए ब्लॉग में मेनू ऐड किया जाता है.आप हमारे ब्लॉग में देख सकते है की ब्लॉग के लोगो के बिल्कुल नीचे हमने Responsive Menu Bar Add किया है.जिसमे About,Contact,Sitemap जैसे सभी मह्त्वपूर्ण पेजेज की Links Add है.जिससे यूजर उन तक आसानी से पहुँच सकता है.

ठीक इसी तरह आपने भी बहुत से ब्लॉग में इस तरह के Navigation Bar को देखा होगा क्योकि यह ब्लॉग को User Friendly Interface प्रदान करता है.इस कारण यदि आपके ब्लॉग में यह Important Widget Add नहीं है तो आपको इसे जल्द से जल्द ब्लॉग में Add कर लेना चाहिए.

Responsive Dropdown Menu Vs Simple Navigation Menu Bar कोनसा Use करना चाहिए ?

हमेसा Responsive Menu ही Add करना चाहिए.क्योकि यह Device के Screensize के अनुसार अपने आप Automatic Width Set कर लेता है.यानि की चाहे आपका ब्लॉग कोई Desktop Computer में Open करे या मोबाइल में यह Properly सही Work करता है.जिससे यूजर को किसी भी तरह की कोई परेशानी नहीं होती है.

Blogspot Blog Me Responsive Dropdown Menu Add Kaise Kare ?

अब उपरोक्त सभी मह्त्वपूर्ण जानकारी प्राप्त करने के बाद हम आपको Step By Step यह जानकारी देने वाले है की kaise आप Dropdown मेनू को ब्लॉग में ऐड कर सकते हो.Blogspot Blog में इसे Add करना बिल्कुल आसान है,आपको बाद यह Simple Steps Follow करने है.

Step 1 - सबसे पहले आप Blogger डैशबोर्ड में लॉग इन करने के बाद Layout वाले आप्शन पर क्लिक करे,

Step - 2 - Layout Option पर क्लिक करने के बाद आपको Header के नीचे Add A Gadget पर क्लिक करना है.Menu को हमेशा हैडर के नीचे ही Set करना चाहिए.इसी कारण हम आपको Header के नीचे Add A Gadget पर क्लिक करने के लिए कह रहे है.क्योकि Layout Page में आपको ADD A Gadget का आप्शन बहुत से स्थानों पर देखने को मिलेगा.

Step 3 - Gadget Windows Open होने के बाद आपको उसमे HTML/JavaScript वाले Widget पर क्लिक करना है.

Step - 4 - HTML/JavaScript पर क्लिक करने के बाद एक नयी विंडो ओपन होगी.इसका आपको कुछ इस तरीके से इस्तेमाल करना है.

1 - Title - इसमें कुछ न लिखे.इसको खाली रहने दे.

2 - Content - इसमें आपको नीचे दिये गए Code Box से Responsive Drodown Menu का Code Copy करके इसमें Paste कर देना है.

3 - Save - Code Paste करने के बाद Save पर क्लिक करके Menu Widget को सेव कर दे.अब यह HTML/Javascript की विंडो आटोमेटिक रूप से बंद हो जाएगी.अब आप अपने ब्लॉग को Open करके देख सकते है की,उसमे Navigation Menu Bar Add हो गया है.आप ब्लॉग को Computer व Mobile दोनों में ओपन करके देख सकते है की यह Dropdown Menu Work कर रहा है या नहीं.

- Coding For Responsive Dropdown Menu -

<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="#about">About</a> <a href="#about">About</a> <a href="javascript:void(0);" class="icon" onclick="myFunction()">☰</a> </div> <style>/* Add a black background color to the top navigation */ .topnav { background-color: #333; overflow: hidden; } /* Style the links inside the navigation bar */ .topnav a { float: left; display: block; color: #f2f2f2; text-align: center; padding: 14px 16px; text-decoration: none; font-size: 17px; } /* Add an active class to highlight the current page */ .active { background-color: #4CAF50; color: white; } /* Hide the link that should open and close the topnav on small screens */ .topnav .icon { display: none; } /* Dropdown container - needed to position the dropdown content */ .dropdown { float: left; overflow: hidden; } /* Style the dropdown button to fit inside the topnav */ .dropdown .dropbtn { font-size: 17px; border: none; outline: none; color: white; padding: 14px 16px; background-color: #333; font-family: inherit; margin: 0; } /* Style the dropdown content (hidden by default) */ .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; } /* Style the links inside the dropdown */ .dropdown-content a { float: none; color: black; padding: 12px 16px; text-decoration: none; display: block; text-align: left; } /* Add a dark background on topnav links and the dropdown button on hover */ .topnav a:hover, .dropdown:hover .dropbtn { background-color: #555; color: white; } /* Add a grey background to dropdown links on hover */ .dropdown-content a:hover { background-color: #ddd; color: black; } /* Show the dropdown menu when the user moves the mouse over the dropdown button */ .dropdown:hover .dropdown-content { display: block; } /* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */ @media screen and (max-width: 600px) { .topnav a:not(:first-child), .dropdown .dropbtn { display: none; } .topnav a.icon { float: right; display: block; } } /* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */ @media screen and (max-width: 600px) { .topnav.responsive {position: relative;} .topnav.responsive a.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><script> /* Toggle between adding and removing the "responsive" class to topnav when the user clicks on the icon */ function myFunction() { var x = document.getElementById("myTopnav"); if (x.className === "topnav") { x.className += " responsive"; } else { x.className = "topnav"; } }</script>

Blog Me Navigation Menu Bar Ko Edit Kaise Kare ? Complete Jankari

जैसा की हमने आपको ऊपर Simple Steps में बताया है की कैसे आप ब्लॉग में मेनू ऐड कर सकते है,तो हमे उम्मीद है की आपने Responsive Menu Blog में Add कर भी लिया होगा.अब हम उस Menu को Edit करने की जानकारी देने वाले है.जिससे आप उसमे अपने ब्लॉग की Important Labels,Pages की Link Add कर सके.तो इसके लिए आपको यह प्रोसेस Follow करना होगा.


Step - 1 - Layout में जाकर जहाँ पर आपने Menu Gadget Add किया था वहाँ उसके सामने Edit पर क्लिक करे.


Step - 2 - Edit पर क्लिक करने के बाद एक विंडो ओपन होगी.जिसमे Menu Bar की Coding होगी.इसमें आपको कुछ इस प्रकार से अपने ब्लॉग की Links Add करनी है.


आपको Coding में कुछ इस प्रकार की Coding दिखाई देंगी.

<a href="#news">News</a>

अब आपको इसमें #news के स्थान पर अपने ब्लॉग के पेज या Category का URL Link Add करना है व News के स्थान पर उस पेज या Category का नाम लिखना है जिस पर यूजर क्लिक करे तो वह URL Open हो जाये.कुछ इस प्रकार -

  <a href="https://www.amojeet.in.net/p/contact-us.html">Contact</a>

तो इस प्रकार आप इस Menu Coding में अपने ब्लॉग की Links Add कर सकते है.ध्यान दे की Links Add करने के बाद Save पर क्लिक करे Widget को Save ज़रूर कर दे.


Step - 3 - यदि आप Dropdown Menu Bar का Background Colour Change करना चाहते है तो आप मेनू बार की कोडिंग में #333 को अपने मनपसंद कलर के हिसाब से Replace कर सकते है.जैसे की #333 कोड हलके काले रंग के लिए है यदि आप इसके स्थान पर Red लिख देंगे तो Menu Bar का Background colour काले से बदलकर लाल रंग का हो जायेगा.


लेकिन आप सोच रहे होंगे की आपको Colour का Code कैसे पता चलेगा की Red कलर के लिए HTML Code क्या है,तो इसके लिए आप हमारे HTML Colour Code Generator Tool का इस्तेमाल कर सकते है.

• HTML Colour Code Picker Generator Tool
• Blogspot Blog Me Stylish Code Box Add Kaise Kare ?
• Robots.Txt Kya Hai,Blogspot Me Add Kaise Kare ?

तो हम उम्मीद करते है की आज की Blog Designing से Related पोस्ट आपको ज़रूर पसन्द आयी होगी.यदि आपको Blogspot Blog Me Responsive Dropdown Menu Add Or Edit करने में कोई Problem आ रही है तो आप नीचे Comment Box में कमेंट करे.हम आपकी हर संभव मदद करेंगे.Blogging Related Updates,Tips के लिए Amojeet Blog का Free Newsletter भी ज़रूर Subscribe कर ले.Thanks For Reading This Post,Good Bye.

-*-

जानकारी अच्छी लगी है तो Facebook Page Like जरूर करे