blogger में navigation bars कैसे बनाये - ldkalink
Blogger Navigation bars: हर एक blogger यही चाहता है की वह अपने website के लिए अपना खुद का बनाया हुआ थीम यूज़ करे क्यों की अपने तरीके से बनाया हुआ थीम कुछ खास ही होता है क्यों की इस थीम को अपने तरीके से थीम customization किया गया होता है।
इससे पहले वाले आर्टिकल हमने create blogger template from scratch वाले आर्टिकल में कुछ इम्पोर्टेन्ट कोड के बारे में जाना था जो की ब्लॉगर में थीम बनाने के लिए जरुरी कोड होते है।
यदि हम इन कोड्स को ब्लॉगर के edit html वाले सेक्शन थीम बनाते समय ऐड नहीं करेंगे तो यह थीम सेव करने पर एरर शो होता है यदि आपने इस आर्टिकल को अभी तक रीड नहीं किया है तो इसे एक बार जरूर रीड करे।
आप यह तो जानते ही है किसी भी साइट के थीम में navigation bar का होना जरुरी होता है आपने कभी नोटिस भी किया होगा की जब आप search engine में कुछ क्वेरी सर्च करके सर्च रिजल्ट में से किसी web page के टाइटल पर क्लिक करते है तो आप उसके website पर पहुंच जाते है और उसके साइट पर भी नेविगेशन बार लगा होता है।
ज्यादा साइटस पर नेविगेशन बार top पर ही होता है कुछ कुछ साइड पर यह बॉटम में भी लगा होता है तो चलिए अब हम शुरू करते है की blogger में navigation bars कैसे बनाते है इससे पहले ये जान लेते है की नेविगेशन बार आखिर होता क्या है।
 |
| blogger में navigation bars कैसे बनाये |
Navigation bars क्या होता है
नेविगेशन बार दो तरह के होते है पहला vertical navigation bar और दूसरा horizontal navigation bar. नेविगेशन बार आप चाहे तो वेबसाइट के top या bottom या फिर साइड में भी लगा सकते है इस आर्टिकल में हम नेविगेशन बार को टॉप और बॉटम में कैसे लगाते है इसके बारे में बात करने वाले है।
अब यदि आपसे कोई कुछ है की navigation bar किसे कहते है या कहा जाता है यह फिर what is navigation bar in Hindi तो यहाँ पर आपका एक ही जवाब होगा होगा नेविगेशन बार लिंक्स का एक लिस्ट होता है यह horizontal और vertical दोनों तरह का होता है इसका उपयोग एक ही वेबसाइट पर एक सेक्शन से दूसरे सेक्शन में जाने के लिए किया जाता है इसे नेविगेशन बार कहा जाता है।
नेविगेशन बार बनाने के लिए html code के <ul > और <li> elements का उपयोग किया जाता है और इसे css code की सहायता से स्टाइलिश लुक दिया जाता है।
Blogger में Vertical CSS Navigation bars कैसे बनाये
नेविगेशन बार बनाने के लिए HTML की कोड का उपयोग किया जाता है और इसे स्टाइलिश लुक देने के लिए इसमें css कोड इसमें अप्लाई किया जाता है।
Step 01: Add HTML code
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
ऊपर दिए गए links of list के HTML कोड का यूज़ करके इसमें css अप्लाई करके इसे एक स्टाइलिश नेविगेशन बनाये वाले है इसके लिए इस html कोड को ब्लॉगर के एडिट थीम वाले सेक्शन में जाकर </body> सेक्शन के ऊपर पेस्ट करे जैसे की निचे आप देख सकते है:
<body>
<ul>
<li><a class="active" href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</body>
Step 02: Add CSS Code
ऊपर दिए गए html के इस कोड को css के द्वारा स्टाइलिश बनाने के लिए निचे दिए गए कोड का use करते है इस css कोड को ब्लॉगर के edit html वाले सेक्शन में जाकर ]]> </b:skin> के जस्ट ऊपर ही पेस्ट करना है क्यों की सारा css कोड इसी सेक्शन में लिखा जाता है।
CSS Code:
ul {list-style-type: none;margin: 0;padding: 0;width: 25%;background-color: #f1f1f1;height: 100%;position: fixed;}
li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
li a.active {
background-color: #04AA6D;
color: white;
}
li a:hover:not(.active) {
background-color: #555;
color: white;
}
Step 03: Save theme
अब आप अपने थीम को सेव करे आपके सामने थीम successfully का मैसेज शो होगा अब आप अपने ब्लॉग को view करके देखे यह कुछ इस तरह से दिखाई देगा।
Used CSS Code को विस्तार से समझे:
अब हम html कोड के लिए यूज़ किये गए css code के बारे में जान लेते है की कौन सा कोड किसलिए यहाँ उपयोग किया गया है।
जैसे ही हम html कोड को ऐड करके सेव करते है तो लिंक्स के लिस्ट में bullets, margin, padding वेब ब्राउज़र द्वारा बय डिफ़ॉल्ट शो कर दिया जाता है जिसके जरूरत हमें नेविगेशन बार बनाने के लिए नहीं होता है।
तो इसे रिमूव करने के लिए कुछ कोड का उपयोग किया जाता है और साथ ही कुछ कोड का उपयोग इसे दिखने में अच्छा बनाने के लिए भी किया जाता है।
<ul> के लिए उपयोग किये गए कोड:-
- list-tyle-type :none; - इसका उपयोग करने लिस्ट में से बुलेट्स को रिमूव किया जाता है।
- margin: 0; - इसका उपयोग Margie हटाने के लिए किया जाता है।
- pedding: 0; - इसका उपयोग text के चारो ओर के स्पेस को कम या ज्यादा करने के लिए किया जाता है।
- width: 25 %; - इसका उपयोग लिंक्स एरिया को बढ़ने घटाने के लिए किया जाता है इसे हम % या px दोनों में लिख सकते है अभी यह पुरे पेज के सिर्फ 25 % एरिया ही कवर करेगा।
- background-color:#f1f1f ; - इसका उपयोग लिंक्स के पीछे बैकग्राउंड के कलर के लिए किया जाता है।
- height: 100%; - यदि लिंक लिस्ट की height 100 % रखते है तो यह पेज का पूरा एरिया कवर करता है।
- position: fixed; - यह लिस्ट को fixed करके रखता है स्क्रॉल करने पर।
- overflow: auto; - यदि sidenav बार पर बहुत ज्यादा कंटेंट है तो इसे ऑटो करने पर स्क्रॉल बनाये रखने में हेल्प करता है।
- display:block; - लिंक्स को एक ब्लॉक में रूप में शो करने के लिए इसका उपयोग किया जाता है ताकि यह लिस्ट सही तरीके से क्लिकेबल दिखाई दे।
- color:#000; - इससे लिंक्स में text का कलर को शो करता है।
- pedding:8px 16px; - इसमें पहले px का उपयोग text के ऊपर और निचे स्पेस छोड़ने के लिए तथा सेकंड px लेफ्ट राइट से स्पेस बनाने के लिए किया जाता है।
- text-decoration:none; - यदि टेक्स्ट का डेकोरेशन नहीं करना होता है तो इसे none रखते है।
- a.active - जिस लिंक को हम एक्टिव रखना चाहते है इसके लिए बैकग्राउंड में कलर का कोड लिखते है और कलर में टेक्स्ट का कलर लिखा जाता है।
- a:hover - इसका उपयोग माउस पॉइंटर को दूसरे लिंक पर ले जाते ही इसका बैकग्राउंड और टेक्स्ट कलर को चेंज करने के लिए किया जाता है।
<div style="margin-left:25%;padding:1px 16px;height:1000px;">
<h2>fixed full height side nav </h2>
<h3>आज हमने sticks full height का side nav बनाना सीखा है, इसे एक बार स्क्रॉल करके देखे </h3>
<p> margin-left:25% लिखा है इसका मतलब है की अब हम 25% हिस्सा छोड़कर बचे हुए एरिया में काम कर रहे है क्यों की 25 % एरिया side nave यही वर्टीकल नेविगेशन के लिए यूज़ किया जा चूका है </p>
<p> padding का यूज़ करके ऊपर निचे दाए बाये थोड़ा स्पेस छोड़ दिया जाता है </p>
<p> height:1000px तक का एरिया शो होगा इसे % में भी लिखा जा सकता है </p>
<p>ये आर्टिकल भी पढ़े </p>
<p>about us page कैसे बनाये </p>
<p>author profile add कैसे करे </p>
<p>Blogger में Hindi typing कैसे करे </p>
</div>
Blogger में Horizontal CSS Navigation bars कैसे बनाये:
li {
display: inline;
}
- display: inline; - बय डिफ़ॉल्ट रूप से जो <li> एलिमेंट्स होते है वे ब्लॉक एलिमेंट्स होते है जो एक के निचे एक शो होते है इसलिए सारे आइटम्स को एक लाइन में दिखाने लिए इसका उपयोग किया जाता है।
li {
float: left;
}
a {
display: block;
padding: 8px;
background-color: #dddddd;
}
Code को विस्तार से समझे:
- float: left; - इसका उपयोग ब्लॉक एलिमेंट्स को एक दूसरे के साइड में एक लाइन में सेट करने के लिए किया जाता है।
- display: block;- यह हमें pedding specify जैसे की height, width etc. को चेंज करने के अनुमति देता है।
- padding: 8px; - इसका उपयोग प्रत्येक <a> एलिमेंट्स के बीच pedding के लिए किया जाता है ताकि यह दिखने में थोड़ा अच्छा लगे।
- प्रत्येक <a> एलिमेंट्स के बैकग्राउंड कलर के लिए इसका यूज़ किया जाता है।
ul {
background-color: #dddddd;
}
Border के लिए code
li {
border-right: 1px solid #bbb;
}
li:last-child {
border-right: none;
}
Fixed Horizontal navigation bar के लिए code
Fixed top के लिए
ul {
position: fixed;
top: 0;
width: 100%;
}
Fixed bottom के लिए
ul {
position: fixed;
bottom: 0;
width: 100%;
}
आज इस आर्टिकल में हमने जाना की blogger में navbar कैसे बनाते है जिसमे हमें वर्टीकल और हॉरिजॉन्टल दोनों के बारे में बात की और कैसे menu को fix किया जाता है इसके बारे में भी जाना है।
दोस्तों यदि यह पोस्ट आपके लिए थोड़ा भी हेल्पफुल रहा होता तो इसे Facebook, Instagram, twitter जैसे सोशल साइट्स पर अपने दोस्तों के साथ जरूर शेयर करे।
नेक्स्ट आर्टिकल में हम जानेंगे की कैसे blogger में navigation bar को responsive बनाया जाता है ताकि नेविगेशन मेनू किसी भी डिवाइस में ओपन करने पर यह एक प्रॉपर तरीके से ऑरेंज हो जाये।
टिप्पणियाँ
एक टिप्पणी भेजें
please do not enter any spam link in the comment box.