Create A Blogger Template From Scratch - Responsive Design

 

📱 Blogger Template में Mobile Version कैसे बनायें (Step-by-Step Guide)

आज हम सीखेंगे कि अपने Blogger Template का Mobile Version कैसे बनाया जाता है।
हमने पहले ही Desktop Version डिज़ाइन कर लिया है। अब बारी है मोबाइल फ्रेंडली बनाने की।

मोबाइल पर वेबसाइट अच्छा दिखे, इसके लिए हम CSS Media Queries का इस्तेमाल करेंगे।

🟢 Step 1: Desktop Version की स्थिति देखें

सबसे पहले आपको समझना होगा कि आपके पास क्या-क्या है:

• Header में Logo + Menu Items + Search Icon
• Hero Section (Text + Image)
• Blog Posts
• Popular Posts
• Contact Us Form
• Footer

डेस्कटॉप पर सबकुछ सही है, लेकिन मोबाइल में हमें कुछ बदलाव करने होंगे।

🟢 Step 2: Mobile Layout की Planning

मोबाइल पर Layout इस तरह होना चाहिए:

• Logo बाईं ओर
• दाईं ओर Menu Icon
• Menu Items और Search Icon छिपे हुए
• Hero Section: Text ऊपर और Image दाईं ओर
• Blog Posts: जैसे हैं वैसे ही
• Popular Posts: हर पोस्ट अलग लाइन में
• Contact Us: थोड़ी कम चौड़ाई
• Footer: सभी एलिमेंट्स एक के नीचे एक

🟢 Step 3: Menu Icon जोड़ें

HTML में Header Section में, Search Icon के बाद यह कोड लिखें:

HTML Code :

<div class="mobile-menu-icon">

  <img src="menu-icon.png" alt="menu icon">

</div>

फिर CSS में डेस्कटॉप के लिए इसे छिपाएँ:

CSS Code :

.mobile-menu-icon {

  display: none;

}

🟢 Step 4: Media Queries बनाना

अब CSS में Media Query लिखें:

CSS Code :

@media (max-width: 600px) {

   /* यहाँ Mobile के लिए CSS लिखेंगे */

}

👉 इसका मतलब – जब स्क्रीन 600px या उससे कम होगी, तभी ये CSS लागू होगी।

🟢 Step 5: Header को Responsive बनाना

• Menu Items और Search Icon छिपाएँ
• Menu Icon दिखाएँ
• Header की width 100% करें
• Hero Section को Flex से Block में बदलें

उदाहरण:

CSS Code :

@media (max-width: 600px) {

  nav, .search-icon, .search-container {

    display: none;

  }

  .mobile-menu-icon {

    display: block;

    cursor: pointer;

  }

  .header-wrapper {

    width: 100%;

    overflow: hidden;

  }

  .hero {

    display: block;

  }

  .hero-right {

    position: absolute;

    right: 0;

    top: 0;

    width: 100px;

    height: 100%;

  }

  .hero-left {

    display: flex;

    flex-direction: column;

    justify-content: center;

    padding-left: 32px;

  }

  .hero-left h1.main-heading {

    font-size: 48px;

    margin-bottom: 12px;

  }

  .hero-left a.btn {

    width: 160px;

    text-align: center;

  }

}

📝 Explanation

• @media (max-width: 600px) → यह condition बताती है कि ये rules सिर्फ मोबाइल (600px से छोटी screen) पर लागू होंगे।
• nav, .search-icon, .search-container { display: none; } → Navigation menu और search bar मोबाइल पर छिपा देंगे।
• .mobile-menu-icon { display: block; } → सिर्फ एक छोटा menu icon (hamburger) दिखाएँगे।
• .header-wrapper { width: 100%; } → Header पूरी screen की चौड़ाई लेगा।
• .hero { display: block; } → Hero Section (heading + image) mobile में block layout में बदल जाएगा।
• .hero-right { position: absolute; right: 0; width: 100px; } → Hero की image को दाईं ओर fix कर देंगे।
• .hero-left { flex-direction: column; } → Text (heading, button) column में आएगा।
• .hero-left h1.main-heading { font-size: 48px; } → Heading का size छोटा कर देंगे ताकि mobile में fit हो।
• .hero-left a.btn { width: 160px; text-align: center; } → Button छोटा और center aligned हो जाएगा।

🟢 Step 6: Blog Posts को Mobile Friendly बनाना

CSS Code :

@media (max-width: 600px) {

  .post-wrapper .blog-post-card .thumbnail-image img {

    height: 220px;

  }

  .post-title {

    font-size: 32px;

    margin-top: 24px;

  }

}

📝 Explanation

• .thumbnail-image img { height: 220px; } → Thumbnail image की ऊँचाई मोबाइल पर auto adjust हो जाएगी।
• .post-title { font-size: 32px; } → Blog post की heading छोटी कर दी ताकि स्क्रीन में फिट हो।

🟢 Step 7: Popular Posts को Column Layout में बदलना

CSS Code :

@media (max-width: 600px) {

  .popular-posts-container {

    box-shadow: unset;

    padding: 16px;

  }

  .popular-posts {

    flex-direction: column;

  }

  .popular-post {

    margin: 16px 0;

  }

}

📝 Explanation

• .popular-posts-container { padding: 16px; } → Container को हल्का padding देंगे।
• .popular-posts { flex-direction: column; } → सभी popular posts अब row में नहीं बल्कि एक-के-नीचे-एक दिखाई देंगे।
• .popular-post { margin: 16px 0; } → हर पोस्ट के बीच gap होगा।

🟢 Step 8: Contact Us Section

CSS Code :

@media (max-width: 600px) {

  .contact-container {

    box-shadow: unset;

    padding: 16px;

  }

}

📝 Explanation

• .contact-container { padding: 16px; } → Contact form को मोबाइल पर हल्का padding देंगे।
• box-shadow: unset; → Extra shadow हटाकर design simple बना देंगे।

🟢 Step 9: Footer को Mobile Layout में बदलना

HTML Code :

@media (max-width: 600px) {

  .footer-container {

    flex-direction: column;

  }

  .footer-center {

    text-align: center;

    margin: 60px 0;

  }

  .footer-right {

    text-align: center;

  }

  .footer-right .social-icons {

    margin: 20px auto 60px;

  }

}

📝 Explanation

• .footer-container { flex-direction: column; } → Footer का layout row से बदलकर column कर देंगे।
• .footer-center { text-align: center; } → Middle वाला text center align हो जाएगा।
• .footer-right { text-align: center; } → Social icons center में आ जाएँगे।
• .social-icons { margin: auto; } → Icons के चारों ओर space बराबर होगा।

✅ Final Result

अब आपका Mobile Version तैयार है।

• Menu Icon दाईं ओर दिखाई देगा।
• Hero Section mobile friendly होगा।
• Blog Posts, Popular Posts और Contact Us responsive होंगे।
• Footer एकदम साफ और मोबाइल जैसा लगेगा।

🔜 आगे क्या करें?

अगले स्टेप में हम Menu Icon पर क्लिक करने से Mobile Menu दिखाना सीखेंगे।
उसके बाद इस Design को Blogger Template में Convert करेंगे।