नमस्कार दोस्तों! आप सभी का DDRI Blogger में स्वागत है।
इस Tutorial Series में हम शुरुआत से एक Blogger Theme बना रहे हैं।
हमने पहले ही HTML, CSS और JavaScript का उपयोग करके
अपनी वेबसाइट का Design पूरा कर लिया है।
अब हम इस Code को Blogger Theme में Convert कर रहे हैं।
पिछले Tutorial में,
हमने अपने Blogger Theme के लिए Alternate Header बनाया था।
यह Header हमारी Website के Home Page को छोड़कर बाकी सभी Pages पर दिखाई देगा।
अब इस Post में मैं आपको यह दिखाने वाला हूँ कि
हम अपने Blogger Theme के Home Page पर Contact Form कैसे जोड़ेंगे।
हमारे Design में Contact Section, Home Page के Footer से ठीक पहले रखा गया है।
Blogger में Contact Form के लिए एक Built-in Widget पहले से मौजूद है,
तो हम उसी Widget का उपयोग करेंगे और अपनी Theme के अनुसार
उसमें कुछ आवश्यक Customization भी करेंगे।
तो चलिए शुरू करते हैं!
अब हम अपने Blogger Theme के Footer से पहले Contact Form जोड़ेंगे।
✅ Step 1: Theme Code में Footer से ठीक पहले जाएँ
अपने Blogger Theme Code में Footer Section ढूँढें।
यह Form सिर्फ Home Page पर ही दिखना चाहिए, इसलिए हम एक if condition का उपयोग करेंगे।
✅ Step 2: नीचे दिया हुआ Code Footer से पहले Paste करें
<b:if cond='data:blog.url == data:blog.homepageUrl'> <!-- Contact Section Start --> <b:section id='bsection-contact' class='contact-container'> <b:widget type='ContactForm' id='ContactForm1'/> </b:section> <!-- Contact Section End --></b:if>
✅ यह Code क्या करता है?
| Code Part | काम |
|---|---|
<b:if cond='data:blog.url == data:blog.homepageUrl'> | Contact Form सिर्फ Home Page पर दिखाएगा |
<b:section ...> | Contact Section बनाता है |
class='contact-container' | पहले से बनी CSS Styling apply होती है |
<b:widget type='ContactForm'/> | Blogger का Built-in Contact Form लगाता है |
✅ Step 3: Save → Refresh
अब Home Page Reload करने पर Footer के ऊपर Contact Form दिखाई देगा ✅
अब जब हमने Home Page पर Contact Form जोड़ दिया है,
तो हम यह भी चेक कर लेते हैं कि Search Page या अन्य Pages पर
यह Contact Form दिखाई न दे — और ऐसा ही हो रहा है ✅
अब हमें इस Contact Form को स्टाइल (CSS) करना है ताकि यह अच्छा दिखे।
✅ Step 1: Existing CSS Copy करें
अपने Original HTML/CSS Design में जहाँ Contact Form था,
वहाँ से Contact Section का CSS कॉपी कर लें।
✅ Step 2: Blogger Theme में CSS Paste करें
Theme Code में Footer से ठीक पहले यह CSS जोड़ें:
Source Code :
✅ आप अपने डिज़ाइन के अनुसार CSS बाद में एडजस्ट कर सकते हैं।
✅ Step 3: Contact Form को Wrapper DIV में डालें
हमारे Original Design में Contact Form,
एक Wrapper Division के अंदर था — इसलिए Blogger Theme में भी उसी तरह होना चाहिए।
Source Code :
✅ Step 4: Save → Home Page Refresh
अब हम Contact Form को Wrapper DIV में रख चुके हैं, अब Contact Form सही तरीके से Styled और Centered दिखेगा ✅ इससे Contact Form की Width सही हो जाती है
✅ Step 2: Labels हटाएँ → Placeholders जोड़ें
Contact Form में Default Labels होते हैं।
हम उन्हें हटाकर Clean UI के लिए Placeholder जोड़ेंगे।
Add Place Holder सबसे पहले, पहले इनपुट फ़ील्ड में Full Name का placeholder जोड़ेंगे।
दूसरे इनपुट फ़ील्ड में Email का placeholder होगा।और तीसरे इनपुट फ़ील्ड में Your Message का placeholder जोड़ेंगे।
अब आप देख सकते हैं कि सभी placeholders सही तरीके से दिखाई दे रहे हैं।
✅ Step 3: Title बदलें
"Contact Form" → "Contact Us"
हमारे फॉर्म में लेबल्स नहीं हैं, इसलिए अब हम फॉर्म के ऊपर दिख रहे टेक्स्ट “Contact Form” को बदलकर “Contact Us” कर देंगे।
यह टाइटल वहीं दिखाई देता है, उसे हम एडिट करके Contact Us कर देंगे।
अब हम यहाँ राइट-क्लिक करके Inspect पर क्लिक करेंगे ताकि यह देख सकें कि क्या बदलाव करना है।
Contact Form वाले widget की maximum width अभी 250px सेट है, जबकि इसे 100% होना चाहिए।
हम इसे 100% कर देंगे ताकि फॉर्म पूरी चौड़ाई में दिखाई दे।
इसके लिए हम CSS में उस widget का सेलेक्टर (.contact-form-widget) कॉपी करेंगे और वहाँ जाकर max-width: 100% सेट कर देंगे। फिर बदलाव को सेव कर देंगे।
अब Contact Form widget 100% चौड़ाई में दिखने लगा है।
इसके बाद हमें सभी input fields को भी 100% चौड़ाई में सेट करना है।
अभी inputs की maximum width 220px है और padding 8px 24px सेट है।
Padding को हम थोड़ा बढ़ाकर 16px 24px कर देंगे।
इसके लिए input field का सेलेक्टर कॉपी करेंगे और CSS में पेस्ट करके
max-width: 100%
और
padding: 16px 24px
सेट कर देंगे।
बदलाव सेव करने के बाद इनपुट फील्ड्स भी सही दिखेंगी।
अंत में, हम इनपुट बॉक्स में एक ग्रे बॉर्डर जोड़ेंगे।
इसके लिए CSS में लिखेंगे:
अब contact form पूरी तरह से साफ-सुथरा और फुल-विथ लेआउट में दिखाई देगा।
हमने इस बटन के लिए CSS पहले ही जोड़ दिया है, लेकिन यह लागू नहीं हो रहा क्योंकि selectors सही नहीं हैं।
अब इस पर राइट-क्लिक करें और Inspect पर क्लिक करें।
Inspect में हमें इस बटन की class मिलती है: .contact-form-button-submit।
अब इस selector को कॉपी करें और अपनी CSS में मौजूद गलत selector की जगह पेस्ट करें।
फिर फाइल सेव करें और बदलाव देखिए — CSS अब सही तरीके से लागू होगा।
अब हमें कुछ छोटे-छोटे बदलाव करने हैं।
इसके लिए सबसे पहले इस बटन पर राइट-क्लिक करके Inspect खोलेंगे।
फिर हम बटन की height सेट करेंगे और उसे बढ़ाकर 42px कर देंगे।
साथ ही हम इसका text color भी black (काला) सेट करेंगे।
अगर यह बदलाव Inspect में लागू नहीं हो रहा है, तो हम उन दो CSS लाइनों को कॉपी करेंगे और अपनी CSS फ़ाइल में जाकर पेस्ट कर देंगे।
फिर फाइल को सेव करेंगे और चेक करेंगे कि बदलाव ठीक से काम कर रहा है या नहीं।
अब हम बटन के hover state की स्टाइलिंग भी कर लेते हैं।
Hover के लिए हमें बटन की बैकग्राउंड का एक हल्का (lighter) रंग चाहिए होगा।
हम रंग चुनने के लिए एलिमेंट को सिलेक्ट करेंगे और बैकग्राउंड का कोई हल्का शेड या आपकी पसंद का दूसरा कलर चुन लेंगे।
हमने जो रंग चुना है, उसे कॉपी कर लेते हैं।
अब हम उसी बटन के लिए एक hover state बनाएँगे।
इसके लिए CSS में selector के बाद :hover लिखेंगे और hover के लिए चुना हुआ background color पेस्ट कर देंगे।
साथ ही hover पर text color को भी black सेट कर देंगे।
फिर CSS सेव करेंगे, और अब आप देख सकते हैं कि hover effect सही तरीके से काम कर रहा है।
0 Comments
कमेंट केवल पोस्ट से रिलेटेड करें