How to Add a Recent Posts Widget in Blogger With Thumbnails

A Recent Posts widget in Blogger displays your newest articles automatically, helping visitors discover content that has just been published.

Blogger does not require a plugin for this. You can create a lightweight Recent Posts widget using Blogger's own post feed and an HTML/JavaScript gadget.

This guide explains how to add a Recent Posts widget in Blogger with thumbnails, control the number of posts, style the widget and troubleshoot common feed or image problems.

What Is a Recent Posts Widget?

A Recent Posts widget automatically lists your newest published articles.

For example:

Latest Posts

• How to Improve Internal Linking in Blogger
• How to Add a Related Posts Widget
• How to Schedule Posts in Blogger
• How to Add Popular Posts in Blogger

Unlike Popular Posts, the list is based on publication order rather than the number of views.

Widget	Posts Shown
Recent Posts	Newest published articles
Popular Posts	Frequently viewed articles

How the Blogger Recent Posts Widget Works

Blogger provides a site feed containing your published posts.

A lightweight script can request that feed, read the latest entries and display:

Post thumbnail
Post title
Post URL

This allows the widget to update automatically whenever you publish a new article.

Step 1: Check Your Blogger Site Feed

Before creating the widget, go to:

Blogger → Settings → Site feed → Allow blog feed

Make sure the blog feed is not set to:

None

Blogger currently provides options including Full, Until Jump Break, Short, None and Custom.

A Recent Posts widget that reads the Blogger feed requires the post feed to remain available.

Step 2: Add an HTML/JavaScript Gadget

Open:

Blogger → Layout

Choose the sidebar, footer or another supported widget area and click:

Add a Gadget → HTML/JavaScript

You can enter:

Recent Posts

as the Blogger gadget title, or leave the gadget title blank and use the title included in the custom markup.

Step 3: Add the Recent Posts Widget Code

Paste the following code into the HTML/JavaScript gadget:

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

<script>
document.addEventListener('DOMContentLoaded', function () {
  var widget = document.getElementById('recentPosts');

  if (!widget) return;

  var list = widget.querySelector('.recent-posts-list');

  fetch('/feeds/posts/default?alt=atom&max-results=5')
    .then(function (response) {
      if (!response.ok) {
        throw new Error('Feed request failed');
      }

      return response.text();
    })
    .then(function (text) {
      var xml = new DOMParser().parseFromString(text, 'application/xml');
      var entries = Array.from(xml.getElementsByTagName('entry'));

      entries.forEach(function (entry) {
        var title = entry.getElementsByTagName('title')[0];
        var links = Array.from(entry.getElementsByTagName('link'));
        var alternate = links.find(function (link) {
          return link.getAttribute('rel') === 'alternate';
        });

        if (!title || !alternate) return;

        var item = document.createElement('li');
        var link = document.createElement('a');
        var textWrap = document.createElement('span');

        link.className = 'recent-post-link';
        link.href = alternate.getAttribute('href');

        var thumbnails = entry.getElementsByTagNameNS('*', 'thumbnail');

        if (thumbnails.length) {
          var image = document.createElement('img');

          image.src = thumbnails[0].getAttribute('url');
          image.alt = '';
          image.width = 72;
          image.height = 72;
          image.loading = 'lazy';

          link.appendChild(image);
        }

        textWrap.className = 'recent-post-title';
        textWrap.textContent = title.textContent;

        link.appendChild(textWrap);
        item.appendChild(link);
        list.appendChild(item);
      });

      if (!list.children.length) {
        widget.style.display = 'none';
      }
    })
    .catch(function () {
      widget.style.display = 'none';
    });
});
</script>

This example displays the five newest posts and uses Blogger's available feed thumbnail when one exists.

Step 4: Style the Recent Posts Widget

Add the following CSS to your theme and adjust it to match your design:

.recent-posts-list{
  list-style:none;
  margin:0;
  padding:0;
}

.recent-posts-list li{
  margin:0 0 15px;
}

.recent-post-link{
  display:flex;
  align-items:center;
  gap:12px;
  text-decoration:none;
}

.recent-post-link img{
  width:72px;
  height:72px;
  object-fit:cover;
  flex:0 0 72px;
  border-radius:6px;
}

.recent-post-title{
  line-height:1.4;
  font-weight:600;
}

Do not copy the exact design blindly if your Blogger template already defines its own spacing, typography and border-radius system.

How to Change the Number of Recent Posts

Find:

max-results=5

To display four posts, change it to:

max-results=4

For six posts:

max-results=6

For most sidebars, approximately 4–6 recent posts is enough.

A very long list can make the sidebar unnecessarily large.

Why Does a Recent Post Have No Thumbnail?

A feed entry may not contain a suitable thumbnail when the article does not contain an image or Blogger cannot expose one through the feed.

The example widget handles this by displaying the post title without an image.

This is generally better than showing a broken image.

If you want consistent thumbnails, use a suitable main image in your important Blogger posts and optimize it properly.

See our Blogger image optimization guide.

Where Should You Place Recent Posts?

Common locations include:

Sidebar
Homepage
Footer
Below individual articles

For a standard tutorial blog, the sidebar is usually the simplest location.

A sidebar might contain:

Search
Categories
Popular Guides
Recent Posts

Do not duplicate the same Recent Posts list in several places unless it genuinely improves navigation.

Can Recent Posts Slow Down Blogger?

The example uses one request to your Blogger post feed and does not load a third-party JavaScript library.

Keep it lightweight by:

Displaying only a few posts.
Using small thumbnails.
Lazy-loading widget images.
Avoiding unnecessary animation.
Avoiding external widget providers when they are not needed.

If your sidebar already contains many widgets, decide whether Recent Posts provides enough value to justify another component.

Why Is the Recent Posts Widget Empty?

Check the following:

Your blog has published posts.
The site feed is enabled.
The HTML/JavaScript gadget is saved.
The widget is not hidden by your theme CSS.
JavaScript errors are not preventing the feed from loading.

Also check whether you configured a custom:

Post feed redirect URL

under Blogger's Site feed settings. A feed redirect to an external service can affect custom scripts that expect Blogger's normal feed response.

Why Is Add a Gadget Missing?

If your preferred sidebar or footer does not show:

Add a Gadget

your theme may prevent additional widgets in that section.

Blogger sections can use settings such as:

showaddelement='no'

or a limited:

maxwidgets

value.

For the complete explanation, see our Blogger widgets and gadgets guide.

Questions About Blogger Recent Posts

How do I add Recent Posts in Blogger?

You can add an HTML/JavaScript gadget that reads your Blogger post feed and automatically displays the latest published posts.

Can Blogger Recent Posts show thumbnails?

Yes. When Blogger exposes a thumbnail for a feed entry, a custom Recent Posts widget can display it alongside the post title.

How many Recent Posts should I show?

Approximately four to six is usually sufficient for a sidebar. Use fewer when space is limited.

Why is a thumbnail missing from one post?

The post may not contain a suitable image or its feed entry may not provide a thumbnail. A good widget should fall back to displaying the title without a broken image.

Why is my Recent Posts widget not working?

Check that the Blogger site feed is enabled, the gadget code was saved correctly and your browser console does not show JavaScript or feed-loading errors.

What is the difference between Recent Posts and Popular Posts?

Recent Posts displays your newest articles, while Popular Posts ranks content based on Blogger post-view statistics.

Final Recommendation

For a custom Blogger Recent Posts section, use Blogger's own post feed rather than installing a large third-party widget library.

Keep the list compact, show small thumbnails when available and let posts without images fall back gracefully to a text link.

For most sidebars, four to six recent posts are enough.

A Recent Posts widget should make fresh content easier to discover without adding unnecessary weight or clutter to your Blogger layout.