अपने Blogger.com Blog के Header सेक्शन को Customize करें
अंतिम ट्यूटोरियल में, हमने आपके ब्लॉगर के लिए लिंक अनुभाग को अनुकूलित कियाटीएम वेबलॉग। अब, हम ब्लॉग के शीर्ष पर हैडर अनुभाग को कस्टमाइज़ करेंगे। शीर्षक में आपके ब्लॉग का शीर्षक और विवरण होता है। हम टेक्स्ट के लिए टाइपफेस, या फॉन्ट बदलने जा रहे हैं और रंगीन पृष्ठभूमि जोड़ सकते हैं।

अंतिम ट्यूटोरियल की तरह, हम टेम्पलेट के HTML कोड की कुछ पंक्तियों को बदलकर ये सुधार करेंगे। पृष्ठ के शीर्ष पर मेनू में टेम्प्लेट टैब पर क्लिक करें जो आपको वर्तमान करंट टेम्पलेट अनुभाग में ले जाएगा। आपको नीचे दिए गए बॉक्स में टेम्पलेट के लिए HTML कोड मिलेगा। हम CSS स्टाइल कोड में कुछ बदलाव करेंगे। (कैस्केडिंग स्टाइल शीट्स के बारे में अधिक जानने के लिए, नीचे दिए गए लिंक का अनुसरण करें।) सीएसएस शैली टैग के भीतर हेडर अनुभाग तक पहुंचने तक कोड को नीचे स्क्रॉल करें। जैसा कि आप देख सकते हैं, स्टाइल टैग बहुत लंबा है और स्टाइल टैग के हेडर सेक्शन के छह भाग हैं।

  1. @मीडिया सभी
  2. @मीडिया ने हाथ डाला
  3. #ब्लॉग का शीर्षक
  4. # ब्लॉग-शीर्षक a
  5. # ब्लॉग-शीर्षक a: hover
  6. #विवरण

  • कोड का पहला भाग (@media all) हेडर की विशेषताओं को नियंत्रित करता है जिसमें चौड़ाई, मार्जिन और सीमा का आकार शामिल है। दूसरा भाग (@मीडिया हैंडहेल्ड) इन विशेषताओं को पहले भाग से विरासत में मिला है और हेडर की चौड़ाई को हैंडहेल्ड मॉनीटर के लिए 90 प्रतिशत में भी बदलता है। क्योंकि हम चाहते हैं कि नई पृष्ठभूमि का रंग दोनों उदाहरणों में उपयोग किया जाए, हम पहले भाग में पृष्ठभूमि रंग के लिए कोड की एक पंक्ति जोड़ देंगे (@media all)। नीचे कोड की यह नई पंक्ति बोल्ड है। नीचे दिए गए उदाहरण में, हमने हल्के भूरे रंग का उपयोग किया है, लेकिन किसी भी रंग का उपयोग करने के लिए स्वतंत्र महसूस करें।

    @मीडिया सब {
    # जयधर {
    पृष्ठभूमि-रंग: # EFE3EF;
    ...

  • अगला, हम शीर्षक के लिए लोकप्रिय लोकप्रिय, आकस्मिक स्टाइल फॉन्ट को कॉमिक सैंस एमएस के रूप में बदल देंगे। बेशक, आप अपनी पसंद के किसी भी फ़ॉन्ट का उपयोग करने के लिए स्वतंत्र हैं। टेम्पलेट के सीएसएस कोड के अगले तीन भाग (# ब्लॉग-शीर्षक, # ब्लॉग-शीर्षक a, # ब्लॉग-शीर्षक a: hover) ब्लॉग के शीर्षक की विशेषताओं को नियंत्रित करते हैं। पहला भाग सामान्य विशेषताओं को नियंत्रित करता है और अन्य दो भाग हाइपरलिंक के रूप में कार्य करते समय पाठ के रूप को नियंत्रित करते हैं। सभी प्रकार के उदाहरणों के लिए शीर्षक का प्रकार, या फ़ॉन्ट सेट करने के लिए, हम फ़ॉन्ट-परिवार के लिए CSS कोड को पहले भाग (# ब्लॉग-शीर्षक) में जोड़ देंगे। क्योंकि हमारे फ़ॉन्ट नाम में रिक्त स्थान हैं, इसलिए इसे उद्धरण चिह्नों ("कॉमिक संस एमएस") के अंदर रखना होगा।

    #ब्लॉग का शीर्षक {
    फ़ॉन्ट-परिवार: "कॉमिक संस एमएस";
    ...

  • अंत में, हम आपके ब्लॉग (# रंगलेखन) के विवरण के लिए CSS कोड पर काम करेंगे। यह मूल छह का अंतिम भाग है। जैसा कि आप नीचे देख सकते हैं, सभी सीएसएस कोड जो विवरण टेक्स्ट के लिए फ़ॉन्ट विशेषताओं को नियंत्रित करते हैं, उन्हें एक पंक्ति में एक साथ सूचीबद्ध किया गया है। हमें केवल फोंट की सूची के सामने "कॉमिक सैंस एमएस" जोड़ना होगा जो कॉमिक सैंस एमएस को विवरण टेक्स्ट के लिए डिफ़ॉल्ट फ़ॉन्ट बना देगा।

    #विवरण {
    ...
    फ़ॉन्ट: 78% / 1.4em "कॉमिक संस एमएस", "ट्रेबुचेट एमएस", ट्रेबुचेट, एरियल, वर्दाना, संस-सेरिफ़;
    ...
    }

जब आप समाप्त कर लें, तो अपने परिवर्तनों का पूर्वावलोकन करने के लिए पूर्वावलोकन बटन पर क्लिक करें और फिर पिछले वेबपेज पर लौटने के लिए उस ब्राउज़र विंडो को बंद करें। Save Template Changes बटन पर क्लिक करें। जब आप पुष्टिकरण संदेश देखते हैं कि परिवर्तन सहेजे गए थे, तो पुन: प्रकाशित करें बटन पर क्लिक करें। यह सत्यापित करने के लिए कि आपका ब्लॉग अपडेट हो गया है, पृष्ठ के शीर्ष पर स्थित मेनू में दृश्य ब्लॉग टैब पर क्लिक करें। परिवर्तनों को देखने के लिए आपको अपने ब्लॉग वेबपृष्ठ को ताज़ा करना पड़ सकता है।





Google इंक Google की अनुमति से स्क्रीन शॉट्स पुनर्मुद्रितटीएम, ब्लॉगरटीएम और BlogSpotटीएम संयुक्त राज्य अमेरिका और / या अन्य देशों में या तो Google इंक के पंजीकृत ट्रेडमार्क या ट्रेडमार्क हैं।


वीडियो निर्देश: Add Title "Header Image" for Website: Blogger Web design Tutorial #2 (मई 2024).