How To Add Recent Post Widget To Blogger Blog

How To 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.