How to Add a Related Posts Widget in Blogger

A Related Posts widget in Blogger helps visitors discover additional articles connected to the post they are currently reading.

A common approach is to use Blogger Labels. For example, when someone reads an article labeled Blogger Widgets, the related-posts section can display other posts carrying the same label.

This guide explains how to add Related Posts in Blogger, including a simple manual method and a lightweight automatic label-based solution for custom Blogger templates.

What Is a Related Posts Widget?

A Related Posts section displays links to other articles that cover a similar topic.

For example, below an article about Blogger widgets you might display:

• How to Add an HTML/JavaScript Widget in Blogger
• How to Add a Popular Posts Widget in Blogger
• How to Add a Featured Post Widget in Blogger
• How to Customize Blogger Widgets With CSS

This gives visitors an easy next step after finishing the current article.

How Should Blogger Choose Related Posts?

The simplest useful relationship is usually the post label.

For example:

Current post label:
Blogger Widgets

Related posts:
Other posts labeled Blogger Widgets

This works well when your Blogger labels represent meaningful categories rather than dozens of unrelated keywords.

See our guide to creating Blogger categories using Labels if your categories still need organizing.

Method 1: Add Related Posts Manually

The simplest and most reliable method is to manually add a few related article links near the end of important posts.

For example:

<div class="related-posts">
  <h2>Related Blogger Guides</h2>
  <ul>
    <li><a href="/article-one.html">Article One</a></li>
    <li><a href="/article-two.html">Article Two</a></li>
    <li><a href="/article-three.html">Article Three</a></li>
  </ul>
</div>

This method gives you complete control over which articles are recommended.

It is particularly useful when your website has relatively few posts or when editorial relevance is more important than automation.

Manual vs Automatic Related Posts

Method	Advantages	Best For
Manual	Maximum relevance and no JavaScript	Smaller websites
Automatic by label	Updates automatically as new posts are published	Larger tutorial blogs

For a growing Blogger tutorial site, an automatic label-based widget can reduce maintenance.

Method 2: Create Automatic Related Posts by Label

Blogger provides post label data inside its Blog Posts widget and also exposes post feeds by label.

A custom theme can combine these two features:

1. Read the current post's first label.
2. Request posts from that label feed.
3. Exclude the current article.
4. Display a few remaining posts.

This creates a lightweight Related Posts list without installing a large third-party library.

Step 1: Back Up Your Blogger Theme

Because the automatic method requires theme code, create a backup first.

Go to:

Blogger → Theme → Backup

Download the current XML file before editing anything.

If necessary, follow our Blogger theme backup guide.

Step 2: Find the Blogger Post Body

Open:

Blogger → Theme → Edit HTML

Inside the main Blog Posts widget, locate the template code that outputs the individual post content.

Depending on the theme, you may find something similar to:

<data:post.body/>

Custom themes can structure the Blog1 widget differently, so do not assume every Blogger template will contain identical surrounding markup.

Step 3: Add the Related Posts Markup

Inside the post context, after the article content, you can use markup similar to:

<b:if cond='data:view.isPost'>
  <div class='related-posts' expr:data-current-url='data:post.url' id='relatedPosts'>
    <h2>Related Posts</h2>

    <div class='related-labels' hidden='hidden'>
      <b:loop values='data:post.labels' var='label'>
        <span class='related-label' expr:data-label='data:label.name'/>
      </b:loop>
    </div>

    <ul class='related-list'/>
  </div>
</b:if>

This stores the post labels so JavaScript can use them when finding related articles.

The example uses the first post label as the primary category.

Step 4: Add the Related Posts JavaScript

Add the following script once near the end of your theme, before:

</body>

The script requests posts from the first available label and excludes the current article.

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

  if (!box) return;

  var labelNode = box.querySelector('.related-label');
  var list = box.querySelector('.related-list');

  if (!labelNode || !list) {
    box.style.display = 'none';
    return;
  }

  var label = labelNode.getAttribute('data-label');
  var currentUrl = box.getAttribute('data-current-url');

  var currentPath;

  try {
    currentPath = new URL(currentUrl, location.origin).pathname;
  } catch (error) {
    currentPath = location.pathname;
  }

  var feedUrl = '/feeds/posts/default/-/' +
    encodeURIComponent(label) +
    '?max-results=8';

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

      entries.forEach(function (entry) {
        if (shown === 4) return;

        var title = entry.querySelector('title');
        var links = Array.from(entry.querySelectorAll('link'));
        var alternate = links.find(function (link) {
          return link.getAttribute('rel') === 'alternate';
        });

        if (!title || !alternate) return;

        var href = alternate.getAttribute('href');
        var postPath;

        try {
          postPath = new URL(href, location.origin).pathname;
        } catch (error) {
          return;
        }

        if (postPath === currentPath) return;

        var item = document.createElement('li');
        var anchor = document.createElement('a');

        anchor.href = href;
        anchor.textContent = title.textContent;

        item.appendChild(anchor);
        list.appendChild(item);

        shown = shown + 1;
      });

      if (shown === 0) {
        box.style.display = 'none';
      }
    })
    .catch(function () {
      box.style.display = 'none';
    });
});
</script>

This version intentionally outputs simple text links rather than large images so the widget remains lightweight.

Step 5: Style the Related Posts Widget

Add CSS that matches your existing Blogger design.

For example:

.related-posts{
  margin-top:35px;
}

.related-posts h2{
  margin-bottom:15px;
}

.related-list{
  margin:0;
  padding-left:20px;
}

.related-list li{
  margin:9px 0;
}

.related-list a{
  text-decoration:none;
}

.related-list a:hover{
  text-decoration:underline;
}

Keep the design consistent with your other article sections.

How Many Related Posts Should You Display?

You generally do not need a large list.

For most Blogger articles:

3–5 related posts

is sufficient.

The sample code above displays a maximum of:

4

related articles.

This gives visitors useful choices without creating a long secondary article list below every post.

Use the Most Important Label First

The example automatic widget uses the first label assigned to the current post.

Therefore, if you use multiple labels, keep your primary content category consistent.

For example:

Blogger Widgets

is more useful for this article than a vague label such as:

Tutorial

A clear label produces more relevant recommendations.

Avoid Creating Too Many Labels for Related Posts

Do not add extra labels simply to manipulate the Related Posts widget.

A post containing:

Blogger
Blogspot
Tutorial
Tips
Guide
Widget
Widgets
Blogger Widget
Blogger Tips

becomes harder to categorize consistently.

Use a small set of meaningful labels and let related content come from those categories.

Related Posts vs Popular Posts

These widgets solve different problems.

Widget	How Posts Are Selected
Related Posts	Topic or label relevance
Popular Posts	Post-view popularity

A popular article may have nothing to do with the page someone is currently reading.

A Related Posts section should prioritize topical relevance.

For the built-in popularity feature, see our Blogger Popular Posts widget guide.

Where Should Related Posts Appear?

The most natural location is usually near the end of the article.

A typical structure is:

Article content
↓
Final section
↓
Related Posts
↓
Comments

This gives readers a logical next destination after completing the current post.

Should Related Posts Include Images?

Images can make the section more visual, but they also make the widget more complicated and can increase page weight.

For a tutorial website, a clean list containing:

Post title + link

can work extremely well.

If you later add thumbnails, make sure they are appropriately sized and optimized.

Can Related Posts Help Internal Linking?

Yes. Related posts create additional internal links between topically connected articles.

However, automated related links should complement—not completely replace—contextual links inside your article content.

For example, when explaining Popular Posts, linking directly to your Popular Posts tutorial inside the paragraph is more useful than relying only on a Related Posts list at the bottom.

Can a Related Posts Widget Slow Down Blogger?

It can if you install a large third-party script, request many feeds or load several large thumbnail images.

The lightweight example in this guide:

• Makes one label-feed request.
• Displays only a few links.
• Does not load external libraries.
• Does not require large thumbnails.

Keep additional functionality proportional to the value it provides.

Why Is My Related Posts Widget Empty?

Check whether:

• The current post has a label.
• Other published posts use the same label.
• Your Blogger site feed is enabled.
• The widget code is inside the post context.
• JavaScript errors appear in the browser console.

If the current label contains only one article, there may simply be no other post to recommend.

Check Your Blogger Site Feed Setting

The automatic method depends on Blogger's post feed.

Check:

Blogger → Settings → Site feed → Allow blog feed

If site feeds are completely disabled, a feed-based Related Posts solution will not be able to retrieve the posts.

This is one reason a manual Related Posts section remains the most universally reliable method.

Related Posts Widget Checklist

1. Organize posts with meaningful Blogger Labels.
2. Back up the theme before editing it.
3. Place Related Posts near the end of individual posts.
4. Exclude the current article from the results.
5. Display approximately three to five related articles.
6. Keep the widget lightweight.
7. Use text links if thumbnails are unnecessary.
8. Check that Blogger site feeds are enabled for feed-based widgets.
9. Test the widget on desktop and mobile.
10. Keep contextual internal links inside articles as well.

Questions About Blogger Related Posts

How do I add Related Posts in Blogger?

You can manually add related article links or create an automatic widget that reads the current post's label and retrieves other posts from the same Blogger label feed.

Does Blogger have a Related Posts gadget?

Many Blogger themes do not provide a standard automatic Related Posts section, so related posts are commonly added through custom theme code or manually selected links.

How should Blogger choose related posts?

Using a meaningful shared Label is a simple approach. For example, articles labeled Blogger Widgets can recommend other posts from the Blogger Widgets category.

How many related posts should I show?

Three to five relevant articles are usually enough. A very large list can distract readers and make the bottom of the article unnecessarily long.

Why are Related Posts not appearing?

Check that the current article has a label, other posts share that label, the site feed is enabled and your theme code does not contain JavaScript or template errors.

Do Related Posts help Blogger SEO?

They provide useful internal links and can help visitors discover related articles. However, use them for genuine navigation rather than automatically linking unrelated pages simply for SEO.

Final Recommendation

If your Blogger site is still relatively small, manually choosing three or four genuinely related articles gives you the highest control over relevance.

For a growing tutorial website, an automatic label-based Related Posts widget can reduce maintenance while still keeping recommendations topically connected.

Keep the implementation lightweight and avoid installing a large external library merely to display a few article links.

The best Related Posts widget is the one that gives the reader a genuinely useful next article—not simply the largest possible list of links.