No related posts = users read 1 page and leave. Bounce rate kills AdSense RPM.
In this tutorial, you'll add a related posts widget with thumbnails in Blogger. Follow along and you'll double pageviews + keep users on site in 2025.
Step 1: Why Related Posts Widget Increases AdSense Earnings
More pageviews per user = more ad impressions = more money.
- Lower bounce rate: Users click to 2nd, 3rd post instead of exiting
- Higher RPM: AdSense pays more for engaged users with 3+ pageviews
- SEO boost: Internal links help Google crawl deeper pages
- User experience: Readers find more content they like
Image: Analytics showing bounce rate drop after adding related posts
Step 2: Add Related Posts by Label in Blogger
This method shows posts from same label. 100% automatic.
- Blogger → Theme → Edit HTML → Ctrl+F → Search
<div class='post-footer'> - Paste this code ABOVE that line:
<b:if cond='data:blog.pageType == "item"'> <div class='related-posts'> <h3>Related Posts</h3> <ul> <b:loop values='data:post.labels' var='label'> <b:if cond='data:label.isLast!= "true"'> <b:loop values='data:label.posts' var='post'> <b:if cond='data:post.id!= data:blog.postId'> <li><a expr:href='data:post.url'><data:post.title/></a></li> </b:if> </b:loop> </b:if> </b:loop> </ul> </div> </b:if>
- Save theme → Open any post → Related posts show below content
Step 3: Related Posts Widget with Thumbnails
Images get 94% more clicks than text links. Use this version.
- Theme → Edit HTML → Search
</head>→ Paste this CSS above it:
<style>
.related-posts {margin: 40px 0;}
.related-posts h3 {font-size: 20px; margin-bottom: 15px;}
.related-grid {display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px;}
.related-item {border: 1px solid #e0e0e0; border-radius: 6px; overflow: hidden;}
.related-item img {width: 100%; height: 120px; object-fit: cover;}
.related-item a {display: block; padding: 10px; font-size: 14px; text-decoration: none; color: #333;}
.related-item:hover {box-shadow: 0 2px 8px rgba(0,0,0,0.1);}
@media (max-width:768px){.related-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:480px){.related-grid{grid-template-columns:1fr;}}
</style>
- Search
<data:post.body/>→ Paste this code BELOW it:
<b:if cond='data:blog.pageType == "item"'>
<div class='related-posts'>
<h3>You Might Also Like</h3>
<div class='related-grid' id='related-posts'></div>
<script type='text/javascript'>
//<![CDATA[
var relatedPosts = [];
var currentPostUrl = "<data:post.url/>";
<b:loop values='data:post.labels' var='label'>
<b:loop values='data:label.posts' var='post'>
<b:if cond='data:post.url!= data:blog.postUrl'>
relatedPosts.push({
title: "<data:post.title/>",
url: "<data:post.url/>",
img: "<data:post.firstImageUrl/>"
});
</b:if>
</b:loop>
</b:loop>
relatedPosts = relatedPosts.slice(0,6);
var html = '';
for(var i=0;i<relatedPosts.length;i++){
var img = relatedPosts[i].img || 'https://via.placeholder.com/300x200';
html += '<div class="related-item"><a href="'+relatedPosts[i].url+'"><img src="'+img+'">'+relatedPosts[i].title+'</a></div>';
}
document.getElementById('related-posts').innerHTML = html;
//]]>
</script>
</div>
</b:if>
Step 4: Related Posts Best Practices for SEO 2025
| Setting | Recommended | Why |
| Number of posts | 3-6 posts max | Too many = slow page, choice paralysis |
| Match by | Same label/category | Relevant = higher click rate |
| Thumbnail size | 300x200px, under 50KB | Fast loading = better Core Web Vitals |
| Placement | Below post, above comments | Highest CTR spot |
Step 5: Test Related Posts + Track CTR
- Test: Open 5 different posts → Check related posts are relevant, not same post
- Mobile test: Check layout on phone → Should stack 1 column
- Speed test: pagespeed.web.dev → Related posts should not hurt LCP
- Track clicks: Analytics → Behavior → Events → Set up click tracking on related links
- Goal: 15-25% CTR from related posts = healthy
Bad practice to avoid: Showing random posts or same post in related section. Users bounce. Always match by label.
Important: If post has no labels, related posts won't show. Add 2-3 labels to every post. For old posts, use Labels gadget → Add labels in bulk. Update thumbnails - first image in post becomes related post thumbnail.
0 Comments