🎯 Blogger Template Development – Part 4
Blog Section Design (Step-by-Step Guide)
नमस्ते दोस्तों,
यह हमारे Blogger Template Development Course का चौथा भाग है।
इस भाग में हम अपनी वेबसाइट का Blog Section डिज़ाइन करेंगे।
🖥️ सबसे पहले डिज़ाइन को समझते हैं
हमने ऊपर Header Section पहले ही बना लिया था।
अब उसके नीचे हमें Blog Post Section दिखाना है।
इस सेक्शन में –
- एक Heading होगी (👉 Latest Blog Posts)
- उसके नीचे अलग-अलग Blog Posts होंगे
-
हर Blog Post में:
-
Thumbnail Image
-
Labels (Categories)
-
Post Title
-
Post Date
-
Summary Text
-
और हर पोस्ट के बाद underline (border line)
-
🔹 Step 1: Blog Section की HTML Structure
सबसे पहले हम header के बाद एक नया section बनाएँगे।
Source Code :
🔹 Step 2: Wrapper & General Styling
HTML में हमने .wrapper div इस्तेमाल किया है। इसे padding देंगे ताकि content sides से थोड़ा अंदर रहे।
Source Code :
🔹 Step 3: Section Heading Styling
अब हम h2 को style करेंगे और उसके नीचे एक yellow underline जोड़ेंगे।
Source Code :
🔹 Step 4: Thumbnail Image
Thumbnail image को fix size में और सुंदर display के लिए:
Source Code :
🔹 Step 5: Labels Styling
Labels (icon + text) को thumbnail के ऊपर दिखाएँगे।
Source Code :
🔹 Step 6: Blog Post Card Layout
हर post card के नीचे border line और spacing देंगे।
Source Code :
🔹 Step 7: Title & Date Styling
अब h3 और post-meta box को style करेंगे।
Source Code :
✅ Final Output
अब आपका Blog Section इस तरह दिखेगा:
- सबसे ऊपर heading → Latest Blog Posts
- हर Blog Post Card → Thumbnail, Labels, Title, Date और Summary
- हर पोस्ट के बीच border line और सही spacing
- Professional, Clean & Readable Layout 🚀
Blog Section Design with Line by Line Explanation
🖥️ Step 1: Blog Section की HTML Structure
<!-- End of the Header -->
👉 यह comment है। इसे लिखने का मतलब है कि Header वाला हिस्सा यहाँ खत्म हो गया। Comments code को समझाने के लिए होते हैं, ये browser में दिखाई नहीं देते।
<div class="wrapper">
👉 div एक container है। हमने इसे wrapper class दी है ताकि पूरे content को एक fixed width में रख सकें और sides से padding दे सकें।
<section class="posts-wrapper">
👉 यहाँ एक नया section है जिसका नाम posts-wrapper है। इसमें हमारे सारे blog posts होंगे।
<h2>Latest Blog Posts</h2>
👉 यह section की heading है। इसमें text लिखा "Latest Blog Posts"। इसी से users को पता चलेगा कि नीचे blog posts हैं।
🔹 Blog Post Card 1
<div class="blog-post-card">
👉 हर blog post एक अलग div में होगा जिसकी class है blog-post-card। इससे styling करना आसान हो जाएगा।
<div class="thumbnail-image">
👉 इसमें post की thumbnail image रखी जाएगी।
<img src="images/post-thumbnail-1.jpg" alt="post thumbnail">
👉 यहाँ image file का path दिया है और alt text लिखा है ताकि image load न होने पर text दिखाई दे।
<div class="post-labels">
👉 thumbnail image के ऊपर labels दिखाने के लिए यह container है।
<img src="images/label-icon.png" alt="label icon">
👉 यह labels के आगे एक छोटा icon दिखाने के लिए है।
<a href="#">Technology</a>,
<a href="#">Blogging</a>
👉 यह दो clickable labels हैं – Technology और Blogging। इन्हें future में blog categories से link कर सकते हैं।
</div>
</div>
👉 यह labels और thumbnail वाला भाग बंद हो गया।
<h3 class="post-title">First Blog Post</h3>
👉 Blog post का title (heading 3 tag)। इसे हम अलग से style करेंगे।
<div class="post-meta">Posted on 10th October</div>
👉 यह पोस्ट की meta information है (जैसे date)।
<div class="post-body">
<p>Lorem15</p>
<p>Lorem20</p>
</div>
👉 यह blog post का short summary (body text) है। अभी dummy text (Lorem) लिखा है।
</div>
👉 यह पहला blog post card पूरा हो गया।
🖥️ Step 2: Wrapper & General Styling (CSS)
.wrapper {
width: 1152px;
margin: 0 auto;
padding: 0 120px;
}
👉
width: 1152px;→ पूरे content की maximum चौड़ाई 1152px रहेगी।margin: 0 auto;→ auto margin लगाने से content center में आ जाएगा।padding: 0 120px;→ दोनों side से 120px space मिलेगा।
.wrapper p {
line-height: 2;
margin-bottom: 20px;
}
👉 paragraph का line height बड़ा कर दिया ताकि text पढ़ने में आसान लगे और नीचे 20px space दिया।
🖥️ Step 3: Section Heading Styling
.posts-wrapper {
padding-top: 100px;
}
👉 Blog section की शुरुआत ऊपर से 100px नीचे से होगी।
h2 {
font-size: 24px;
text-transform: uppercase;
margin-bottom: 36px;
position: relative;
}
👉
font-size: 24px;→ heading का size बड़ा किया।text-transform: uppercase;→ heading सारे capital letters में दिखेगी।margin-bottom: 36px;→ heading और नीचे वाले content के बीच space होगा।position: relative;→ ताकि हम इसके अंदर एक underline pseudo element डाल सकें।
h2::after {
content: "";
position: absolute;
left: 0;
bottom: -8px;
height: 3px;
width: 48px;
background-color: #ffe259;
}
👉 यह heading के नीचे एक yellow underline बनाएगा।
🖥️ Step 4: Thumbnail Image
.blog-post-card .thumbnail-image {
position: relative;
}
👉 ताकि हम thumbnail के ऊपर labels को absolute position में रख सकें।
.blog-post-card .thumbnail-image > img {
width: 100%;
height: 260px;
object-fit: cover;
}
👉 Thumbnail को fix height (260px) दी और object-fit: cover; से image crop होकर सही तरीके से fit होगी।
🖥️ Step 5: Labels Styling
.blog-post-card .thumbnail-image .post-labels {
position: absolute;
top: 16px;
left: 16px;
background: #fcfcfc;
padding: 8px 16px;
border-radius: 10px;
display: flex;
align-items: center;
box-shadow: 0 4px 8px -3px rgba(0,0,0,0.2);
}
👉
- Labels thumbnail image के ऊपर corner में show होंगे।
- White background और shadow से floating effect आएगा।
display: flex;+align-items: center;→ icon और text एक लाइन में nicely aligned होंगे।
.blog-post-card .thumbnail-image .post-labels img {
margin-right: 10px;
}
👉 Label icon और text के बीच gap।
.blog-post-card .thumbnail-image .post-labels a {
text-decoration: none;
color: black;
font-size: 14px;
font-weight: bold;
text-transform: uppercase;
margin-left: 5px;
}
👉 Labels को clickable links बनाया, black bold text में, और uppercase letters में।
🖥️ Step 6: Blog Post Card Layout
.blog-post-card {
padding-top: 100px;
padding-bottom: 50px;
border-bottom: 1px solid #bbafaf;
}
👉 हर blog post के ऊपर और नीचे spacing दी और नीचे एक हल्की grey border line।
.blog-post-card:nth-of-type(1) {
padding-top: 16px;
}
👉 सिर्फ पहले post card का top padding कम किया ताकि heading के बहुत नीचे न लगे।
🖥️ Step 7: Title & Date Styling
.blog-post-card h3 {
font-family: 'Dancing Script', cursive;
font-size: 36px;
margin: 42px 0 12px 0;
}
👉 Blog title को एक stylish cursive font दिया, बड़ा size और ऊपर-नीचे spacing।
.blog-post-card .post-meta {
font-size: 14px;
background-color: black;
color: lightgray;
display: inline-block;
padding: 4px 16px;
margin-left: 24px;
margin-bottom: 24px;
}
👉 Date को black box में दिखाया, light gray text color के साथ।
✅ Final Result
अब Blog Section पूरी तरह ready है और हर code line का explanation आपको समझ में आ गया होगा 🚀
0 Comments
कमेंट केवल पोस्ट से रिलेटेड करें