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 हैं और आपके पास ब्लॉग नहीं है तो “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

यहाँ जो भी कोड दिखे, उसे Ctrl + A → Delete कर दें।
अब आपका Theme पूरी तरह Blank है और आप अपना Design Add कर सकते हैं।

👉 ध्यान रखें:

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

4. CSS के लिए Skin Tag

Blogger में CSS को <b:skin> टैग के अंदर लिखा जाता है।

HTML Code :

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

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

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

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)

ब्लॉग की Posts दिखाने के लिए Blog Widget ज़रूरी है।

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 दिखा सकते हैं।

Example 1: Index Page

HTML Code :

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

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. Quick Test – HTML Display करना

अगर आप चेक करना चाहते हैं कि Theme में HTML काम कर रहा है या नहीं, तो एक H1 Tag डालें:

HTML Code :

<h1>Hi Guys</h1>

Save → Refresh

अब आपकी वेबसाइट पर “Hi Guys” दिखाई देगा। 🎉

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

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

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