Welcome back to the Blogger Template Creation series here on atfreecode! In Part 1, we learned the basic skeleton of a Blogger theme. In Part 2, we explored how the <b:skin> and <b:section> tags work. Now in Part 3, it’s time to build the most important part — the main post area.
This is where your blog posts appear. And to build it properly, we need to understand how Blogger works by default — and why you shouldn’t rely on the auto-generated code if you're serious about making your own template.
---⚙️ What Happens by Default When You Add the "Blog" Widget?
If you go to Blogger’s Layout tab and click “Add a Gadget”, then choose “Blog” — Blogger inserts this automatically into your template:
<b:section id='main' class='main-content'>
<b:widget id='Blog1' type='Blog' title='Blog Posts' visible='true' locked='true' />
</b:section>
Even though that looks simple, **Blogger hides the real code** that renders your posts. Behind the scenes, it generates complex HTML and inline styles to show titles, dates, labels, share buttons, post content, comments, and more.
👎 Problems with Default Output
- You can’t control how each part is structured — Blogger decides that for you.
- The HTML includes nested divs and tables that are outdated and hard to style.
- You don’t see where your headings, images, or ads actually go in the code.
- It slows you down when building a fast, responsive, SEO-friendly design.
So instead of letting Blogger guess how your posts should look, we’ll **take full control** by manually defining the rendering logic using <b:includable> and conditional tags.
✅ How to Build the Blog1 Widget Manually
We’ll now override the default Blog1 behavior using a custom <b:includable id='main'>. This lets us define exactly how posts show up on:
Here’s a complete structure you can paste into your template:
<b:widget id='Blog1' type='Blog' title='Blog Posts' visible='true' locked='true'>
<b:includable id='main'>
<b:if cond='data:view.isMultipleItems'>
<!-- Home or label page: show post previews -->
<b:loop values='data:posts' var='post'>
<article class='post-preview'>
<h2 class='post-title'>
<a expr:href='data:post.url'><data:post.title/></a>
</h2>
<b:if cond='data:post.featuredImage'>
<img class='post-thumbnail' expr:src='data:post.featuredImage' expr:alt='data:post.title' />
</b:if>
<div class='post-snippet'><data:post.snippet/></div>
<a class='read-more' expr:href='data:post.url'>Read More</a>
</article>
</b:loop>
<b:include name='nextprev'/>
<b:else/>
<!-- Post page: show full content and comments -->
<b:loop values='data:posts' var='post'>
<article class='post-full'>
<h1 class='post-title'><data:post.title/></h1>
<div class='post-body'><data:post.body/></div>
<b:include data='post' name='commentForm'/>
</article>
</b:loop>
</b:if>
</b:includable><b:includable id='nextprev'>
<div class='pagination'>
<b:if cond='data:nextPageUrl'>
<a class='blog-pager-older-link' expr:href='data:nextPageUrl'>Next</a>
</b:if>
<b:if cond='data:previousPageUrl'>
<a class='blog-pager-newer-link' expr:href='data:previousPageUrl'>Previous</a>
</b:if>
</div>
</b:includable>
</b:widget>
🧠 Explanation: How This Works
| Line | What It Does |
|---|---|
data:view.isMultipleItems | Detects whether you're on homepage/labels vs. a single post page. |
<b:loop values='data:posts' | Loops through each blog post and renders HTML for it. |
data:post.title, .snippet, .body | Loads different parts of each post (title, summary, full content). |
<b:include name='nextprev'/> | Adds Previous/Next navigation |
<b:include name='commentForm'/> | Adds the comment box only on post pages. |
🎨 Add Basic Styling (Inside <b:skin>)
.post-preview, .post-full {
background: #fff;
border: 1px solid #ddd;
padding: 1rem;
margin-bottom: 2rem;
border-radius: 8px;
}
.post-title {
font-size: 1.6rem;
margin-bottom: 0.5rem;
}
.post-snippet {
color: #555;
margin: 0.5rem 0;
}
.read-more {
display: inline-block;
font-weight: bold;
color: #0073e6;
}
📌 Summary: Why This Matters
- Default Blogger output hides the real structure — hard to edit or optimize.
- Custom rendering gives you full control over layout, SEO, and performance.
- Cleaner HTML = faster blog, better user experience, and easier ad placement later.
📘 What’s Next?
In Part 4, we’ll explore how to create flexible <b:section> blocks for sidebars, footers, and conditionally displayed widgets — perfect for building a complete Blogger layout from scratch.
Thank you for following the series on atfreecode. If you found this helpful, don’t forget to bookmark and check out the next chapter soon!