Create A Blogger Template From Scratch - Blogger Theme Basics

Blogger Template Development – बेसिक सेटअप और शुरुआत (Step by Step Guide)

👉 पिछली पोस्ट में हमने Blogger Template में Responsive Mobile Navigation Menu बनाया था। अगर आपने वह पोस्ट मिस कर दी है तो पहले यहाँ से पढ़ें:
🔗 Create Blogger Template – Mobile Navigation Menu

अब इस ट्यूटोरियल में हम देखेंगे:

Blogger Theme की बेसिक सेटअप
Theme का Structure
Sections और Widgets
CSS (Skin)
Includable और Include
If Conditions

यानी यह आपकी Theme Development की शुरुआत (Foundation) होगी।

1. सबसे पहले Blogger Dashboard को समझना

👉 Blogger.com पर Gmail ID से Login करें।

आपके सामने Dashboard खुलेगा। अगर आप Beginner हैं और आपके पास ब्लॉग नहीं है तो “Create New Blog” का बटन दिखेगा।

उस पर क्लिक करें
Blog Name डालें – Example: Learning Theme Development
Blog Address (URL) डालें – Example: learning-theme-dev
Save पर क्लिक करें ✅

अब आपका नया ब्लॉग बन गया है।

2. Default Blogger Theme देखना

जब आप ब्लॉग बनाते हैं, तो Blogger एक Default Theme देता है (जैसे Contempo Lite)।
अगर आप “View Blog” पर क्लिक करेंगे तो आपको आपका ब्लॉग एक साधारण डिज़ाइन में दिखेगा।

लेकिन हम अपना खुद का Theme बनाएँगे।

3. Theme Code को साफ़ करना

अब चलते हैं:

Dashboard → Theme → Edit HTML

इसके लिए Customize के पास वाले Arrow पर क्लिक करें और Edit HTML चुनें।
अब जो भी कोड लिखा है, उसे Ctrl + A दबाकर सिलेक्ट करें और Delete कर दें। (Ctrl + A → Delete )

अब आपका Theme पूरी तरह Blank है और आप अपना Design Add कर सकते हैं।

सबसे पहले हम अपने डिज़ाइन से HTML कोड कॉपी करके यहाँ पेस्ट करेंगे।
इसके बाद हम body टैग के अंदर का सारा कंटेंट हटा देंगे ताकि केवल HTML का स्ट्रक्चर ही बचे, कोई अतिरिक्त कंटेंट न रहे।

साथ ही, हम एक अतिरिक्त link टैग जो CSS के लिए जोड़ा था उसे भी हटा देंगे क्योंकि अब उसकी ज़रूरत नहीं है।

फिर हम Save Theme पर क्लिक करेंगे।
अगर कोई Error दिखाई दे, तो उसे ठीक करना होगा।

उदाहरण के लिए:

जब भी ampersand (&) लिखना हो, तो सीधा & टाइप नहीं कर सकते।
इसके बजाय आपको & लिखना होगा।

यानी, XML में & की जगह हमेशा & का उपयोग करना ज़रूरी है।

👉 ध्यान रखें:

Blogger Theme XHTML (XML + HTML) पर आधारित है।
इसमें आप HTML, CSS और JavaScript लिख सकते हैं।
XML में सीधे & नहीं लिख सकते, इसके लिए हमेशा & लिखना होगा।

4. CSS के लिए Skin Tag

अब अगला काम है कि हमें अपने Blogger Template में एक Skin जोड़ना है।
यह ज़रूरी होता है। आइए देखते हैं इसे कैसे जोड़ते हैं।

सबसे पहले हमें head सेक्शन में जाना होगा।
यहीं पर हम Skin बनाएँगे।

Skin बनाने के लिए आपको यह कोड लिखना होगा

HTML Code :

<b:skin>
</b:skin>

Blogger में CSS को <b:skin> टैग के अंदर लिखा जाता है। यानी, पहले <b:skin> से Skin टैग को खोलना है और फिर </b:skin> से उसे बंद करना है।

इसके अंदर हमें और कोड जोड़ना होता है।
इसके लिए हम यह लिखेंगे:

HTML Code :

<![CDATA[
   /* यहां CSS कोड लिखा जाएगा */
]]>

इस हिस्से के अंदर हम अपनी वेबसाइट के CSS Styles लिख सकते हैं। यानी, Blogger में जो भी CSS इस्तेमाल करनी है, वह हमेशा <b:skin> टैग के अंदर और CDATA सेक्शन में लिखी जाती है।

HTML Code :

<b:skin>
<![CDATA[
   /* यहाँ आपका CSS Code आएगा */
]]>
</b:skin>

👉 <![CDATA[ ... ]]> के अंदर जितना भी CSS लिखेंगे, वह Safe रहेगा और Error नहीं देगा। हमारा सारा CSS कोड इसी CDATA सेक्शन के अंदर लिखा जाएगा।

यानि, जो भी CSS हमने अपने डिज़ाइन में बनाई है, उसे यहाँ पेस्ट करना होगा। अब इसे सेव करके देखते हैं कि और क्या जोड़ना ज़रूरी है।

अगला काम है — अपने Theme में कम से कम एक Section बनाना।

5. Sections और Widgets क्या होते हैं?

इसके लिए हमें body सेक्शन में जाना होगा।
एक नया Section बनाने के लिए यह कोड लिखें:

HTML Code :

<b:section id='test'>
</b:section>

हर Section के लिए एक id होना ज़रूरी है।
यहाँ हमने id="test" लिखा है।

👉 Blogger Theme में Sections एक तरह के Containers होते हैं।

जैसे आप एक Section को Header के लिए बना सकते हैं।
और Header Section के अंदर आप Widgets जोड़ सकते हैं।

Widgets वह कोड होते हैं जो आपके ब्लॉग पर कोई चीज़ दिखाते हैं (जैसे Logo, Menu, Post List आदि)।
आप सीधे Theme में Widget नहीं डाल सकते, उसके लिए पहले एक Section ज़रूरी होता है।

तो इस तरह हमने अपना पहला Section बना लिया। ✅

अब हमने एक Section बना लिया है।
इसे Save करके देखते हैं कि कोई Error आता है या नहीं।

सेव करने के बाद हमें मैसेज मिला — “Update Successful”, यानी अब हमारे Theme में कोई Error नहीं है। ✅

अब आपको बस इस पेज को Refresh करना होगा।

रिफ्रेश करने पर आप देखेंगे कि Blogger Theme ने अपने आप कुछ कोड जोड़ दिया है।

इसमें एक XML की लाइन है।
और दूसरी एक और कोड की लाइन।

ये दोनों लाइनें Blogger ने खुद Generate की हैं।

अगर अब आप अपनी वेबसाइट को View Blog से खोलेंगे, तो यह पूरी तरह खाली (Blank) दिखेगी।

इसीलिए अब हमें आगे बढ़कर और कोड जोड़ना होगा।
इसके लिए हम फिर से Edit HTML टैब खोलेंगे और वहीं से काम जारी रखेंगे।

अब चलिए टेस्ट करके देखते हैं कि HTML काम कर रहा है या नहीं।

इसके लिए हमने एक h1 टैग बनाया और उसमें लिखा – “Hi Guys”।

HTML Code :

<h1>Hi Guys</h1>

अब थीम को Save करके वेबसाइट को Refresh करते हैं।

हम देख सकते हैं कि अब हमारी वेबसाइट पर “Hi Guys” दिखाई दे रहा है। 🎉

यानी यह पहली बार है जब हमने अपने Blogger Template में कोई कंटेंट डिस्प्ले किया है।

इस तरह आप यहाँ कोई भी HTML कोड जोड़ सकते हैं।
और CSS कोड को आप हमेशा CDATA सेक्शन के अंदर लिख सकते हैं।
दोनों को मिलाकर आप अपनी वेबसाइट पर डिज़ाइन और कंटेंट दिखा सकते हैं।

अब Blogger Template का एक सबसे महत्वपूर्ण हिस्सा है — Widgets।
Blogger में कई तरह के Widgets उपलब्ध हैं, जैसे:

Header Widget
Blog Widget
Popular Posts Widget
Search Bar Widget
और भी कई अन्य।

इन्हीं Widgets का उपयोग करके हम अपने ब्लॉग को पूरी तरह से कस्टमाइज़ कर सकते हैं।

Blogger में एक Plain HTML Widget भी होता है।
लेकिन अभी हम देखेंगे कि Header Widget कैसे बनाया जाता है।

Widget जोड़ने के लिए सबसे पहले हमें एक Section बनाना होगा।
उदाहरण:

HTML Code :

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

अब इस Section के अंदर हम एक Widget बनाएँगे।
Widget का सिंटैक्स इस तरह होता है:

HTML Code :

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

👉 ध्यान रखें कि Widget में दो जरूरी attributes होते हैं:

id – जैसे यहाँ Header1 दिया गया है।
type – यहाँ हमने Header लिखा है।

इस तरह जब हम इसे सेव करेंगे और अपनी वेबसाइट को Refresh करेंगे,
तो हमारा Header Widget वेबसाइट पर दिखाई देगा। ✅

अब हम देख सकते हैं कि हमारी वेबसाइट पर Heading (Title) दिखाई दे रही है।

चलिए अब इसमें Subheading (Description) भी जोड़ते हैं।

इसके लिए:

Blogger Dashboard पर जाएँ।
वहाँ से Settings खोलें।
यहाँ आपको Title का विकल्प मिलेगा और उसके नीचे Description का भी।
अब अपनी वेबसाइट के लिए कोई Description डालें और Save पर क्लिक करें।

अब जब हम अपनी वेबसाइट को Refresh करेंगे,
तो हमें Heading और Description दोनों दिखाई देंगे। ✅

इसके बाद अगर हम अपने Template के कोड को दोबारा Refresh करके देखें,
तो हमें काफी ज़्यादा कोड दिखाई देगा।

👉 ऐसा इसलिए होता है क्योंकि जब भी हम Blogger में कोई Widget जोड़ते हैं,
तो Blogger अपने आप उस Widget के लिए Default Code Generate कर देता है।
इससे हमें सारा कोड खुद से लिखने की ज़रूरत नहीं होती।

अब हम चाहें तो उस Widget के अंदर जाकर अपनी ज़रूरत के हिसाब से बदलाव कर सकते हैं।

अब हम इस Widget के कोड को अपनी ज़रूरत के अनुसार बदलकर बेहतर डिज़ाइन बना सकते हैं।

Blogger Theme में Section = Container होता है, और उसके अंदर Widget = Feature।

Example: Header Section + Header Widget

HTML Code :

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

section = जगह (Container)
widget = उस जगह पर जो Feature दिखाना है (जैसे Logo, Blog Posts, Popular Posts आदि)

👉 Blogger अपने आप इस Widget के लिए Default Code Generate कर देगा।

6. Blog Widget (सबसे ज़रूरी Widget)

अब चलिए हम एक नया Section बनाते हैं और उसमें एक Widget जोड़ते हैं,

जिसका नाम है Blog Widget। 👉 यह Blogger Theme का सबसे महत्वपूर्ण Widget है,

क्योंकि यही आपके ब्लॉग की सारी Blog Posts को वेबसाइट पर दिखाता है।

इसके लिए हम यह Section बनाएँगे:

HTML Code :

<b:section id='blog-container'>
</b:section>

इस Section के अंदर आगे हम Blog Widget जोड़ेंगे। ✅

अब इस सेक्शन के अंदर हम एक Widget बनाएँगे।

HTML Code :

<b:widget id='Blog1' type='Blog'>
</b:widget>

👉 यहाँ id = 'Blog1' दिया गया है और type = 'Blog' रखा गया है।

HTML Code :

<b:section id='blog-container'>
   <b:widget id='Blog1' type='Blog'>
   </b:widget>
</b:section>

Save करने के बाद जब आप Refresh करेंगे, तो ब्लॉग की सारी Posts दिखेंगी।

यह Blogger Theme का Main Part है।

7. Includable और Include

Blogger Theme को Manage करने के लिए इसमें Includable और Include का System है।

Example:

HTML Code :

<b:include name='title'/>

👉 इसका मतलब है कि Theme में कहीं includable id="title" लिखा है।

Include का काम है उस Includable का Code यहाँ Display करना।

इससे Theme को अलग-अलग हिस्सों में बाँटकर Manage करना आसान हो जाता है।

8. If Conditions (पेज टाइप के हिसाब से Content दिखाना)

Blogger में आप अलग-अलग Page Type के हिसाब से Content दिखा सकते हैं। जो Blogger Theme Development में काफी इस्तेमाल होती है –

वह है If Conditionals। इसे टेस्ट करने के लिए हम एक if कंडीशन बनाएँगे।

Example 1: Index Page

HTML Code :

<b:if cond='data:blog.pageType == "index"'>
   <h3>यह Text सिर्फ Index Page पर दिखेगा</h3>
</b:if>

👉 यहाँ `cond` का मतलब है Condition।
`data:blog.pageType` एक वैल्यू देता है कि अभी हम किस प्रकार के पेज पर हैं।
अगर यह index पेज है (जहाँ सभी ब्लॉग पोस्ट एक साथ दिखाई देती हैं), तो `<h3>` वाला टेक्स्ट दिखेगा।
यानि इस ब्लॉक के अंदर जो भी HTML लिखेंगे,
वह सिर्फ तभी दिखाई देगा जब हम Index Page पर होंगे।
अब हम एक और Example देखते हैं।
हमने `if condition` बनाई थी, जो सिर्फ Index Page पर काम कर रही थी।
जब हम अपने ब्लॉग के Index Page पर जाते हैं तो वहाँ लिखा आता है "index page",
लेकिन जब हम किसी पोस्ट पर जाते हैं, तो वह टेक्स्ट दिखाई नहीं देता।
इससे हमें समझ में आता है कि `if condition` सही तरह से काम कर रही है।
अब हम एक और `if condition` बनाएँगे —
इस बार Error Page (404 Page) के लिए।

Example 2: 404 Error Page

HTML Code :

<b:if cond='data:blog.pageType == "error_page"'>
   <h3>404 Page Not Found</h3>
</b:if>

👉 इस तरह आप Homepage, Post Page, या Error Page के लिए अलग-अलग Content बना सकते हैं।

9. आपने अब तक क्या सीखा

✅ Blogger Theme का Basic Structure
✅ Skin Tag में CSS लिखना
✅ Sections और Widgets बनाना
✅ Includable और Include का Use
✅ Blog Widget जोड़ना
✅ If Conditions लगाना

👉 यही आपकी Custom Blogger Theme Development की नींव है।