Reader reads 1 post, leaves = bounce 90% = AdSense low earnings, SEO down. Related posts = shows 6 similar posts at end = user clicks 2nd post = pageviews 2x, earnings 2x. Must have.
In Post #136, add related posts by label with thumbnails.
Step 1: Add Related Posts CSS + HTML Container
- Blogger → Theme → Edit HTML → Find
]]></b:skin>→ Paste above:
/* Related Posts Post 136 */
.related-posts{margin:30px 0;padding:20px 0;border-top:2px solid #e5e7eb;}
.related-posts h3{font-size:20px;margin-bottom:16px;}
.related-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;}
.related-item{border:1px solid #e5e7eb;border-radius:12px;overflow:hidden;background:#fff;transition:0.3s;}
.related-item:hover{transform:translateY(-3px);box-shadow:0 8px 20px rgba(0,0,0,0.08);}
.related-item img{width:100%;height:150px;object-fit:cover;}
.related-item a{font-size:14px;font-weight:600;padding:10px;display:block;color:#000;text-decoration:none;line-height:1.4;}
@media(max-width:600px){.related-grid{grid-template-columns:1fr 1fr;}.related-item img{height:120px;}}
Step 2: Add Related Posts JS (By Label - Auto)
- Find
<div class='comments' id='comments'>or footer before it → Paste ABOVE comments:
<div class='related-posts' id='related-posts'>
<h3>📚 Related Posts</h3>
<div class='related-grid' id='related-grid'></div>
</div>
<script>
// Related Posts by Label - Post 136
var relatedLabel = '<data:post.labels><b:loop values="data:labels" var="label"><b:if cond="data:view.isPost"><data:label.name/></b:if></b:loop></data:post.labels>';
// Fallback: take first label via JS
document.addEventListener('DOMContentLoaded', function(){
var labelEl = document.querySelector('.post-labels a');
var label = labelEl? labelEl.textContent.trim() : 'Blogger';
var container = document.getElementById('related-grid');
if(!container) return;
var script = document.createElement('script');
script.src = '/feeds/posts/default/-/'+encodeURIComponent(label)+'?alt=json-in-script&max-results=7&callback=showRelated';
document.body.appendChild(script);
});
function showRelated(json){
var posts = json.feed.entry;
var grid = document.getElementById('related-grid');
if(!posts ||!grid) return;
var html = '';
var count = 0;
var currentUrl = window.location.href;
for(var i=0;i<posts.length;i++){
var post = posts[i];
var url = '';
for(var j=0;j<post.link.length;j++){ if(post.link[j].rel=='alternate'){ url=post.link[j].href; break; } }
if(url==currentUrl) continue;
var title = post.title.$t;
var thumb = post.media$thumbnail? post.media$thumbnail.url.replace('/s72-c/','/w300-h200-c/') : 'https://via.placeholder.com/300x200?text=No+Image';
if(post.content && post.content.$t.match(/<img/)){
var m = post.content.$t.match(/src="([^"]+)"/);
if(m) thumb = m[1];
}
html += '<div class="related-item"><a href="'+url+'"><img src="'+thumb+'" alt="'+title+'"/>'+title+'</a></div>';
count++;
if(count>=6) break;
}
grid.innerHTML = html;
}
</script>
- Save theme
Step 3: No Edit Version - Simple Related Posts (If Above Fails)
Alternative pure Blogger widget method:
- Layout → Add Gadget → HTML/JavaScript → Below post
- But this JS method above is best - shows same label posts automatically
Step 4: Manual Related Posts for High CPC (Post #135 Trick)
For posts #133-135 AdSense posts, manually add 3 high CPC posts to boost earnings:
<div class="related-posts"> <h3>💰 High Paying Guides</h3> <div class="related-grid"> <div class="related-item"><a href="POST-135-URL"><img src="THUMB"/>How to Increase AdSense CPC</a></div> <div class="related-item"><a href="POST-133-URL"><img src="THUMB"/>How to Get AdSense Approval</a></div> <div class="related-item"><a href="POST-134-URL"><img src="THUMB"/>How to Add AdSense Ads</a></div> </div> </div>
Step 5: Test
- Open any post → Scroll bottom → Should see 6 related posts with images
- Click one → Opens - check pageviews double in Blogger Stats after 2 days
- Mobile check: 2 columns on phone ✅
Post #136 Complete - Pageviews +50%.
Next Post #137: How to Add Popular Posts Widget in Sidebar - most viewed posts.
0 Comments