Post Article मैं Text का Background Color चेंज कैसे करें?
तो आज आप फिर कुछ नया सीखना चाहते हैं, अपनी पोस्ट की खूबसूरती बढ़ाने के लिए, अपने उपयोगकर्ताओं का ध्यान अपनी पोस्ट की और आकर्षित करना चाहते हैं। अपने आंगतुक को अपने ब्लॉग पर रोमांचित रखना चाहते हैं। और पोस्ट में अलग-अलग डिजाइन बनाना टेक्स्ट का बैकग्राउंड कलर चेंज करना चाहते है।तो आज इस पोस्ट में आप जानेंगे, की पोस्ट आर्टिकल मैं Text का बैकग्राउंड कलर चेंज कैसे करते हैं। तो इस पोस्ट को लास्ट तक पढ़े, और पढ़ने का आनंद लें।
अक्सर बात यह है, कि हमें ब्लॉग पोस्ट के अंदर भी Text का Background Color चेंज करने के लिए एक विकल्प मिलता है। लेकिन वह विकल्प सिर्फ और सिर्फ एक लाइन का बैकग्राउंड कलर चेंज करता है। यदि हम अधिक लाइन का कलर चेंज करते हैं, तो बीच में लाइन स्पेस दिखाई देता है।
उदाहरण: नई पोस्टों का अपने ई-मेल बॉक्स में अपडेट प्राप्त करने के लिए, हमारी साइट की सदस्यता ले और हमेशा New Latest पोस्ट का अपडेट प्राप्त करें।
वैसे यह भी अच्छा है, और मैं भी इसे कभी-कभी अपनी पोस्ट में एकल लाइन का बैकग्राउंड कलर चेंज करने के लिए इसका उपयोग करता हूं।
लेकिन बात तब आती है, जब हम यह सोचते हैं, कि इन लाइन बैकग्राउंड कलर के बीच में जो स्पेस होता है। इसे कैसे खत्म किया जाए। यही बात सभी नए ब्लॉगरों को सताती है।
तो इस स्पेस को खत्म करने के लिए आपको बिल्कुल अलग कोड जोड़ने की जरूरत है। अलग से कोड जोड़कर आप कहीं Text को एक साथ बैकग्राउंड कलर में बदल सकते हैं। और इसमें लाइन के बीच में स्पेस भी नहीं रहता है।
Text का Background Color चेंज कैसे करें?
चलिए मैं आपको यहां पर एक डायरेक्ट tip कोड प्रदान करता हूं। जिसे आप अपनी पोस्ट Html के अंदर पेस्ट करेंगे, और मेरे द्वारा लिखे गए, Text की जगह आप अपना लेेेख लिखेंगे, चलिए जानते हैं। कैसेःकोडः
<div class="tip" style="background-color: #9fc5e8; border-radius: 8px; border: none;
color: #3c4043; font-family: Roboto, "Helvetica Neue", Helvetica, sans-serif;
font-size: 17px; margin: 0.25rem 0px 0.75rem; min-height: initial; outline: none; padding: 4px 4px 4px 4px;">
<div class="no-margin" style="margin: 0px; outline: none;">आप अपना टेक्स्ट यहां पर लिखें</div></div>तो दोस्तों ऊपर किए गए इस कोड को पूरा कॉपी करें, और अपने पोस्ट संपादक मैं HTML विकल्प पर क्लिक करें, और जहां आप इसे रखना चाहते हैं, वहांं इसे पेस्ट करें।
अब इसके अंदर अपना टेक्स्ट लिखने के लिए आप इस कोड के अंदर देखें। मैंने यहां पर आप अपना टेक्स्ट यहां पर लिखें एक लेेेख लिखा है, इसको हटाकर आप अपना टेक्स्ट लिख सकते हैं।
Text कलर, बैकग्राउंड कलर, टेक्स्ट साइज कम या अधिक करना।
यदि आप टेक्स्ट या बैकग्राउंड कलर या टेक्स्ट साइज में कुछ बदलाव करना चाहते हैं। तो आप यह तरीके आजमाए।बैकग्राउंड कलर चेंज करेंः अपने पोस्ट Html में जाएं, और जहां पर कोड रखा है, वहां पर देखें। उस कोड के अंदर आपको background-color: #9fc5e8; कोड दिखाई देगा। अब टेक्स्ट का बैकग्राउंड कलर चेंज करनेेे के लिए इस #9fc5e8 कोड की जगह अपना कलर कोड या कलर नाम डालें। और फिर पूर्वावलोकन देखें।
बोर्डर radius करेंः पोस्ट एचटीएमएल में जाएं, और कोड में देखें। वहां आपको border-radius: 8px; यह कोड दिखाई देगा, यह कोड आपके बैकग्राउंड कलर के कोनो को कम करने का काम करता है।
तो अपने बैकग्राउंड कलर के कोने कम या अधिक करने के लिए अंक 8 की जगह कम या अधिक अंक डालें, और पूर्वालॉकन करें।
Text Color चेंज करेंः पोस्ट एचटीएमएल में जाये, और कोड में देखें। वहां आपको color: #3c4043; यह कोड दिखाई देगा। तो आप अपना पसंदीदा Text Color जोड़नेेे के लिए #3c4043 इस कोड को हटाए और इसकी जगह अपना पसंदीदा कलर नाम या कलर कोड डाले। और पूर्वालॉकन करें।
टेक्स्ट साइज चेंज करेंः टेक्स्ट की फोंट साइज कमियां अर्थी करने के लिए पोस्ट हेक्टेयर में उस कोड पर नजर डालें वहां पर आपको font-size: 17px; यह कोड दिखाई देगा छह कोड बैकग्राउंड कलर के अंदर जो टेक्स्ट होंगे उसकी साइज प्रदर्शित करेगा तो टेक्स्ट फोंट साइज कम या अधिक करने के लिए 17px मैं 17 किस जगह कम याााा अधिक अंक डार्लिंग और पूर्वावलोकन करें
Text और बॉर्डर को पेंडिंग देनाः टेक्स्ट और बॉर्डर के बीच में दूरी बनाने के लिए हम Padding का उपयोग करते हैं।
तो आप अपने टेक्स्ट को बैकग्राउंड बॉर्डर से दूर या पास रखने के लिए पोस्ट html में कोड पर नजर डालें। वहां पर आपको padding: 4px 4px 4px 4px; यह कोड दिखाई देगा।
तो अब आप टेक्स्ट और बॉर्डर की दूरी कम या अधिक करने के लिए अंक 4 की जगह कम या अधिक अंक डालें, और पूर्वालॉकन करें।
👁 ध्यान देंः
मेरे द्वारा ऊपर दिया गया कोड कुछ इस तरह Text और Background प्रदर्शित करेगा, और मेरे द्वारा ऊपर बताए गए तरीकों से आप इस में बदलाव भी कर सकते हैं।
यह भी पढ़ेंः " Blog post Article में Line Add | 8 Best Design hr रेखाएं "
" Blogger Blog में Amp Set up कैसे करें - Amp Page बनाए "
तो दोस्तों हमें उम्मीद है, कि आपको हमारी यह पोस्ट पसंद आई होगी और अगर पोस्ट पसंद आई है। तो इसे अपने दोस्तों में शेयर करें ताकि आपके दोस्तों को भी इस पोस्ट के बारे में पता चल सके। और हमें कमेंट करें, कि आपको हमारी यह पोस्ट कैसी लगी।
यदि आपका कोई प्रश्न है, तो नीचे Comment बॉक्स में हमें बताएं।
Comments
Post a Comment