How to Add Recent Posts Widget in Blogger - Latest Posts Sidebar 2026

 

Post #137 popular posts = old top posts. Need recent posts widget too - shows Google you update regularly, helps index new posts fast, internal linking auto. Blogger default recent posts = text only boring.

In Post #138, add recent posts with thumbnails + date.

Step 1: Add Recent Posts Gadget in Sidebar + Footer

1. Blogger → Layout → Sidebar → Add Gadget → HTML/JavaScript → Title: Latest Guides ✨
2. Paste:

<style>
/* Recent Posts Post 138 */
.recent-list{list-style:none;padding:0;margin:0;}
.recent-item{display:flex;gap:10px;margin-bottom:14px;align-items:center;}
.recent-item img{width:65px;height:55px;object-fit:cover;border-radius:8px;flex-shrink:0;}
.recent-item a{font-size:13px;font-weight:600;color:#111;text-decoration:none;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.recent-meta{font-size:11px;color:#888;margin-top:3px;}
.new-badge{background:#ef4444;color:#fff;font-size:9px;padding:2px 6px;border-radius:10px;margin-left:6px;vertical-align:middle;}
</style>

<div id="recent-posts-wrap"><ul class="recent-list" id="recent-list"></ul></div>

<script>
function showRecent(json){
  var posts=json.feed.entry;
  var list=document.getElementById('recent-list');
  if(!posts||!list) return;
  var html='';
  for(var i=0;i<Math.min(posts.length,6);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; } }
    var title=post.title.$t;
    var thumb=post.media$thumbnail? post.media$thumbnail.url.replace('/s72-c/','/w300-h200-c/') : 'https://via.placeholder.com/65x55?text=New';
    if(post.content && post.content.$t.match(/src="([^"]+)"/)){
      var m=post.content.$t.match(/src="([^"]+)"/); if(m) thumb=m[1];
    }
    var date = new Date(post.published.$t).toLocaleDateString('en-US',{month:'short',day:'numeric'});
    var badge = i<2? '<span class="new-badge">NEW</span>' : '';
    html+='<li class="recent-item"><a href="'+url+'"><img src="'+thumb+'"/></a><div><a href="'+url+'">'+title+badge+'</a><div class="recent-meta">'+date+' • Blogger</div></div></li>';
  }
  list.innerHTML=html;
}
</script>
<script src="/feeds/posts/default?alt=json-in-script&max-results=8&callback=showRecent"></script>

3. Save

Step 2: Add Recent Posts in Footer - 4 Columns (Pro Blogs Do This)

1. Layout → Footer → Add Gadget → HTML/JavaScript → Title: Recent
2. Use same code but change max-results=6 to max-results=4 and grid layout:

<style>.footer-recent{display:grid;grid-template-columns:1fr 1fr;gap:10px;}.footer-recent a{font-size:12px;}</style>
<div id="footer-recent"></div>
<script>... same as above but footer...</script>

Step 3: Recent Posts by Label - Category Wise

If you have categories like Blogger, AdSense, SEO - add label specific recent posts:

<script src="/feeds/posts/default/-/AdSense?alt=json-in-script&max-results=5&callback=showRecent"></script>

Change AdSense to your label name - shows latest in that category only.

Step 4: Why Recent Posts Important for SEO?

Benefit	How?
Fast indexing	New post link appears on all pages in sidebar = Google crawls faster (Post #137+138 = all pages have new post link)
Lower bounce	User sees new post, clicks
Internal linking auto	No manual linking needed, auto internal links = SEO boost

Step 5: Combine Popular + Recent for Best UX

Sidebar order:

1. Recent Posts (Post #138) - Top - shows blog active
2. Popular Posts (Post #137) - Middle - shows best content
3. Labels/Categories - Bottom

This order = new visitors see fresh content, old visitors see popular.

Post #138 Complete.

Next Post #139: How to Add Featured Post Widget in Blogger - sticky top post.