InArticle Related Posts Widget For Blogger Theme

Showing related posts inside your article is one of the smartest ways to increase page views, reduce bounce rate, and keep readers engaged for a longer time. An InArticle Related Posts Widget displays relevant articles between paragraphs, making it more visible than the usual sidebar widget.

In this tutorial, you will learn how to add a fully responsive InArticle Related Posts Widget in any Blogger theme, including simple steps, code, settings, and customization options.

What Is an InArticle Related Posts Widget?

An InArticle Related Posts Widget is a small section inserted inside your blog post content.
It usually appears after a few paragraphs and contains:

Post titles
Thumbnails (optional)
Article links
Short descriptions (optional)

This widget attracts the reader’s attention exactly when they are already reading your content, which improves engagement and SEO.

Benefits of Using InArticle Related Posts Widget

Using this widget on your Blogger site offers several advantages:

Higher Pageviews

Readers are more likely to click on a related article embedded inside the content.

Lower Bounce Rate

When users continue reading other posts, your bounce rate naturally decreases.

Better User Experience

It helps users quickly discover more useful content without scrolling to the sidebar.

Improved SEO

Internal linking signals search engines that your content is well connected and valuable.

How to Add InArticle Related Posts Widget in Blogger Theme

Follow these steps carefully to add this feature to your Blogger website.

Step 1: Open Blogger Theme Editor

Login to Blogger Dashboard
Go to Theme
Click Edit HTML

This will open the full theme code where we will add the widget.

Step 2: Add CSS Styling

Search for this tag in your theme:

]]></b:skin>

Paste the following CSS code just above it:

/* InArticle Related Posts Widget CSS */
.inarticle-related {
  margin: 25px 0;
  padding: 15px;
  border: 1px solid #e5e5e5;
  border-radius: 8px;
  background: #fafafa;
}

.inarticle-related h3 {
  font-size: 18px;
  margin-bottom: 10px;
  color: #333;
}

.inarticle-related ul {
  list-style: none;
  padding: 0;
}

.inarticle-related ul li {
  margin-bottom: 8px;
}

.inarticle-related ul li a {
  text-decoration: none;
  color: #0066c0;
  font-weight: 600;
}

.inarticle-related ul li a:hover {
  text-decoration: underline;
}

This code styles your widget making it clean, modern, and responsive.

Step 3: Add the Widget Code in Post Body

Now search for the following line in your theme:

<data:post.body/>

Replace it with the code below (or insert directly above it):

<b:if cond='data:blog.pageType == "item"'>
  <div class="inarticle-related">
    <h3>Related Posts</h3>
    <ul>
      <b:loop values='data:post.labels' var='label'>
        <b:if cond='data:label.isLast != "true"'>
          <b:loop values='data:blog.posts' var='post'>
            <b:if cond='data:post.labels contains data:label.name'>
              <li><a expr:href='data:post.url'><data:post.title/></a></li>
            </b:if>
          </b:loop>
        </b:if>
      </b:loop>
    </ul>
  </div>
</b:if>

<data:post.body/>

This script automatically shows related posts from the same labels/tags.

Step 4: Save the Theme

Click the Save button at the top-right corner.
Now open any article — you will see the Related Posts widget appearing inside the content.

Customization Options

You can fully customize the widget according to your theme.

Change Heading

Edit:

<h3>Related Posts</h3>

Replace text with your own title.

Add Thumbnail Support (Optional)

If you want thumbnails, insert this instead of the current <li>:

<li>
  <a expr:href='data:post.url'>
    <img expr:src='data:post.thumbnailUrl' style='width:80px;height:auto;margin-right:10px;'/>
    <span><data:post.title/></span>
  </a>
</li>

Change Background Color

In CSS:

background: #fafafa;

Change to any color you like.

Troubleshooting

Widget Not Showing?

Ensure your posts have labels
Clear cache and refresh
Check if the code is placed correctly

Showing Too Many Posts?

You can limit posts by adding:

max-results=4

in the loop function.

Conclusion

The InArticle Related Posts Widget is a powerful way to boost user engagement on your Blogger site. With just a few lines of clean code, you can make your theme more interactive, SEO-friendly, and professional.

Alpha Arp

InArticle Related Posts Widget For Blogger Theme