Create A Blogger Template From Scratch - The Footer

 

🖥️ Blogger Theme में Footer कैसे बनाएं? (Step by Step in Hindi)

नमस्ते दोस्तों! 🙏
आज हम सीखेंगे कि अपनी Blogger Theme में एक सुंदर सा Footer Section कैसे बनाया जाए।

Footer आपकी वेबसाइट का आखिरी हिस्सा होता है। इसमें अक्सर ये चीज़ें रहती हैं –

• बाएँ (Left) में Logo
• बीच (Center) में Quick Links (जैसे Home, About, Contact)
• दाएँ (Right) में Social Media Icons (Instagram, Facebook, Twitter आदि)

चलो इसे Step by Step बनाना सीखते हैं।

---

1️⃣ Footer का HTML Structure

सबसे पहले हम Footer का HTML Code लिखेंगे।

Source Code :

<!-- Footer Section Start -->

<footer>

  <div class="wrapper">

    <div class="footer-container">

     

      <!-- Left Section (Logo) -->

      <div class="footer-left">

        <img src="images/logo.png" alt="Logo">

      </div>

     

      <!-- Center Section (Quick Links) -->

      <div class="footer-center">

        <h4 class="list-title">Quick Links</h4>

        <ul>

          <li><a href="#">Home</a></li>

          <li><a href="#">About</a></li>

          <li><a href="#">Contact</a></li>

          <li><a href="#">Privacy Policy</a></li>

        </ul>

      </div>

     

      <!-- Right Section (Social Icons + Text) -->

      <div class="footer-right">

        <h4 class="list-title">Follow Us On</h4>

        <div class="social-icons">

          <a href="#"><img src="images/instagram.png" alt="Instagram"></a>

          <a href="#"><img src="images/facebook.png" alt="Facebook"></a>

          <a href="#"><img src="images/twitter.png" alt="Twitter"></a>

        </div>

        <p>Website developed by Live Blogger © 2025</p>

      </div>

     

    </div>

  </div>

</footer>

<!-- Footer Section End -->

 

👉 अब हमारा HTML तैयार है।

2️⃣ Footer की CSS Styling

अब Footer को सुंदर बनाने के लिए हम CSS का इस्तेमाल करेंगे।

Source Code :

/* Footer Section */

footer {

  background: #000;         /* काला बैकग्राउंड */

  color: #ccc;              /* हल्का ग्रे टेक्स्ट */

  padding: 36px;

}

footer a {

  color: #fcfcfc;           /* लिंक का रंग सफेद */

  text-decoration: none;    /* अंडरलाइन हटाना */

}

footer a:hover {

  text-decoration: underline; /* Hover करने पर underline */

}

.footer-container {

  display: flex;

  justify-content: space-around; /* तीनों सेक्शन बराबर दूरी पर */

}

.footer-left {

  align-self: center; /* Logo को बीच में vertically लाना */

}

footer ul {

  list-style: none;     /* Bullet हटाना */

  margin-top: 16px;

}

footer ul li {

  margin: 12px 8px;    /* Links के बीच थोड़ा gap */

}

.footer-right .social-icons {

  margin-top: 20px;

  background: #111;     /* Dark Gray box */

  padding: 10px;

  max-width: 260px;

}

.footer-right .social-icons img {

  margin: 0 20px;       /* Icons के बीच space */

  border-radius: 10px;  /* गोल कोने */

}

.footer-right .social-icons a {

  text-decoration: none; /* Hover underline हटाना */

}

.footer-right p {

  margin-top: 20px;

}

3️⃣ Final Result

अब जब आप ऊपर का HTML + CSS अपने Blogger Theme या किसी भी HTML Page में डालेंगे,
तो आपको एक Professional Footer मिलेगा, जिसमें:
✅ बाएँ Logo,
✅ बीच में Quick Links,
✅ और दाएँ Social Media Icons + Copyright

सब कुछ सलीके से दिखेगा।

मैं आपके लिए इस Footer का पूरा HTML + CSS को Line by Line Explain कर देता हूँ, ताकि Beginner भी आसानी से समझ सके।

HTML Code :

<!-- Footer Section Start -->

<footer> 

👉 <footer> टैग से हमारी Footer Section की शुरुआत होती है।

HTML Code :

  <div class="wrapper">

👉 wrapper नाम की div बनाई गई है, ताकि पूरा Footer अच्छे से एक container में आ जाए।

HTML Code :

    <div class="footer-container">

👉 footer-container को Flexbox layout देंगे, ताकि Footer को तीन हिस्सों (Left, Center, Right) में बांटा जा सके।

🔹 Footer Left (Logo वाला हिस्सा)

HTML Code :

      <div class="footer-left">

        <img src="images/logo.png" alt="Logo">

      </div>

👉 footer-left में हमने Logo का <img> लगाया है।

• src="images/logo.png" → आपके Logo का path.
• alt="Logo" → अगर image लोड न हो तो “Logo” text दिखे।

🔹 Footer Center (Quick Links वाला हिस्सा)

HTML Code :

      <div class="footer-center">

        <h4 class="list-title">Quick Links</h4>

👉 यहाँ पर <h4> heading है, जिसका नाम है Quick Links।

HTML Code :

        <ul>

          <li><a href="#">Home</a></li>

          <li><a href="#">About</a></li>

          <li><a href="#">Contact</a></li>

          <li><a href="#">Privacy Policy</a></li>

        </ul>

      </div>

👉 <ul> (unordered list) में <li> (list items) डाले गए हैं।
👉 हर list item के अंदर <a> tag है (Hyperlink)।

• href="#" मतलब अभी link कहीं नहीं जाता (आप इसे अपनी URL से बदल सकते हैं)।

🔹 Footer Right (Social Icons + Text वाला हिस्सा)

HTML Code :

      <div class="footer-right">

        <h4 class="list-title">Follow Us On</h4>

👉 Heading "Follow Us On" – मतलब Social Media के links।

HTML Code :

        <div class="social-icons">

          <a href="#"><img src="images/instagram.png" alt="Instagram"></a>

          <a href="#"><img src="images/facebook.png" alt="Facebook"></a>

          <a href="#"><img src="images/twitter.png" alt="Twitter"></a>

        </div>

👉 यहाँ तीन <a> tags हैं (Instagram, Facebook, Twitter)।
👉 हर एक के अंदर <img> है → Social Media का icon दिखाने के लिए।

HTML Code :

        <p>Website developed by Live Blogger © 2025</p>

      </div>

👉 आख़िर में <p> paragraph है।
👉 इसमें "Website developed by Live Blogger © 2025" लिखा है।
👉 © (Copyright Symbol) को © से बनाया जाता है।

HTML Code :

    </div>

  </div>

</footer>

<!-- Footer Section End -->

👉 Footer Section को बंद कर दिया गया।

🖥️ Footer का CSS Code (Line by Line Explanation)

/* Footer Section */
footer {
  background: #000;         /* काला बैकग्राउंड */
  color: #ccc;              /* हल्का ग्रे टेक्स्ट */
  padding: 36px;            /* अंदर से gap */
}

👉 Footer का background काला है, text हल्का gray और padding 36px रखी गई है।

footer a {
  color: #fcfcfc;           /* लिंक सफेद */
  text-decoration: none;    /* underline हटाई */
}
footer a:hover {
  text-decoration: underline; /* Hover पर underline */
}

👉 Footer के सभी links सफेद दिखेंगे। Hover करने पर underline आ जाएगी।

.footer-container {
  display: flex;
  justify-content: space-around; /* तीनों section बराबर दूरी पर */
}

👉 Flexbox का इस्तेमाल करके Footer को तीन हिस्सों में बांटा गया है।

.footer-left {
  align-self: center; /* Logo को vertical center में लाना */
}

footer ul {
  list-style: none;     /* bullets हटाना */
  margin-top: 16px;
}

footer ul li {
  margin: 12px 8px;    /* links के बीच gap */
}

.footer-right .social-icons {
  margin-top: 20px;
  background: #111;     /* Dark Gray background */
  padding: 10px;
  max-width: 260px;
}

👉 Social Icons को एक box में रखा है, dark gray background दिया और padding दी।

.footer-right .social-icons img {
  margin: 0 20px;       /* icons के बीच gap */
  border-radius: 10px;  /* गोल कोने */
}

.footer-right .social-icons a {
  text-decoration: none; /* underline हटाना */
}

.footer-right p {
  margin-top: 20px; /* नीचे वाले text से ऊपर gap */
}

---

✅ अब आपने देखा – हर एक HTML और CSS Line को समझना कितना आसान है।