Blog Post Article में Text स्लाइड बार कैसे लगाएं, हाथ से स्लाइड होने वाला लगाएं।
क्या आप अपने ब्लॉग पोस्ट में हाथ से स्लाइड होने वाला टेक्स्ट स्लाइड बार लगाना चाहते हैं। ताकि जब आप अपने उपयोगकर्ताओं को कुछ जरूरी कोड या अन्य जानकारी दे, जिसे एक स्लाइड बार में ऐड करके अच्छे से समझाया जा सके। इसीलिए आप ब्लॉग पोस्ट में टेक्स्ट स्लाइड बार लगाना चाहते हैं।तो आप बिल्कुल सही पोस्ट पर आए हैं, आज इस पोस्ट में आप जानेंगे कि आप अपने "ब्लॉग पोस्ट में टेक्स्ट स्लाइड बार कैसे लगा सकते हैं"। तो इस पोस्ट को अंत तक पढ़े और पढ़ने का आनंद लें।
सच में बहुत अच्छा लगता है जब हम अपने उपयोगकर्ताओं को अपने ब्लॉग पर अलग-अलग डिजाइन अलग-अलग काम करके कुछ अच्छा दिखाकर, बनाकर या समझा कर बनाए रखते हैं।
ताकि वह हमेशा हमारे साथ जुड़े रहे, और हमें मोटिवेशन करते रहें। यही तो हमारा और हमारी साइट पर आने वाले आगंतुक का एक मजबूत रिश्ता है, जिसे हमें हमेशा बनाए रखना है।
ताकि हम इसी के चलते इंटरनेट की दुनिया में अपना एक अच्छा मुकाम हासिल कर सकें, जिस लिए हम इतना कुछ करते हैं, वह पा सके।
लेकिन हम में से कहीं ब्लॉगर हमेशा यही सोचकर आस छोड़ देते हैं, कि उन्हें कुछ नहीं आता हैं। यह जरूरी नहीं है, कि एक ब्लॉग वेबसाइट पर काम करने के लिए एचटीएमएल, सीएसएस, जेक्वेरी से लेकर सब कुछ आने चाहिए।
सच में जब मैंने ब्लॉगिंग करना शुरू किया था। तब मुझे ब्लॉगिंग क्या होती है, इसमें क्या करते हैं। एचटीएमएल क्या होता है, टेंप्लेट क्या होते हैं। या एचटीएमएल, कोड, सीएसएस, स्क्रिप्ट क्या होते हैं। इनमें से मुझे कुछ भी नहीं आता था।
लेकिन अब मैं एचटीएमएल, सीएसएस, स्क्रिप्ट इन के बारे में बहुत कुछ जान चुका हूं। और अधिक जान रहा हूं। और जो मैं सीखता हूं, पढ़ता हूं, ट्राय करता हूं या जो मेरे दिमाग में आता है। मैं हमेशा अपने विजिटर को उसके बारे में समझाने की कोशिश करता हूं।
ताकि जो भाई लोग इनके बारे में जानना चाहते हैं, वह जान सके और अपनी लाइफ में आगे कदम रख सके।
यह भी पढेंः " चोरी हुए Mobile Phone को Block कैसे करें "
" अपने Mobile IMEI Number का पता कैसे लगाये, जान लीजिए काम आएगा "
" Mobile से Video Editing कैसे करें | 6 Best App के बारे में जाने "
" Mobile Phone से Virus Delete कैसे करें | 4 Best Application "
" मोबाइल से फोटो बनाने वाला ऐप | 6 बेस्ट क्वालिटी फोटो एडिटर "
Blog Post Article में Text स्लाइड बार कैसे लगाएं?
चलिए अब हम अपने मुद्दे पर आते हैं, जो आप सीखने आए हैं। हम वह सिखाते हैं। जो हाथ से स्लाइड होने वाला स्लाइड बार आप लगाना चाहते, यह इतना कठिन नहीं है। मैं यहां पर आपको डायरेक्ट उसका कोड दूंगा। और उसे कैसे एडिट करना है, यानी उसमें आप कुछ भी कैसे चेंज कर सकते हैं? यह सब कुछ मैं आपको यहां पर बताऊंगा।इसलिए आप निश्चिंत रहिए, और इस पोस्ट के अंत तक बने रहिए। और आज कुछ नया जानिए, जो आपके लिए और आपके आगंतुक के लिए कुछ अच्छा साबित हो सकता है।
जिस Slide बार के बारे में आप जानना चाहते हैं, इसे अधिकतर HTML, CSS समझाने वाला या कोई टेक ब्लॉगर जो कभी-कभी एचटीएमएल, सीएसएस का ज्ञान भी शेयर करते है। इस स्लाइड बार कि उन्हें अधिक से अधिक जरूरत होती है।
यहां पर मैं आपको दो तरीकों मैं हाथ से स्लाइड होने वाले स्लाइड बार के दो कोड प्रदान करूंगा।
पहला कोड आपकी पोस्ट के अंदर लेफ्ट, राइट स्लाइड होने वाला स्लाइड बार प्रदर्शित करेगा।
और दूसरा कोड आपकी पोस्ट के अंदर ऊपर, नीचे स्लाइड होने वाला स्लाइड बार प्रदर्शित करेगा।
तो आप पहला स्लाइड बार कोड नीचे देख सकते हैं, और इसे अपने पोस्ट HTML में कॉपी और पेस्ट कर सकते हैं, यह आप कैसे करेंगे? तो चलिए जानते हैं।
स्लाइड बार कोड 1:
<pre style="background: rgb(238, 238, 238); border: 1px solid #ffe599; color: blue; font-family: Consolas, Monaco, Andale Mono, Ubuntu Mono, monospace; font-weight: bold; line-height: 24px; overflow-wrap: normal; overflow: auto; padding: 5px 5px;">
<span style="font-size: 15.57px;">टेक्स्ट यहां पर लिखें</span></pre>तो दोस्तों ऊपर दिए गए कोड को सीधे अपने पोस्ट HTML के अंदर जहां आप स्लाइड बार रखना चाहते हैं, वहां इन्हें पेस्ट करें।
और यह कोड आपकी पोस्ट मैं ऊपर दिए गए अनुसार ही एक स्लाइड बार जोड़ देगा।
यदि आपको इसमें कुछ चेंज करना है, तो आप यह तरीके आजमा सकते हैं।
Background Color चेंज करने के लिए कोड background: rgb(238, 238, 238); मैं rgb(238, 238, 238) की जगह अपना पसंदीदा कलर कोड या कलर नाम डालें। फिर आप देखेंगे, कि स्लाइड बार का बैकग्राउंड कलर चेंज हो चुका है।
Border size और Color चेंज करने के लिए कोड border: 1px Solid #ffe599; पर नजर डालें।
Border Size बढ़ाने के लिए 1px मैं 1 की जगह अधिक अंक डालकर आप बॉर्डर की साइज बडा़ सकते हैं।
और Border Color चेंज करने के लिए #ffe599 की जगह अपना पसंदीदा कलर नाम या कलर कोड दर्ज करके बॉर्डर कलर चेंज कर सकते हैं।
Text Color चेंज करने के लिए कोड color: blue; मैं blue की जगह अपना पसंदीदा कलर नाम या कलर कोड दर्ज करें। फिर आप देखेंगे, कि टेक्स्ट कलर चेंज हो चुका है।
Line height कम या अधिक करने के लिए कोड line-height: 24px; में अंक 24 किस जगह कम या अधिक अंक डालें, और फिर पूर्वावलोकन करें।
Padding लगाएं यानी टेक्स्ट को स्लाइड बार बॉर्डर से दूर रखना। इसके लिए कोड padding: 5px 5px; मैं अंक 5 और 5 की जगह अपने हिसाब से कम या अधिक अंक डालें, और फिर पूर्वावलोकन करें। और देखें की स्लाइड बार बॉर्डर से टेक्स्ट कितना दूर हुआ है।
Text font Size कम या अधिक करने के लिए कोड font-size: 15.57px; में 15.57 की जगह अपने हिसाब से कम या अधिक अंक डालें। और फिर पूर्वावलोकन करें, और देखें कि टेक्स्ट साइज अब कैसी दिखती है।
तो दोस्तों यह बदलाव आपके लिए काफी होंगे, इसमें और कुछ छेड़खानी नहीं करनी है नहीं तो टैक्सट स्लाइड बार काम करना बंद भी कर सकता है।
तो आप दुसरा स्लाइड बार कोड नीचे देख सकते हैं, और इसे अपने पोस्ट HTML में कॉपी और पेस्ट कर सकते हैं।
स्लाइड बार कोड 2:
<pre style="background-color: #f2f2f2; border: 1px solid rgb(251, 237, 187); font-family: Consolas, Courier New, Courier, mono; font-size: 20px; font-stretch: normal; font-variant-east-asian: normal; font-variant-numeric: normal; height: 150px; line-height: normal; overflow-wrap: break-word; overflow: auto; padding: 6px; tab-size: 4; white-space: pre-wrap; word-break: break-word;"><span style="border: 0px; color: blue; margin: 0px; padding: 0px;">टेक्स्ट यहां पर लिखें</span></pre>तो दोस्तों ऊपर दिए गए कोड को सीधे अपने पोस्ट HTML के अंदर जहां आप स्लाइड बार रखना चाहते हैं, वहां इसे पेस्ट करें।
और यह कोड आपकी पोस्ट मैं ऊपर दिए गए अनुसार ही एक स्लाइड बार जोड़ देगा।
यदि आपको इसमें कुछ चेंज करना है, तो आप यह तरीके आजमा सकते हैं।
Background Color चेंज करने के लिए कोड background: #f2f2f2; मैं #f2f2f2 की जगह अपना पसंदीदा कलर कोड या कलर नाम डालें। फिर आप देखेंगे, कि स्लाइड बार का बैकग्राउंड कलर चेंज हो चुका है।
Border size और Color चेंज करने के लिए कोड border: 1px Solid rgb(251, 237, 187); पर नजर डालें।
Border Size बढ़ाने के लिए 1px मैं 1 की जगह अधिक अंक डालकर आप बॉर्डर की साइज बडा़ सकते हैं।
और Border Color चेंज करने के लिए rgb(251, 237, 187) की जगह अपना पसंदीदा कलर नाम या कलर कोड दर्ज करके बॉर्डर कलर चेंज कर सकते हैं।
Text font Size कम या अधिक करने के लिए कोड font-size: 20px; में 20 की जगह अपने हिसाब से कम या अधिक अंक डालें। और फिर पूर्वावलोकन करें, और देखें कि टेक्स्ट साइज अब कैसी दिखती है।
Box Height स्लाइड बार बॉक्स की हाइट कम या अधिक करने के लिए कोड height: 150px; मैं 150 की जगह कम या अधिक अंक डालें। फिर आप देखेंगे, कि Box Height बदल चुकी है।
Line height यहां पर लाइन हाइट Normal रखी गई है। Line height का काम दो लाइनों के बीच में स्पेस देना है। यदि आप इस नॉर्मल line height से खुश नहीं है, और आप इसे चेंज करना चाहते हैं। तो कोड line-height: normal; में normal कि जगह कुछ इस तरह से 24px कोड डालें। और फिर पूर्वावलोकन करें।
Padding लगाएं यानी टेक्स्ट को स्लाइड बार बॉर्डर से दूर रखना। इसके लिए कोड padding: 5px; मैं अंक 5 की जगह अपने हिसाब से कम या अधिक अंक डालें, और फिर पूर्वावलोकन करें। और देखें की स्लाइड बार बॉर्डर से टेक्स्ट कितना दूर हुआ है।
Text Color चेंज करने के लिए कोड color: blue; मैं blue की जगह अपना पसंदीदा कलर नाम या कलर कोड दर्ज करें। फिर आप देखेंगे, कि टेक्स्ट कलर चेंज हो चुका है।
Text लिखे तो कोड के अंदर टेक्स्ट लिखने के लिए ऊपर दिए गए कोड पर एक नजर डालें। मैंने इसमें टेक्स्ट यहां पर लिखें का एक संदेश दर्ज कर रखा है, आप इसे हटा कर अपना टेक्स्ट लिख सकते हैं।
तो दोस्तों यह बदलाव आपके लिए काफी होंगे, इसमें और कुछ छेड़खानी नहीं करनी है, नहीं तो टैक्सट स्लाइड बार काम करना बंद भी कर सकता है।
यह भी पढ़ें: " Blog Post में Table तालिका कैसे बनाये - डिब्बे दार Table बनाये "
" Post Article में Text Background Color Change कैसे करें | Background tip "
" Meesho Se paise Kaise Kamaye - meesho Reselling Tutorial "
" Paid Blogging कैसे करें, Best Paid Blogger Platform "
" Amazon.com से पैसे कैसे कमाए | Become an Affiliate "
" Blog post Article में Line Add | 8 Best Design hr रेखाएं "
" Blogger Blog में Amp Set up कैसे करें - Amp Page बनाए "
तो दोस्तों हमें उम्मीद है, कि आपको हमारी यह पोस्ट पसंद आई होगी। यदि पोस्ट पसंद आई है, तो इसे अपने दोस्तों में शेयर करें। और नीचे कमेंट करें, कि आपको हमारी यह पोस्ट कैसी लगी।
और यदि आपका कोई प्रश्न है, तो नीचे कमेंट बॉक्स में हमें जरूर बताएं।
Comments
Post a Comment