Online Computer Courses Classes and Training Program

Create A Blogger Template From Scratch - Body Classes & Header Widget

Digital Dhanbad Research Institute - October 26, 2025
blogger-template-body-classes-alternate-header

नमस्ते दोस्तों! 👋

आपका स्वागत है DDRI में।

आज हम एक Blogger Template को शुरू से बनाना सीख रहे हैं।
अब तक हमने अपने HTML और CSS कोड को Blogger Theme Editor में जोड़ना शुरू कर दिया है।

अगर आप Theme → Edit HTML में जाएँ, तो देखेंगे कि हमने वहाँ अपना काफी कोड डाल दिया है।

अब तक का हमारा रिज़ल्ट कुछ इस तरह दिखता है —
हमारे पास है:

  • Navbar (ऊपर का मेनू बार)
  • Hero Section (मुख्य हैडर भाग)
  • Footer (पेज का निचला हिस्सा)

साथ ही, Search Bar की एनीमेशन भी पूरी तरह काम कर रही है ✅

अब इस पोस्ट में, हम सीखेंगे —
👉 कैसे अपने Blogger Template के <body> टैग के लिए अलग-अलग क्लासेस (classes) बनाते हैं।

मतलब —
अगर आप Home Page पर हैं तो <body> टैग में एक खास क्लास होगी,
और अगर आप Post Page या Static Page पर हैं तो दूसरी।

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

👉 मान लीजिए, आप Home Page पर हैं — तब <body> टैग की क्लास होगी “home-page”।
अगर आप Post Page (यानि किसी ब्लॉग पोस्ट के अंदर) पर हैं, तो वहाँ अलग क्लास होगी, जैसे “post-page”।

इससे फायदा क्या होगा?
अगर आप सिर्फ़ Home Page के लिंक (anchor tags) को अलग तरीके से स्टाइल करना चाहते हैं,
तो आप ऐसा लिख सकते हैं —

.home-page a {
  color: red;
}

इस तरह यह स्टाइल सिर्फ़ होम पेज पर लागू होगी,
बाकी पेजों पर नहीं। 🎨

इसलिए Blogger Template में body classes जोड़ना एक अच्छा और प्रोफेशनल तरीका है।

अब अगला स्टेप है —
👉 एक Alternate Header (दूसरा हेडर डिज़ाइन) बनाना।

अभी हमारे पास जो हेडर है, उसमें Hero Section शामिल है और यह पूरी ब्राउज़र विंडो की ऊँचाई (Full Height) लेता है।
लेकिन हर पेज पर हमें इतना बड़ा हेडर नहीं चाहिए।
इसलिए हम अब एक छोटा और सिंपल हेडर बनाएंगे जो बाकी पेजों के लिए इस्तेमाल होगा।

👉 इसलिए, हम यह तय करेंगे कि
Hero Section केवल Home Page पर दिखेगा,
और बाकी सभी पेजों पर सिर्फ़ एक Simple Header रहेगा।

Simple Header में क्या होगा?

  • हमारी वेबसाइट का Title (नाम)

  • और Description (विवरण)
    यही Blogger थीम का Default Header Widget होगा,
    जो आप कई ब्लॉग वेबसाइट्स में देख चुके होंगे।

🎯 अब काम शुरू करते हैं — Body Classes जोड़ना:

1️⃣ सबसे पहले अपनी वेबसाइट खोलिए।
2️⃣ उस पर Right Click → Inspect पर क्लिक कीजिए।
3️⃣ अब आपको HTML कोड में <body> टैग दिखेगा।
अभी उसमें कोई भी class नहीं लगी है।
4️⃣ अब हम Theme → Edit HTML में जाकर
<body> टैग की शुरुआत के बाद
अलग-अलग पेजों के लिए class जोड़ेंगे।

इससे हमें हर पेज के लिए अलग-अलग स्टाइलिंग करने में आसानी होगी,
जैसे कि Home Page, Post Page या Static Page के लिए।

अब हम कोडिंग शुरू करते हैं।

Blogger में एक खास टैग होता है — <b:class>
इस टैग की मदद से हम किसी भी HTML एलिमेंट (जैसे <body>) में शर्त (condition) के आधार पर class जोड़ सकते हैं।

👉 मतलब — अगर कोई शर्त सही है,
तो उस एलिमेंट को एक खास class मिल जाएगी।

अब देखते हैं इसका Syntax (कोड कैसे लिखते हैं) 👇

हम <b:class> टैग बनाएँगे और उसमें एक condition देंगे।
इसके लिए कोड कुछ ऐसा होगा —

<b:class cond='data:view.isHomepage' name='home-page'/>

🔹 यहाँ

  • cond का मतलब है condition (शर्त)

  • data:view.isHomepage मतलब – अगर पेज Home Page है

  • name='home-page' मतलब – अगर यह शर्त सही है, तो <body> में "home-page" नाम की class जुड़ जाएगी

यानि, जब यूज़र आपकी वेबसाइट के होम पेज पर होगा,
तो <body> टैग कुछ ऐसा दिखेगा —

<body class='home-page'>

और अगर यूज़र किसी दूसरे पेज (जैसे Post या About Page) पर होगा,
तो यह class नहीं लगेगी।

👉 इससे आप CSS की मदद से
हर पेज के लिए अलग-अलग स्टाइलिंग कर सकते हैं —
जैसे कि Hero Section सिर्फ़ Home Page पर दिखे
और बाकी पेजों पर Simple Header दिखे।

अभी हमने <b:class> टैग का उपयोग करके Home Page के लिए एक क्लास जोड़ी है।

👉 अब समझते हैं यह कैसे काम करता है —

जब वर्तमान पेज (Current Page) Home Page होता है,
तो यह कोड <body> टैग (जो पैरेंट एलिमेंट है) में
"home-page" नाम की class जोड़ देता है।

यानि <body> टैग अब कुछ ऐसा दिखेगा 👇

<body class='home-page'>

अब इस बदलाव को Save करें और
अपनी वेबसाइट Refresh (Reload) करें।

🔍 फिर Right Click → Inspect करके देखें —
आपको <body> टैग में "home-page" क्लास दिखाई देगी ✅

लेकिन जब आप किसी Search Page या दूसरे पेज (जैसे Post Page) पर जाएँगे,
तो वहाँ यह क्लास नहीं होगी।
क्योंकि यह सिर्फ़ Home Page पर ही लागू होती है।

अब अगर आप वापस Home Page पर जाएँ,
तो फिर से "home-page" क्लास दिखाई देगी।

👉 इसी तरह, हम और भी पेजों के लिए
अलग-अलग क्लास जोड़ सकते हैं — जैसे "post-page", "static-page", "search-page" इत्यादि।

अब हम इसी कोड को कॉपी करके बाकी पेजों के लिए बदलेंगे।

अब हम बाकी पेजों के लिए भी अलग-अलग body classes जोड़ेंगे ताकि हर पेज को अलग-अलग तरीके से डिज़ाइन कर सकें।

🧩 1️⃣ Post या Page के लिए Class जोड़ना

अब हम कोड को कॉपी करेंगे और उसमें नई condition लिखेंगे 👇

<b:class cond='data:view.isSingleItem' name='item-view'/>

📘 इसका मतलब:
अगर पेज एक Single Item है (यानि कोई Post या Static Page),
तो <body> में "item-view" नाम की class जुड़ जाएगी।

🏷️ 2️⃣ Label Page (Category Page) के लिए Class

अब एक और लाइन कॉपी करें और इसमें ये condition दें 👇

<b:class cond='data:view.isLabelSearch' name='label-view'/>

📘 इसका मतलब:
अगर पेज Label Search Page है (यानि किसी Category या Tag से जुड़ा पेज),
तो <body> में "label-view" नाम की class जुड़ जाएगी।

🔍 3️⃣ सामान्य Search Page के लिए Class

अब Search Page के लिए एक और शर्त जोड़ते हैं —

<b:class cond='data:view.isSearch and !data:view.isLabelSearch' name='search-view'/>

📘 यहाँ ! (Exclamation Mark) का मतलब “नहीं (not)” होता है।
यानि अगर पेज Search Page है लेकिन Label Search Page नहीं है,
तो "search-view" नाम की class लगाई जाएगी।

इस तरह अब हमारे पास हर प्रकार के पेज के लिए अलग-अलग क्लास होंगी —

  • 🏠 Home Page → home-page
  • 📄 Post/Page → item-view
  • 🏷️ Label Page → label-view
  • 🔍 Search Page → search-view

इन सब क्लासों से हम अपने Blogger Template को प्रोफेशनल तरीके से स्टाइल कर सकते हैं 🎨

हमने अभी तक Blogger Template में सभी Body Classes जोड़ ली हैं।
अब समझते हैं उनका उपयोग और टेस्ट कैसे करें।

👉 जब हम "data:view.isSearch and !data:view.isLabelSearch" वाला कोड लगाते हैं,
तो इसका मतलब होता है —
यह सामान्य सर्च पेज (Normal Search Page) है,
और यह Label Search Page (यानी Category आधारित सर्च) नहीं है।

इसलिए जब कोई यूज़र ब्लॉग में कुछ सर्च करता है,
तो <body> टैग में "search-view" नाम की class जुड़ जाती है।

✅ अब सभी क्लासें तैयार हैं —

  • home-page → Home Page के लिए
  • item-view → Post या Static Page के लिए
  • label-view → Label (Category) Page के लिए
  • search-view → सामान्य Search Page के लिए

💾 अब इस कोड को Save करें
और अपनी वेबसाइट को Refresh करें।

जब आप Home Page पर होंगे →
आपको <body class="home-page"> दिखाई देगा।

जब आप कुछ सर्च करेंगे →
तो <body class="search-view"> दिखाई देगा।

इसका मतलब हमारा कोड ठीक से काम कर रहा है ✅

🧱 अब अगला स्टेप:
हम बनाएंगे एक Alternate Header (दूसरा हेडर डिज़ाइन)।

👉 अभी जो हेडर है, वह Home Page के लिए है —
जिसमें Hero Section शामिल है (जो पूरी स्क्रीन की ऊँचाई लेता है)।

लेकिन बाकी पेजों (Post, Search, Label Page) के लिए
हम एक Simple Header बनाएंगे,
जिसमें सिर्फ़ वेबसाइट का नाम (Title) और विवरण (Description) दिखेगा।

अब हम अपने Blogger Template में एक if condition जोड़ेंगे,
ताकि Hero Section वाला Header केवल Home Page पर ही दिखे।

🧩 Step-by-Step समझिए 👇

1️⃣ सबसे पहले हमें अपने Header Section को ढूँढना होगा।
इसके लिए HTML कोड में वह हिस्सा खोजिए जहाँ से Header शुरू होता है।

2️⃣ अब Header शुरू होने से पहले हम यह condition जोड़ेंगे 👇

<b:if cond='data:blog.url == data:blog.homepageUrl'>

📘 इसका मतलब है —
अगर वर्तमान पेज का URL (data:blog.url)
हमारी वेबसाइट के Home Page URL (data:blog.homepageUrl) के बराबर है,
तभी यह Header दिखाई देगा।

3️⃣ फिर पूरे Header को इस <b:if> टैग के अंदर रखें,
और अंत में इसे बंद करें 👇

</b:if>

💾 अब इस कोड को Save करें
और वेबसाइट को Refresh करें।

🧪 टेस्ट करें:

  • जब आप Home Page पर होंगे → Hero Section वाला Header दिखेगा ✅

  • जब आप किसी Search Page, Label Page, या Post Page पर जाएंगे → Header नहीं दिखेगा ✅

इसका मतलब हमारी condition सही से काम कर रही है।

🔧 अब हमें ध्यान देना होगा कि Header हटने के बाद
Navbar (नेविगेशन मेनू) की styling थोड़ी गड़बड़ दिख सकती है।
तो अगले स्टेप में हम Navbar की CSS को एडजस्ट करेंगे
ताकि बाकी सभी पेजों पर वह सही दिखे।

हमने अभी देखा कि हमारा Hero Section वाला Header सिर्फ़ Home Page पर दिख रहा है।
अब बाकी पेजों (जैसे Post Page, Search Page आदि) के लिए हम एक Simple Header (Default Header) जोड़ेंगे।
लेकिन उससे पहले हमें Navbar (ऊपरी मेनू) की एक छोटी सी CSS समस्या ठीक करनी है।

🧩 Step 1: Navbar की Position Fix करें

1️⃣ वेबसाइट पर Right Click → Inspect करें।
2️⃣ अब ऊपर वाले Top Navbar को सिलेक्ट करें।
3️⃣ देखें कि Navbar थोड़ा नीचे खिसका हुआ है।
इसे ठीक करने के लिए हम CSS में एक लाइन जोड़ेंगे 👇

.top-nav {
  top: 0;
}

📘 इसका मतलब है कि Navbar अब पेज के बिलकुल ऊपर (Top Position: 0) से शुरू होगा।

🧩 Step 2: Default Header (Simple Header) जोड़ना

अब हम Hero Section वाले Header के नीचे
एक नया Header Widget जोड़ेंगे,
जो Home Page को छोड़कर बाकी सभी पेजों पर दिखाई देगा।

इसके लिए कोड कुछ ऐसा होगा 👇

<b:if cond='data:blog.url != data:blog.homepageUrl'>
  <header class='default-header'>
    <b:widget id='Header1' type='Header' locked='true'/>
  </header>
</b:if>

📘 यहाँ

  • != का मतलब है “बराबर नहीं” (is not equal to)

  • यानि जब URL Home Page URL के बराबर नहीं होगा,
    तभी यह Header दिखाई देगा।

इसलिए:

  • 🏠 Home Page → Hero Section Header दिखेगा
  • 📄 बाकी सभी पेज → Simple Default Header दिखेगा

💾 अब कोड को Save करें और Refresh करें।
आप देखेंगे कि Navbar अब सही जगह पर है
और हर पेज के लिए सही Header दिख रहा है ✅

अब हम अपने Blogger Template में एक Simple Header Widget बनाएंगे,
जो Home Page के अलावा बाकी सभी पेजों पर दिखाई देगा।

🧩 Step 1: Header Section बनाना

सबसे पहले हमें एक Section बनाना होगा।
Blogger में हर Widget को एक Section के अंदर रखना ज़रूरी होता है।

तो हम यह कोड लिखेंगे 👇

<b:section id='b-section-header'>
</b:section>

यह Section हमारे Alternate Header को रखेगा।

🧩 Step 2: Header Widget जोड़ना

अब इस Section के अंदर हम एक Header Widget बनाएंगे 👇

<b:section id='b-section-header'>
  <b:widget id='Header1' type='Header'/>
</b:section>

📘 यहाँ

  • type='Header' → यह Blogger को बताता है कि यह Header Widget है।
  • id='Header1' → यह उसका यूनिक नाम (Unique ID) है।

🧩 Step 3: काम का टेस्ट

💾 कोड Save करें और वेबसाइट Refresh करें।

  • जब आप Search Page या किसी दूसरे पेज पर जाएँगे,
    तो आपको यह नया Header दिखाई देगा ✅

  • लेकिन जब आप Home Page पर होंगे,
    तब यह Header नहीं दिखेगा (क्योंकि हमने पहले से condition लगाई थी)।

🧩 Step 4: Header को स्टाइल करना

अब इस Header को दिखने में अच्छा बनाने के लिए
हमें CSS में कुछ स्टाइल जोड़ने होंगे।

CSS फाइल या <style> सेक्शन में जाएँ और
एक नया कमेंट लिखें ताकि कोड व्यवस्थित रहे 👇

/* Alternate Header Styles */

अब हम इसमें Header से जुड़ी क्लासेस की स्टाइलिंग जोड़ेंगे,
ताकि यह साफ़, आकर्षक और मोबाइल फ्रेंडली दिखे।

हमने अपने Blogger Template के लिए Alternate Header बनाया और उसे स्टाइल किया।
अब देखते हैं इसे CSS की मदद से कैसे सही दिखाया जाता है।

🧩 Step 1: Header की Position और Margin Fix करें

1️⃣ वेबसाइट पर Right Click → Inspect करें।
2️⃣ Header के लिए class header है।
3️⃣ अब CSS में इसे स्टाइल करें:

header {
  padding-top: 70px;    /* ऊपर से स्पेस */
  margin-bottom: -42px; /* नीचे से नेगेटिव मार्जिन */
  text-align: center;   /* कंटेंट को सेंटर में रखें */
}

💾 Save करें और वेबसाइट Refresh करें।
अब Alternate Header सही जगह पर दिखाई देगा ✅

🧩 Step 2: Header के Text को स्टाइल करना

1️⃣ Header में दो मुख्य एलिमेंट्स हैं:

  • Title (h1 tag) → class title
  • Description (p tag) → class description

2️⃣ Title को स्टाइल करें:

header h1.title {
  font-family: 'Dancing Script', cursive; /* Font */
  font-size: 56px;                        /* Font Size */
  text-align: center;                      /* Center Align */
}

header h1.title a {
  text-decoration: none;  /* Underline हटाना */
  color: black;           /* Text Color */
}

3️⃣ Description को सेंटर में करें:

header p.description {
  text-align: center;
}

💾 Save करें और Refresh करें।
अब Alternate Header बिल्कुल सही और सुंदर दिखेगा ✅

🧩 Step 3: टेस्ट करना

  • Home Page → Hero Section वाला Main Header दिखेगा
  • बाकी सभी पेज (Post, Search, Label, Static Page) → Alternate Header दिखेगा

इस तरह हमने Blogger Template में अलग-अलग Body Classes + Alternate Header + Styling पूरी तरह से सेट कर लिया।

धन्यवाद! आपका दिन शुभ हो!

Tags:

Post a Comment

0 Comments

कमेंट केवल पोस्ट से रिलेटेड करें