Blogger Website Scroll Menu Bar Html & Css Code

Blogger Website में Scrolling Menu Bar Html & Css Code

अपनी ब्लॉग वेबसाइट में आकर्षित और नई-नई चीजें कौन नहीं लगाना चाहता, जब नए ब्लॉगर के लिए बात आती है। Html और css से नए-नए फोंट, मेनू बार या कुछ भी बनाने की तो वह यह नहीं कर पाते हैं।

क्योंकि उन्हें Html और css का अच्छा ज्ञान नहीं होता है, वह अपने हिसाब से जो करना चाहते हैं, वह नहीं कर पाते हैं।

और इन्हीं में से एक यह भी है, की बहुत सारे ब्लॉगर अपने सिंपल ब्लॉग पर एक अच्छा Scroll मेन्यु बार लगाना चाहते हैं।

और यदि आप भी अपने ब्लॉग पर स्क्रोल मेनू बार लगाना चाहते हैं, तो आप बिल्कुल सही जगह पर आए हैं।

Blogger Website Scroll Menu Bar Html Code, blog header Scrolling Menu Html & Css Code, left-right Scroll Menu Html & Css Code

इस पोस्ट में मैं आपको कुछ आसान Html और css कोड के बारे में बताने वाला हूं। जिसकी मदद से आप अपने ब्लॉग पर एक अच्छा Scrolling मेनू बार क्रिएट कर सकते हैं।

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

तो चलिए जानते हैं। हम उन एचटीएमएल और सीएसएस कोड के बारे में, और इसके साथ ही हम जानेंगे, कि आप उसे अपने ब्लॉग के Header पर कैसे सेट कर सकते हैं। और उसमें अपने ब्लॉग के लेबल नाम और उसके लिंक कैसे सेट कर सकते हैं।

Blogger Website Scroll Menu Bar Code

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

• Css
div.scrollmenu {
  background-color: #f3f3f3;
  overflow: auto;
  white-space: nowrap;
}
div.scrollmenu a {
display: inline-block;
  color: black;
  text-align: center;
  border: 2px solid #cccccc;
  padding: 7px 10px;
  font-weight: bold;
  text-decoration: none;
}
div.scrollmenu a:hover {
  background-color: #777;
}

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

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

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

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

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

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

• Html
<div class="scrollmenu">
  <a href="#">Home</a>
  <a href="#">Home</a>
<a href="#">Home</a>
<a href="#">Home</a>
<a href="#">Home</a>
</div>

फिर आपको इस Html कोड में अपने ब्लॉगर लेबल के लिंक और लेबल के नाम ऐड करने है। जानने के लिए नीचे की स्लाइड में पढ़ें।

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

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

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

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

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

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

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

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

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

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

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

यदि आपका कोई प्रश्न है, तो नीचे 👇 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 »