How To Add Recent Post Widget To Blogger Blog

Stay connected with your latest content by adding a stylish and auto-updated Recent Posts widget to your Blogger blog.

This simple widget automatically displays your newest posts with thumbnails and dates to improve engagement and navigation.

Add Recent Post Widget To Blogger Blog :

Follow the steps below :

1. Log In Blogger >> 2. Dashboard >> 3. +add a Gadget >> 4. HTML/JavaScript

Copy the below code and paste it in HTML/JavaScript content

<!-- ✅ Stylish Auto Updated Recent Posts Widget for Blogger -->
<style>
.recent-posts-widget {
  font-family: 'Segoe UI', sans-serif;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 12px;
  padding: 15px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}
.recent-posts-widget h3 {
  font-size: 20px;
  margin-bottom: 15px;
  color: #333;
  text-align: center;
}
.recent-posts-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.recent-posts-list li {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
  border-bottom: 1px dashed #eee;
  padding-bottom: 10px;
}
.recent-posts-thumb img {
  width: 70px;
  height: 70px;
  object-fit: cover;
  border-radius: 8px;
  margin-right: 10px;
}
.recent-posts-info {
  flex: 1;
}
.recent-posts-info a {
  color: #1a73e8;
  font-weight: bold;
  font-size: 14px;
  text-decoration: none;
}
.recent-posts-info a:hover {
  text-decoration: underline;
}
.recent-posts-info span {
  display: block;
  font-size: 12px;
  color: #888;
  margin-top: 4px;
}
</style>
<div class="recent-posts-widget">
  <h3>📌 Recent Posts</h3>
  <ul class="recent-posts-list" id="recent-posts-container"></ul>
</div>
<script>
  fetch('/feeds/posts/default?alt=json&max-results=5')
    .then(response => response.json())
    .then(data => {
      const container = document.getElementById('recent-posts-container');
      const posts = data.feed.entry;
      posts.forEach(post => {
        const title = post.title.$t;
        const url = post.link.find(l => l.rel === 'alternate').href;
        const date = new Date(post.published.$t).toDateString();
        const thumbnail = post.media$thumbnail ? post.media$thumbnail.url : 'https://via.placeholder.com/70';
        const li = document.createElement('li');
        li.innerHTML = `
          <div class="recent-posts-thumb">
            <a href="${url}" title="${title}">
              <img src="${thumbnail}" alt="${title}" loading="lazy"/>
            </a>
          </div>
          <div class="recent-posts-info">
            <a href="${url}">${title}</a>
            <span>${date}</span>
          </div>
        `;
        container.appendChild(li);
      });
    });
</script>

• Now Save the HTML/JavaScript and also save the layout settings. 

Now refresh your blog and see that the Recent Post Widget will have been added.