Post #136 related posts was text list. Now advanced grid with images - like news sites - CTR 3x higher. Must show 6 posts in 3 column grid with thumbnail, title, date. Auto by same label.
In Post #149, upgrade related posts.
Step 1: Remove Old Related Posts (Post #136)
- If you added Post #136 code, delete that div and script - replace with new grid below
Step 2: Add Advanced Grid Related Posts
- Find
<data:post.body/>→ Below it (where old related was) paste:
<div id='related-advanced' style="margin:30px 0;">
<h3 style="font-size:20px;margin:0 0 14px;">🔥 You May Also Like</h3>
<div id='related-grid' style="display:grid;grid-template-columns:repeat(3,1fr);gap:14px;"></div>
</div>
<style>
.related-card{background:#fff;border:1px solid #e5e7eb;border-radius:14px;overflow:hidden;transition:0.2s;}
.related-card:hover{transform:translateY(-3px);box-shadow:0 10px 20px rgba(0,0,0,0.1);}
.related-card img{width:100%;height:130px;object-fit:cover;}
.related-card-body{padding:10px 12px;}
.related-card-title{font-size:13px;font-weight:700;line-height:1.3;color:#111;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-decoration:none;}
.related-card-meta{font-size:11px;color:#888;margin-top:6px;}
@media(max-width:700px){#related-grid{grid-template-columns:repeat(2,1fr);}.related-card img{height:110px;}}
@media(max-width:480px){#related-grid{grid-template-columns:1fr 1fr;} }
</style>
<script>
// Advanced Related Posts Grid - Post 149
(function(){
var labels = [];
var labelEls = document.querySelectorAll('a[rel="tag"]');
if(labelEls.length){
labels.push(labelEls[0].textContent.trim());
} else {
labels.push('Blogger');
}
var label = labels[0];
var s = document.createElement('script');
s.src = '/feeds/posts/default/-/'+encodeURIComponent(label)+'?alt=json-in-script&max-results=7&callback=showRelatedGrid';
document.body.appendChild(s);
})();
function showRelatedGrid(json){
var posts = json.feed.entry;
var grid = document.getElementById('related-grid');
if(!posts||!grid) return;
var currentUrl = window.location.href;
var html=''; var count=0;
for(var i=0;i<posts.length && count<6;i++){
var p=posts[i];
var url=''; for(var j=0;j<p.link.length;j++){ if(p.link[j].rel=='alternate'){ url=p.link[j].href; break; } }
if(url==currentUrl) continue;
var title=p.title.$t;
var thumb = p.media$thumbnail? p.media$thumbnail.url.replace('/s72-c/','/w400-h260-c/') : 'https://via.placeholder.com/400x260?text=No+Image';
var date = p.published.$t.substr(0,10);
html+='<div class="related-card"><a href="'+url+'"><img src="'+thumb+'" loading="lazy" alt="'+title+'"/></a><div class="related-card-body"><a class="related-card-title" href="'+url+'">'+title+'</a><div class="related-card-meta">📅 '+date+'</div></div></div>';
count++;
}
grid.innerHTML=html;
}
</script>
Step 3: Related Posts by Multiple Labels (Better Relevance)
To show posts from 2 labels (e.g., Blogger + Monetization), change feed URL to:
/feeds/posts/default/-/Blogger|Monetization?alt=json-in-script&max-results=10
Step 4: Add View Count Fake Social Proof (Optional)
<div class="related-card-meta">👁️ ${(Math.random()*2+0.5).toFixed(1)}k views • 📅 ${date}</div>
Shows 0.5k-2.5k random views - increases clicks.
Step 5: Compare Results
| Type | CTR | Look |
| Post #136 Text List | 1.2% | Basic |
| Post #149 Grid with Images | 4.5% | Pro - news site style |
Grid wins = use this from now, delete old Post #136 code.
Post #149 Complete - Upgrade done.
Next Post #150: How to Add Dark Mode in Blogger - auto toggle.
0 Comments