Blogger Template Design Tutorial – Popular Posts और Contact Us Section
अगर आप Blogger Template खुद से बनाना सीखना चाहते हैं, तो इस पोस्ट में हम आपको बताएँगे कि कैसे आप अपने टेम्पलेट में Popular Posts Section और Contact Us Section को HTML और CSS की मदद से डिजाइन कर सकते हैं।
Blogger Template और XML का रिलेशन
सबसे पहले एक बात समझ लें –
हमारा Blogger Template असल में XML (Extensible Markup Language) से बना होता है।
लेकिन जब हम डिज़ाइन करते हैं तो शुरुआत में हम HTML, CSS और JavaScript का उपयोग करते हैं ताकि हमें एक साफ़-सुथरा डिज़ाइन दिखाई दे।
बाद में यही HTML और CSS कोड हम अपने Blogger XML फाइल में डालकर उसे असली Blogger Theme बना सकते हैं।
Step 1 – Popular Posts Section का HTML Structure
सबसे पहले हम अपने Wrapper Division के अंदर एक नया सेक्शन बनाएँगे:
Source Code :
Step 2 – Contact Us Section का HTML Structure
अब हम Contact Us Form बनाएँगे:
Source Code :
Step 3 – CSS Styling
अब दोनों सेक्शन को स्टाइल करने के लिए CSS लिखते हैं।
Source Code :
Final Output
👉 इस कोड को इस्तेमाल करने के बाद आपकी वेबसाइट पर:
-
Popular Posts Section में तीन पोस्ट (Image + Title) एक साथ लाइन में दिखेंगे।
-
Contact Us Section में एक सुंदर फॉर्म होगा जहाँ विज़िटर अपना नाम, ईमेल और मैसेज लिखकर आपको भेज सकते हैं।
✅ इस तरह से हमने HTML और CSS का उपयोग करके दो ज़रूरी सेक्शन बना लिए।
अगले स्टेप में जब हम XML लिखेंगे, तो इन्हें Blogger Template के अंदर डालेंगे।
Popular Posts Section (HTML)
<div class="popular-posts-container">
👉 यह एक div है (यानी बॉक्स), जिसे हमने "popular-posts-container" नाम दिया। इसमें पूरा पॉपुलर पोस्ट सेक्शन रखा जाएगा।
<h2>Popular Posts</h2>
👉 यह एक हेडिंग है जो सेक्शन का नाम दिखाएगी – Popular Posts।
<div class="popular-posts">
👉 यह div तीनों पोस्ट (कार्ड्स) को एक लाइन में रखने के लिए बनाया गया है।
<div class="popular-post">
👉 हर एक पोस्ट को एक-एक बॉक्स में रखने के लिए "popular-post" नाम का div।
<div class="thumbnail">
👉 यह पोस्ट की तस्वीर (image) रखने का छोटा बॉक्स है।
<img src="images/popular-post1.jpg" alt="Post 1">
👉 यहाँ पर हमने एक इमेज लगाई है।
-
src = इमेज का रास्ता
-
alt = अगर इमेज लोड न हो तो “Post 1” लिखा दिखेगा।
</div>
👉 यह तस्वीर वाले div का अंत है।
<h3 class="title">Post Title One</h3>
👉 यह पोस्ट का टाइटल (heading) है – "Post Title One"।
</div>
👉 पहला पोस्ट कार्ड यहाँ खत्म हुआ।
इसी तरह दूसरा और तीसरा पोस्ट भी लिखा है 👇
<div class="popular-post">
<div class="thumbnail">
<img src="images/popular-post2.jpg" alt="Post 2">
</div>
<h3 class="title">Post Title Two</h3>
</div>
👉 दूसरा पोस्ट (दूसरी इमेज + दूसरा टाइटल)।
<div class="popular-post">
<div class="thumbnail">
<img src="images/popular-post3.jpg" alt="Post 3">
</div>
<h3 class="title">Post Title Three</h3>
</div>
👉 तीसरा पोस्ट (तीसरी इमेज + तीसरा टाइटल)।
</div>
👉 तीनों पोस्ट रखने वाला कंटेनर (popular-posts) यहाँ खत्म।
</div>
👉 पूरा पॉपुलर पोस्ट सेक्शन यहाँ समाप्त।
Contact Us Section (HTML)
<div class="contact-container">
👉 यह div (बॉक्स) पूरा Contact Us सेक्शन रखेगा।
<h2>Contact Us</h2>
👉 यह हेडिंग दिखेगी – Contact Us।
<form action="">
👉 यहाँ से फॉर्म शुरू होता है। (अभी action खाली है, मतलब डेटा कहीं नहीं जाएगा।)
<input type="text" placeholder="Full Name">
👉 यह पहला टेक्स्ट बॉक्स है जहाँ यूज़र अपना नाम लिखेगा।
<input type="text" placeholder="Email">
👉 यह दूसरा टेक्स्ट बॉक्स है जहाँ यूज़र अपना ईमेल लिखेगा।
<textarea placeholder="Your Message"></textarea>
👉 यह बड़ा टेक्स्ट बॉक्स है जहाँ यूज़र मैसेज लिख सकता है।
<input type="submit" value="Send">
👉 यह एक बटन है। जब यूज़र क्लिक करेगा तो फॉर्म Send होगा।
</form>
👉 फॉर्म का अंत।
</div>
👉 पूरा Contact Us सेक्शन का अंत।
अब मैं आपके लिए CSS को भी लाइन-बाय-लाइन उसी स्टाइल में समझाता हूँ →
एक लाइन कोड + तुरंत उसका आसान हिंदी एक्सप्लनेशन।
Popular Posts Section (CSS)
.popular-posts-container {
👉 यह सेलेक्टर है, जो "popular-posts-container" वाले div पर स्टाइल लगाएगा।
padding: 32px;
👉 बॉक्स के अंदर 32px खाली जगह दे दी ताकि कंटेंट दीवार से चिपका हुआ न लगे।
margin-top: 100px;
👉 बॉक्स के ऊपर से 100px दूरी छोड़ दी, ताकि सेक्शन अलग दिखे।
box-shadow: 0 4px 13px -3px rgba(0,0,0,0.2);
👉 बॉक्स के चारों तरफ हल्की परछाई (Shadow) बना दी ताकि बॉक्स उठा-उठा लगे।
}
👉 यह इस ब्लॉक का अंत है।
.popular-posts {
👉 यह उन सभी पोस्ट्स वाले div को टारगेट करता है जिसमें तीनों पोस्ट हैं।
display: flex;
👉 Flexbox लगाने से तीनों पोस्ट एक लाइन में बगल-बगल दिखेंगे।
}
.popular-post {
👉 यह हर एक पोस्ट कार्ड को स्टाइल करेगा।
margin: 0 8px;
👉 हर पोस्ट के बाएँ और दाएँ 8px जगह छोड़ दी ताकि पोस्ट्स चिपके नहीं।
}
.popular-post img {
👉 यह सिर्फ पोस्ट के अंदर वाली तस्वीर (image) को स्टाइल करेगा।
width: 100px;
👉 इमेज की चौड़ाई 100px फिक्स कर दी।
height: 160px;
👉 इमेज की ऊँचाई 160px फिक्स कर दी।
object-fit: cover;
👉 इमेज को फ्रेम में सही अनुपात (proportion) से फिट कर दिया। (तस्वीर खिंचने-फटने से बच जाएगी।)
}
.popular-post .title {
👉 यह हर पोस्ट का टाइटल (<h3 class="title">) स्टाइल करेगा।
font-family: 'Dancing Script', cursive;
👉 टाइटल के लिए सुंदर स्क्रिप्ट फ़ॉन्ट चुना।
font-size: 26px;
👉 टाइटल का साइज 26px बड़ा रखा।
margin-top: 16px;
👉 इमेज और टाइटल के बीच 16px दूरी रखी।
}
Contact Us Section (CSS)
.contact-container {
👉 यह Contact सेक्शन के पूरे बॉक्स को स्टाइल करेगा।
margin-top: 100px;
👉 ऊपर से 100px दूरी छोड़ दी।
padding: 32px;
👉 बॉक्स के अंदर की तरफ 32px खाली जगह।
box-shadow: 0 4px 13px -3px rgba(0,0,0,0.2);
👉 बॉक्स के चारों तरफ हल्की परछाई (Shadow) बना दी।
}
.contact-container form {
👉 यह सिर्फ Contact सेक्शन के फॉर्म को स्टाइल करेगा।
display: flex;
👉 फॉर्म के सभी एलिमेंट्स को Flexbox पर रखा।
flex-direction: column;
👉 Flex को column कर दिया यानी सब एलिमेंट्स (नाम, ईमेल, मैसेज, बटन) ऊपर से नीचे की ओर लाइन में आएँगे।
}
.contact-container form input[type="text"],
.contact-container form textarea {
👉 यह लाइन कहती है → “फॉर्म के अंदर जो भी टेक्स्ट बॉक्स और मैसेज बॉक्स हैं, उन पर यह स्टाइल लगाओ।”
padding: 8px 24px;
👉 हर बॉक्स के अंदर 8px ऊपर-नीचे और 24px दाएँ-बाएँ जगह रखी।
font-family: 'Roboto', sans-serif;
👉 टेक्स्ट लिखने के लिए Roboto फ़ॉन्ट चुना जो साफ़ और पढ़ने में आसान है।
margin-bottom: 10px;
👉 हर बॉक्स के बीच 10px दूरी रखी।
}
.contact-container form input[type="submit"] {
👉 यह सिर्फ Send बटन को स्टाइल करेगा।
width: 150px;
👉 बटन की चौड़ाई 150px रखी।
padding: 8px 24px;
👉 बटन के अंदर का टेक्स्ट आराम से दिखे इसलिए अंदर की जगह दी।
background: #06f0f0;
👉 बटन का रंग हल्का नीला (Cyan) कर दिया।
border: none;
👉 बटन का बॉर्डर हटा दिया।
font-weight: bold;
👉 बटन का टेक्स्ट गाढ़ा (Bold) कर दिया।
font-size: 16px;
👉 टेक्स्ट का साइज 16px रखा।
cursor: pointer;
👉 माउस ले जाने पर कर्सर हाथ का निशान (Pointer) दिखेगा।
}
✅ अब पूरा HTML + CSS आपको लाइन-दर-लाइन आसान भाषा में समझ आ गया होगा।
नीचे वही HTML + CSS कोड मैंने लाइन-दर-लाइन हिंदी कमेंट्स के साथ दिया है, ताकि बच्चे भी पढ़कर समझ सकें। आप चाहें तो इसे सीधे कॉपी करके फ़ाइल में सेव कर सकते हैं—कमेंट्स समझाने के लिए हैं, Code में दिक्कत नहीं करेंगे।
HTML (लाइन-बाई-लाइन समझ)
Source Code :
CSS (लाइन-बाई-लाइन समझ)
Source Code :
छोटी-छोटी बातें (बच्चों के लिए आसान नोट्स)
<div>: एक बॉक्स जैसा होता है जिसमें हम चीज़ें रखते हैं।<img>: फोटो दिखाने के लिए।src= फोटो का रास्ता,alt= फोटो न दिखे तो टेक्स्ट दिखे।<h2>,<h3>: बड़े/मध्यम टाइटल लिखने के लिए।<form>: यूज़र से जानकारी लेने वाला फ़ॉर्म।placeholder: बॉक्स के अंदर हल्का टेक्स्ट जो बताता है क्या भरना है।display: flex: चीज़ों को एक लाइन में व्यवस्थित करने का आसान तरीका।box-shadow: बॉक्स के नीचे हलकी परछाई ताकि कार्ड उठे हुए दिखें।object-fit: cover: इमेज को सुंदर तरीके से फ्रेम में फिट करना।
0 Comments
कमेंट केवल पोस्ट से रिलेटेड करें