blog website simple menu bar code

ब्लॉगर वेबसाइट मे एक सिंपल मैन्यू बार कैसे बनाएं?

नमस्कार एक बार फिर आपका स्वागत है, हमारे ब्लॉग sikhoinall.com में और आज कि इस पोस्ट में हम blogger वेबसाइट मैं एक सिंपल मेनू बर बनाना सीखेंगे। जिसे आप अपने होम, अबाउट, प्राइवेसी और अन्य पेजस के लिए उपयोग कर सकते हैं।

blog website simple menu bar code, ब्लॉगर वेबसाइट मे एक सिंपल मैन्यू बार कैसे बनाएं, blog website menu bar html or css code

इससे पहले कि पोस्ट में हमने एक scroll मेनू बार के बारे में जाना था। जिसमें हमने लेफ्ट-राइट scroll होने वाला एक बहुत ही अच्छा मेनू बार क्रिएट किया था। यदि आपने वह पोस्ट अभी तक नहीं पढ़ी हैं, तो आप उस पोस्ट को यहां पर जाकर पढ़ सकते हैं।

और आज इस पोस्ट में हम बिना Scroll होने वाला एक आसान सिंपल मैन्यू बार बनाएंगे। जिसमें हम अपने ब्लॉग होमपेज, about us page, privacy policy page या कॉन्टैक्ट फॉर्म पेज के लिंक ऐड करेंगे, और उसे अपने ब्लॉग वेबसाइट पर लगाएंग।

तो चलि बिना समय बर्बाद किए हम मैन्यू बार बनाने के बारे में जानते है। और इसके साथ ही यह भी जानेंगे कि उसके अंदर अपने होमपेज, about us page, privacy policy page या अन्य पेज के लिंक कैसे जोड़ सकते हैं, और उसे अपने ब्लॉग में कैसे सेट कर सकते हैं।

ब्लॉगर वेबसाइट मे एक सिंपल मैन्यू बार कैसे बनाएं?

यहां पर नीचे Css कोड दिया गया है, जो menu bar Html को डिजाइन करता है। और उसे अनुकूलित करता है।

• Css
.bottomnav {
  background-color: #000;
  overflow: hidden;
}
.bottomnav a {
  float: left;
  color: #fff;
  text-align: center;
  padding: 10px 14px;
  text-decoration: none;
  font-size: 19px;
  font-weight: bold;
}
.bottomnav a:hover {
  background-color: #6fa8dc;
  color: black;
}
.bottomnav a.active {
  background-color: #6fa8dc;
  color: white;
}
आप इस Css कोड को एचटीएमएल जावास्क्रिप्ट के जरिए बड़ी आसानी से चला सकते हैं। और आप चाहे तो इसे डायरेक्ट अपने ब्लॉग वेबसाइट की एचटीएमएल कोडिंग में style Css के अंदर लगा सकते हैं।

और इनमें से सबसे आसान तरीका, Html /Javascript है जिसे आप अपने ब्लॉगर Layout के जरिए लागू कर सकते हैं।

ध्यान देंः ऊपर दिए गए सीएसएस कोड को Html /Javascript में लागू करते समय यह <style> और </style> Tag बनाए। और इन दोनों के बीच में ऊपर दिए गए Css कोड को चिपका देंं।  

मेन्यू बार Html कोड

अब मेन्यू बार में लिंक ऐड करने के लिए अपने ब्लॉग के Pages लिंंक जो आप इस menu Bar में लगाना चाहते हैं। उसके लिंक ऐड करने के लिए हमें html लिखना होगा। और इस Html को ऊपर दिया गया css कोड डिजाइन करता है, और उसे एक सिंपल मेन्यू बार बनाता है।

तो आप यहा नीचे दिए गए इस एचटीएमएल कोड को कॉपी कर ले और इसे एचटीएमएल जावास्क्रिप्ट में </style> जो हमने css कोड को अंदर रखने के लिए बनाया था, इसके ठीक नीचे यह एचटीएमएल कोड चिपकाना है।

• html
<div class="bottomnav">
  <a class="active" href="#">Home</a>
  <a href="#">Home</a>
  <a href="#">Home</a>
  <a href="#">Home</a>
</div>
फिर आपको इस Html कोड में अपने ब्लॉग पेज के लिंक और उनके नाम ऐड करने है। जानने के लिए नीचे की स्लाइड में पढ़ें।

ऊपर दिए गए एचटीएमएल कोड में नजर डालें, आपको कुछ इस टाइप के कोड दिखाई दे रहे है।

<a href="#">Home</a>

ऊपर दिए गए Html कोड में इसी तरह के 4 कोड है। और आप इन सभी में अलग-अलग Page के लिंक और उनका नाम जोड़ सकते हैं।

नंबर 1ः उदाहरण के लिए कोड में इस # की जगह अपने ब्लॉग page का लिंक जोड़ें।

नंबर 2ः और इस Home की जगह अपने ब्लॉग page का नाम टाइप करें।

और इसी तरह आप सभी कोड के अंदर अलग-अलग page लिंक और उनके नाम जोड़ सकते हैं।

और इसके साथ ही आप अपने मेन्यू बार में और अधिक page link जोड़ने के लिए नीचे दिए गए इस कोड को वहां कॉपी और पेस्ट कर सकते हैं। और जितने चाहे उतने page link लगा सकते हैं।

<a href="#">Home</a>

तो अधिक page link लगाने के लिए ऊपर दिए गए इसी तरह के कोड के नीचे एक लाइन स्पेस देना है। और इसे पेस्ट करना है। और ऐसे ही आप कहीं सारे पेज लिंक तैयार कर सकते हैं।

और पेज लिंक तैयार होने के बाद आप एचटीएमएल/जावास्क्रिप्ट को सेव कर लीजिए। और फिर लेआउट को सेव कर दीजिए। और आपका मेन्यू बार पूरी तरह से तैयार है।

तो दोस्तों हमें उम्मीद है, कि आपको हमारी यह पोस्ट पसंद आई होगी। और यदि पोस्ट पसंद आई है, तो इसे अपने दोस्तों में 'शेयर' करें ताकि आपके दोस्तों को भी इस पोस्ट के बारे में पता चल सके। और नीचे 'कमेंट' करें, कि आपको हमारी यह पोस्ट कैसी लगी।

यदि आपका कोई प्रश्न है, तो नीचे 👇 Comment बॉक्स में हमें बताएं।

यह भी पढ़ेंः " मोबाइल से फोटो बनाने वाला ऐप | 6 बेस्ट क्वालिटी फोटो एडिटर "
Mobile se photo ka background cut/change kaise kare "
YouTube Channel par profile/Cover Photo kaise lagaye "
मोबाइल से वायरस हटाने वाला ऐप | बस 2 मिनट सभी वायरस गायब "
youtube vedio पर फोटो थंबनेल कैसे लगाए "

Comments



अब यहां पर खोजें

लोकप्रिय पोस्ट:

अनोखी सेटिंग एक हस्त मोबाइल स्क्रीन? Views 👁50.3k
Post Article लिखकर ऑनलाइन पैसे कैसे कमाए? Views 👁39.2k
YouTube से पैसे कमाने के Best 3 तरीके? Views 👁35.9k
Mobile से Photo सुंदर बनाने के लिए 10 Best Apps? Views 👁29.8k
YouTube Channel के बारे में जानकारी? SEO Tips Views 👁24.4k
Automatic फोटो Background चेंज Online? Views 👁21.1k

YouTube Channel Subscribe Now »
Facebook Page Following »