Create A Blogger Template From Scratch - Header, Footer & Search box

 

Blogger Theme को Scratch से Convert करना

इस सीरीज़ में हम एक Blogger Theme को शुरुआत से डिज़ाइन कर रहे हैं। इससे पहले के हिस्सों में हमने इसका Desktop Version और Mobile Version का डिज़ाइन पूरा किया है। अगर आपने वो आर्टिकल नहीं देखे हैं, तो यहाँ क्लिक करें। Create A Blogger Template From Scratch

पिछले भाग में हमने Blogger Theme के कुछ बेसिक्स सीखे थे। अब हम आगे बढ़ते हुए अपने तैयार किए गए कोड को Blogger Theme में Convert करेंगे।

यह प्रक्रिया कई हिस्सों में पूरी होगी। हर हिस्से में हम अपनी वेबसाइट के अलग-अलग सेक्शन पर ध्यान देंगे और उन्हें Blogger Theme में लागू करेंगे।

मैंने पहले से एक ब्लॉग बना लिया है जिसका नाम है Live Blogger। पिछले ट्यूटोरियल में मैंने आपको यह भी दिखाया था कि नया ब्लॉग कैसे बनाया जाता है।

आगे के भागों में हम स्टेप-बाय-स्टेप अपने कोड को Blogger Template में जोड़ेंगे और धीरे-धीरे एक पूरी तरह से काम करने वाला थीम तैयार करेंगे।

Blogger Theme में कोड जोड़ने की प्रक्रिया

अगर आपको अभी तक ब्लॉग बनाना नहीं आता है तो आप पहले वाला ट्यूटोरियल देख सकते हैं।

अब हम अपने ब्लॉग की Settings में जाकर सबसे पहले Description अपडेट करेंगे। Description में हम लिखेंगे – “Learn to design websites” और इसे सेव कर देंगे।

फिलहाल हमने और कुछ नहीं किया है। अभी तक हमारे ब्लॉग पर कोई पोस्ट भी मौजूद नहीं है।

सबसे पहले हम View Blog पर क्लिक करेंगे और देखेंगे कि अभी हमारा ब्लॉग कैसा दिखता है। अभी यह Blogger द्वारा दिया गया Default Theme दिखा रहा है।

अब हमें थीम को एडिट करना है। इसके लिए हम Customize बटन के बगल में बने Arrow पर क्लिक करेंगे और फिर Edit HTML चुनेंगे।

HTML एडिटर खुलने के बाद हम सबसे पहले पूरा कोड हटा देंगे। इसके लिए Ctrl + A दबाकर सबको सिलेक्ट करेंगे और Delete कर देंगे।

इसके बाद हम अपने बनाए गए Source Code पर जाएंगे और वहां से पूरा HTML कॉपी करके यहाँ पेस्ट कर देंगे।

साथ ही, हम अपने डिज़ाइन किए गए वेबसाइट का रेफ़रेंस भी खोलकर रखेंगे ताकि हम तुलना करके देख सकें कि सबकुछ सही से काम कर रहा है या नहीं। इसके लिए हम डिज़ाइन फाइल पर Right Click → Open with Live Server चुनेंगे।

Blogger Theme में Static और Dynamic सेक्शन

अब हमारे पास तैयार डिज़ाइन है। यहाँ आप देख सकते हैं कि Navigation Menu और Hero Section स्टैटिक (Static) हैं। यानी ये हिस्से बदलने वाले नहीं हैं और हमेशा एक जैसे रहेंगे।

इसके बाद बाकी सभी चीज़ें Dynamic होंगी। उदाहरण के लिए –

• यह जो Post Title है, वह डायनामिक होगा।
• इसी तरह पूरी पोस्ट से संबंधित डेटा भी डायनामिक रहेगा।
• इसके बाद हमारे पास Popular Posts Section है, जो कि डायनामिक होगा। इसमें दिखने वाला सारा डेटा Blogger वेबसाइट के डेटाबेस से आएगा।
• Contact Us Section भी Blogger का एक Widget होगा, इसलिए इसे हम सीधे अपने डिज़ाइन से कॉपी-पेस्ट नहीं कर सकते।

अंत में हमारे पास Footer है, जो कि स्टैटिक रहेगा। यानी यह हिस्सा हमारे Blogger Theme में बिल्कुल वैसे ही रहेगा जैसे हमने डिज़ाइन में बनाया है।

तो अब हम क्या करेंगे?
हम अपने Blogger Theme में Footer और Static Sections को वैसा ही रखेंगे, और Dynamic Sections को Blogger Widgets और Database से कनेक्ट करेंगे।

Blogger Theme से Extra Code हटाना

अब हमें अपने Template को साफ़ करना है। इसके लिए हम सबसे पहले सिर्फ Header और Footer को रहने देंगे और बाकी सब कुछ हटा देंगे।

इसके लिए:

1. Template में जाएँ।
2. जहाँ Header खत्म होता है, वहाँ से लेकर Footer शुरू होने से पहले तक का सारा कोड सेलेक्ट करें।
3. इस हिस्से को Delete कर दें।

अब हमारे पास सिर्फ Header और Footer बचे रहेंगे।

इसके बाद हमें एक और काम करना होगा। हमारे Template में जो Script Tag है और जिसमें main.js फाइल लिंक की गई है, उसे भी हटा दें, क्योंकि अब वह फाइल हमारे काम की नहीं है। आगे चलकर हम अपना JavaScript कोड सीधे Script Tag के अंदर लिखेंगे।

इतना करने के बाद हमारे पास सिर्फ Header और Footer बचेंगे।

ध्यान दें: Blogger Theme XML Code पर आधारित होता है। इसलिए जब भी आप XML में कोई कोड लिखते हैं, तो Ampersand (&) को सीधे नहीं लिख सकते। इसके लिए आपको & लिखना होगा।

Blogger Theme में XML Entities और Skin बनाना

Blogger Theme XML पर आधारित होता है, इसलिए इसमें कुछ खास बातों का ध्यान रखना ज़रूरी है।

1. Ampersand (&) का इस्तेमाल

XML फाइल में आप सीधे & (ampersand) का इस्तेमाल नहीं कर सकते। इसके लिए हमेशा इसे इस तरह लिखना होगा:

&

यानी जहाँ भी आप & का उपयोग करेंगे, वहाँ आपको & लिखना पड़ेगा।

2. Copyright Symbol का इस्तेमाल

XML फाइल में सीधे Copyright Symbol © भी इस्तेमाल नहीं किया जा सकता। इसके लिए आपको इसका Unicode लिखना होगा।

©

जब आप XML में © लिखेंगे, तो यह ब्राउज़र में © दिखाएगा।

3. Blogger Template के लिए Skin बनाना

हर Blogger Template में एक Skin बनाना ज़रूरी होता है। यह Skin, Template के Head Section के अंदर बनाई जाती है और इसमें CSS Code लिखा जाता है।

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

<b:skin><![CDATA[

/* यहाँ आपका पूरा CSS कोड आएगा */

]]></b:skin>

यहाँ CDATA टैग के अंदर आप अपना सारा CSS कोड लिख सकते हैं।

4. CSS Link हटाना

अगर आपके HTML Template में पहले से कोई External CSS Link है (जैसे <link rel="stylesheet"...>), तो उसे हटा दें, क्योंकि अब सारा CSS सीधे Blogger Theme के Skin Section में लिखा जाएगा।

Blogger Theme में Section और Images जोड़ना

1. Section बनाना

हर Blogger Template में कम से कम एक Section होना ज़रूरी है। इसके लिए हम इस तरह का Section बनाएँगे:

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

यह Section Blogger Theme में कंटेंट को लोड करने के लिए आधार (Container) का काम करेगा।

2. Theme Save करना

Section बनाने के बाद जब आप Save करेंगे तो Blogger बताएगा कि आपका Theme सफलतापूर्वक Update हो गया है।

इसके बाद अपने ब्लॉग को Refresh करके देख सकते हैं कि Theme किस तरह दिख रहा है।

3. Images जोड़ना

अब हमें अपने Template में Images भी जोड़नी होंगी। Blogger Template में Images को सीधे अपलोड नहीं किया जा सकता, इसलिए उन्हें कहीं Online Host करना होगा और फिर उनके Link को Template में जोड़ना होगा।

लेकिन एक आसान तरीका यह है कि आप अपने Blogger पर एक Page बनाएँ और उसमें सारी Images अपलोड कर दें।

• उस Page को Publish न करें, ताकि Visitors उसे न देख सकें।
• अब आपको हर Image का Direct Link मिल जाएगा।
• इन Links को अपने Template में जहाँ ज़रूरत हो, वहाँ इस्तेमाल कर सकते हैं।

 

Blogger Template में Images Upload और Use करना

अब हम Blogger Dashboard में जाकर अपनी थीम के लिए सभी Images अपलोड करेंगे। इसके लिए ये स्टेप्स फ़ॉलो करें:

1. नया Page बनाना

• Blogger Dashboard में जाएँ।
• Pages पर क्लिक करें और एक New Page बनाएँ।
• इस Page में हम अपनी सभी Images अपलोड करेंगे।

2. Images Upload करना

• Insert Image पर क्लिक करें।
• Upload from Computer चुनें।
• अब Choose Files पर क्लिक करें और अपनी Theme की सभी Images सेलेक्ट करें।
• ध्यान दें: Thumbnail Images को अभी अपलोड न करें, क्योंकि इन्हें हम सीधे Posts में इस्तेमाल करेंगे।

3. Size और Insert करना

• Files चुनने के बाद Open पर क्लिक करें।
• जब सारी Images अपलोड हो जाएँ, तो Select पर क्लिक करें।
• अब Size चुनने का विकल्प मिलेगा। यहाँ Original Size चुनें और फिर OK पर क्लिक करें।
• अब सभी Images आपके Page में दिखाई देंगी।

4. Images के Links लेना

• अगर आप सिर्फ Images देखना चाहते हैं, तो Compose View में रह सकते हैं।
• लेकिन अगर आपको Images के Direct Links चाहिए, तो आपको HTML View में जाना होगा।
• HTML View में हर Image का <img> टैग दिखेगा, जिसमें Image का Link मौजूद रहेगा।
• यही Links हम अपने Blogger Template में इस्तेमाल करेंगे।

Blogger Template में Images के Links लगाना

जब हम Blogger के HTML View में जाते हैं, तो हमें सभी Images का HTML Code दिखता है। यहाँ से हम आसानी से हर Image का Link निकाल सकते हैं और अपने Template में जोड़ सकते हैं।

1. Logo Image जोड़ना

• सबसे पहले Blogger Page में जाएँ और Ctrl + F दबाकर Search Box खोलें।
• अब “logo” टाइप करें।
• आपको Logo वाली Image का Code मिल जाएगा।
• उस Code से href (link) कॉपी करें।
• अब इस Link को अपने Blogger Template में Logo Image के स्थान पर पेस्ट कर दें।

2. Save और Check करना

• Template को Save करें।
• अब अपने Blog को Refresh करें।
• आप देखेंगे कि आपका Logo सही से Display हो रहा है।

3. बाकी Images जोड़ना

Logo की तरह ही बाकी सभी Images के Links भी इसी तरह कॉपी-पेस्ट करके अपने Template में लगाएँ।

• HTML View से हर Image का Link निकालें।
• Blogger Theme में Image Placeholder की जगह यह Link डालें।

इस तरह धीरे-धीरे आप अपनी थीम की सभी Images जोड़ सकते हैं।

Blogger Theme में CSS Code जोड़ना

अब हमने सभी Images के Links अपडेट कर दिए हैं और वे Blog पर सही से दिख रही हैं। अगला स्टेप है अपनी CSS Styling को Blogger Template में जोड़ना।

1. CSS File से Code Copy करना

• अपनी style.css फाइल खोलें।
• यहाँ से Top Navigation से Header Section तक का पूरा CSS Code कॉपी करें।
• इस Code को Blogger Template में CDATA टैग के अंदर पेस्ट करें।

2. Footer की CSS जोड़ना

• अब CSS फाइल में नीचे स्क्रॉल करें और Footer Section की Styling कॉपी करें।
• इसे भी Blogger Template में Skin Section (CDATA) के अंदर पेस्ट कर दें।

3. Search Bar की CSS जोड़ना

• CSS फाइल में देखें कि Search Bar के लिए जो Styling है, उसे भी कॉपी करें।
• इसे Footer के CSS Code के बाद पेस्ट करें।

4. Hidden Items की CSS

• Desktop View में कुछ Items Hidden रहते हैं।
• CSS फाइल में यह Styling भी मिल जाएगी।
• इसे भी कॉपी करके Blogger Theme के Skin Section में पेस्ट करें।

Blogger Theme में CSS और JavaScript जोड़ना

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

1. CSS Save और Check करना

• Theme को Save करें।
• अब अपने Blog को Refresh करें।

• यहाँ आप देखेंगे कि सबकुछ सही से काम कर रहा है।

• Hero Section
• Footer Section
• बाकी सभी हिस्से ठीक से स्टाइल हो चुके हैं।

2. Search Icon की समस्या

जब हम Search Icon पर क्लिक करते हैं तो Search Box दिखाई नहीं देता। इसका कारण यह है कि हमने अभी तक JavaScript Code कॉपी नहीं किया है।

3. JavaScript जोड़ना

• अपनी main.js फाइल खोलें।
• इसमें मौजूद पूरा JavaScript Code कॉपी करें।
• Blogger Template के Footer Section के बाद एक <script> टैग बनाकर यह कोड पेस्ट करें।

<script>
// यहाँ main.js का पूरा JavaScript कोड आएगा
</script>

4. Save और Test करना

• अब Template को फिर से Save करें।
• Blog को Refresh करें और Search Icon पर क्लिक करें।
• अब आप देखेंगे कि Search Box सही से Display हो रहा है।

Blogger Theme में Working Search Box जोड़ना

अब हमें अपने Template के Search Box को एक Working Blogger Search Box से बदलना है। इसके लिए हम Blogger का Widget इस्तेमाल करेंगे।

1. HTML से पुराना Search Box हटाना

• सबसे पहले Blogger Dashboard में जाएँ और Edit HTML खोलें।
• वहाँ जहाँ आपका Search Box HTML लिखा है (यानी search container वाला div), उसे Delete कर दें।

2. नया Section बनाना

अब हमें Blogger Section बनाना होगा। इसके लिए यह कोड डालें:

<b:section id='search-container' class='search-container'>
</b:section>

यहाँ हमने id और class दोनों को search-container दिया है ताकि पहले से लिखी गई CSS Styles सही से काम करें।

3. Widget जोड़ना

अब इस Section के अंदर Blogger का Search Widget जोड़ें।

<b:widget type='BlogSearch' id='BlogSearch1'>
</b:widget>

Final Code Example

<b:section id='search-container' class='search-container'>
    <b:widget type='BlogSearch' id='BlogSearch1'>
    </b:widget>
</b:section>

इस तरह आपका पुराना Static Search Box अब Blogger का Working Search Box बन जाएगा और यह आपके Blog पर Search Functionality को सक्रिय कर देगा।

Blogger Search Box को Customize करना

अब हमने Blogger का Search Widget जोड़ लिया है। चलिए देखते हैं यह सही से काम कर रहा है या नहीं।

1. Search Box टेस्ट करना

• Template को Save करें।
• अब Blog को Refresh करें।
• Search Icon पर क्लिक करें।
• अब Blogger का Search Box दिखाई देगा।
• अगर आप कुछ सर्च करेंगे, तो URL में आपको search?q=your-term दिखेगा।
• अगर आपके पास उस Keyword से संबंधित कोई Post होगी, तो वह यहाँ दिखाई देगी।

अभी Posts नहीं हैं और पूरा Theme Code भी तैयार नहीं हुआ है, इसलिए Search Results Display नहीं हो रहे। लेकिन यह Confirm है कि Search Box काम कर रहा है क्योंकि URL में Query दिखाई दे रही है।

2. Search Box से Title हटाना

Blogger का Search Widget डिफ़ॉल्ट रूप से एक Title दिखाता है। हमें इसे हटाना है।

इसके लिए:

• पेज को Reload करें ताकि आपको पूरा Search Box Code दिखाई दे।
• अब HTML Code से Title का हिस्सा हटाएँ या Customize करें।

Blogger Search Box से Title हटाना और Styling बदलना

अब हमारे पास पूरा कोड है जिसमें Search Box मौजूद है।

1. Title हटाना

• Search Box HTML में एक Title दिखाई देता है।
• इस Title वाले हिस्से को Delete कर दीजिए।
• फिर Template को Save करें और पेज को Refresh करें।

अब Search Box बिना Title के सही तरह से दिखाई देगा। ✅

2. Styling में बदलाव करना

अब Search Box को थोड़ा और सुंदर बनाने के लिए इसकी CSS Styling बदलनी होगी।

इसके लिए:

• पेज पर Search Box पर Right Click करें और Inspect चुनें।
• यहाँ आपको Input और Button के CSS Rules मिलेंगे।

आप ये बदलाव कर सकते हैं:

• Input पर जो padding-right: 12px है, उसे हटा दें या 2px कर दें।
• Input की width बढ़ाकर 200px कर दें।
• Search Button से border हटा दें ताकि यह साफ-सुथरा दिखे।

Blogger Search Box की CSS Styling सुधारना

अब हमारा Search Box ठीक दिख रहा है, लेकिन हमें CSS में कुछ बदलाव करने होंगे ताकि यह और बेहतर लगे।

1. Search Container के लिए CSS

• Theme Code में जाएँ और Search Container का Code ढूँढें।

• इसमें ये बदलाव करें:

  • padding-right को 2px कर दें।
  • Input की width को 200px कर दें।

2. Submit Button का Border हटाना

• Submit Button पर जो Border है उसे हटाना होगा।
• इसके लिए CSS में border: none; सेट कर दें।

3. Selector को सही करना

कभी-कभी Padding सही से Apply नहीं होती।

• Inspect Tool से सही CSS Selector कॉपी करें।
• पुराने Selector को हटाकर नया Selector डालें और CSS में Update करें।

4. Placeholder जोड़ना

• अब Input Box में Placeholder Text भी जोड़ें, जैसे "खोजें..."
• इसके लिए HTML में Input Tag में placeholder="खोजें..." डाल दें।

Blogger Theme में Mobile Search Box और Styling जोड़ना

अब तक हमने Desktop Version में Search Box को सेट किया था। अब हमें इसे Mobile Version में भी जोड़ना है ताकि Mobile Users भी आसानी से सर्च कर सकें।

1. Mobile Version की CSS जोड़ना

• सबसे पहले style.css में नीचे तक स्क्रॉल करें।
• Mobile Version के लिए जो CSS लिखा है उसे कॉपी करें और Theme Code में Paste कर दें।
• बाद में हम इसमें बदलाव करेंगे, लेकिन अभी पूरे Code को कॉपी करके सेव कर दें।
• अब Mobile Version को चेक करें। यह सही तरीके से डिज़ाइन दिखेगा।

2. Mobile Menu में Search Box जोड़ना

• HTML Code में जाएँ और Mobile Menu Container ढूँढें।
• वहाँ एक नया <li> जोड़ें।
• इस <li> के अंदर एक नया Blogger Section और Widget जोड़ें।

उदाहरण:

<b:section id='mobile-search'>
  <b:widget type='BlogSearch' id='BlogSearch2'></b:widget>
</b:section>

👉 ध्यान रखें कि पहले से Desktop Search Box BlogSearch1 नाम से है, इसलिए Mobile के लिए BlogSearch2 देना होगा।

3. Title हटाना और Placeholder जोड़ना

• Widget Code में Title वाले हिस्से को हटा दें।
• Input Field में Placeholder Attribute जोड़ें, जैसे:

<input type="text" placeholder="खोजें...">

4. CSS में Mobile Search Styling

• Desktop Version की Search Box CSS को कॉपी करें।
• अब Selector में Mobile Search Box का ID (BlogSearch2) भी जोड़ दें।

उदाहरण:

#BlogSearch1 input[type="text"],
#BlogSearch2 input[type="text"] {
   width: 200px;
   padding-right: 2px;
}

#BlogSearch1 input[type="submit"],
#BlogSearch2 input[type="submit"] {
   border: none;
}

5. Final Output

• अब Refresh करने पर Mobile Menu में भी Search Box दिखाई देगा।
• इसकी Styling भी Desktop Version जैसी ही होगी।

👉 अब तक हमने Theme में सभी Static Parts और Search Functionality को जोड़ दिया है।
अगले स्टेप्स में हम Popular Post Section, Contact Section और Blog Section बनाएँगे।
साथ ही, Home Page और Inner Pages के लिए Alternate Header भी ऐड करेंगे।