InArticle Related Posts Widget For Blogger Theme

A step-by-step tutorial for adding a custom InArticle related posts section to your Blogger blog that can be conveniently customized using new CSS.

The related posts widget is an essential component of a blog design. You can't ask users to engage in multi-page sessions unless you deliver identical or overlapping topic entries around the blog post, no matter how good the content is. Also, Search engines favour sites where users spend more time perusing the content.

You may be thinking about how to automatically add related articles in the middle of the post in blogger?

In this blog post, we'll show you how to use Google's Blogger platform to create a custom InArticle and/or contextual related posts widget. On single post sections, this widget will appear in the middle of the post. You'll see a surge of page views since it's been integrated.

A smarter approach is to try it out on a dummy blog first. Recently, I've been using this related content widget on my blogger theme. Remember that if your blog is new and only has a few entries, the related content widget cannot function properly. As a result, make sure the blog has enough posts under each category or label to function flawlessly.

This script is tested in Contempo Blogger default theme and working fine but just in case if this script is not working with your theme, then don't panic just comment down with the problem.

If you want to know how to integrate a related post widget in the centre of your article based on post categories or how you can include an inline related post on the Blogger website, then this tutorial is appropriate for you. Moreover, this widget will help you to reduce the bounce rate. 

There are numerous plugins available for WordPress that allow you to insert inline related articles into your blog. However, there are few widgets available that allow us to add inline related posts to our Blogger website. On the blogger page, it's also difficult to automatically display similar posts in the middle of an article. 

How to add InArticle Related Posts Widget For Blogger Theme


As a consequence, even though you have no programming skills, you can quickly add Inline related posts for a blogger. So, follow the tutorial step by step and learn about the benefits. 

Key Features of InArticle Related Posts Widget 

InArticle or Contextual Related Posts is a popular Blogger widget that lets you display a list of related posts in your blog posts on the Blogger platform.  

The list is focused on the title and/or content of the posts, making them more interesting and likely to pique the readers' attention. This enables you to keep users on your site longer, lower bounce rates, and refresh old entries. 

Even though there are many similar widgets available today, InArticle Related Posts is one of the most feature-rich, supporting custom post types and CSS styles. This related content will appear without putting excessive stress on your website. 

Additionally, the built-in styles allow you to display beautiful related posts with similar content. Your blog readers will get benefited from your website and save you time. 


The following is a list of the advantages you will get. 

  • Automatic: When you enable InArticle or Contextual Related Posts, it will begin automatically showing related posts on your website and feed the middle of the article. There's no need to edit with the scripts.
  • Manual installation: Do you want more power over where your product is placed? This widget can be placed in between the post paragraph by using <br… tag. However, There's no need for any manual action to add something.
  • Styles: The output is bundled in CSS classes, allowing you to style the list with ease. You may use the included style or enter your custom CSS styles from the Edit HTML section.
  • No Scrolling: The widget will appear in the middle of the Blog post, so readers don't need to scroll down.
  • Bounce Rate Control: It will reduce the bounce rate, which will make your SEO score better in the Google searches engine.
  • Semi-Responsive: If you are using a responsive blogger theme, then the widget will also adopt the size according to your blog post width. But in the non-responsive theme will not able to adjust with the site width.

How to Inline a Related Article in the Middle of a Blogger Post?

The steps below are basic and easy to follow when making changes to your blogger theme.

Add Core CSS and JavaScript to the Header

Now you got a better understanding that why you should use this automated script in your blogger theme.

You will need to adjust the placement of the rendering code where you want the related post section to appear, depending on your Blogger design. It's a straightforward insert and integrates the widget. So, let's get started to install this widget in the blogger theme by following the steps below.

Before proceeding, we recommend taking a backup of your blogger theme. You can learn how to backup your blogger blog theme properly.

Step 1: After taking a backup of your blogger theme, head to the Blogger dashboard. And Go to the Theme → Edit HTML option to open the BlogSpot theme editor. 

Step 2: All the CSS code snippets mentioned below should be included just before the ]]></b:skin> tag within the theme. Insertion should be in the same order as they appear below.


/*Start Contextual Related Post by https://www.bloggerspice.com/ */ 
.bspostRelatedIn{text-align: left;
    padding: 15px;
    margin: 30px 0;
    border: 1px solid #ddd;
    border-radius: 3px;
    font-size: 15px;
    position: relative;} 
#bspostRelatedIn_title{font-size: 16px;
    margin: 0;
    display: inline-block;
    padding: 0 10px;
    position: absolute;
    top: -14px;
    left: 10px;
    background-color: #fefefe;
    color: #7d7d7d;} 
.bspostRelatedIn ul {
    list-style: none;
    padding: 3px 22px 0;   
} 
.bspostRelatedIn li{ border-radius: 5px;
    line-height: 1.7em;
    margin-bottom: 0.433333em;
    list-style: disc;
} 
.bspostRelatedIn li:hover {text-decoration: underline;}
/*End Contextual Related Post by https://www.bloggerspice.com/ */

As previously stated, these CSS rules can be easily modified and extended to change the design and layout of related posts entries. Keep the original rules intact if you're not familiar with CSS. 

To modify the list style please replace below CSS code.


.bspostRelatedIn li{ border-radius: 5px;
    line-height: 1.7em;
    margin-bottom: 0.433333em;
    list-style: disc;
} 

You can change by any code from below: 

CRP Style 1:

blogger related post widget with circle
 
.bspostRelatedIn li {
    border-radius: 5px;
    line-height: 1.7em;
    margin-bottom: 0.433333em;
    list-style: circle;
}

CRP Style 2:

blogger related post widget with decimal

.bspostRelatedIn li {
    border-radius: 5px;
    line-height: 1.7em;
    margin-bottom: 0.433333em;
    list-style: decimal;
}

CRP Style 3:

blogger related post widget with decimal leading zero



.bspostRelatedIn li {
    border-radius: 5px;
    line-height: 1.7em;
    margin-bottom: 0.433333em;
    list-style: decimal-leading-zero;
}

Step 3: And, right above these CSS rules, add the following JavaScript code above/before the </head> . It's the essential script for the related posts section to function.


<b:if cond='data:blog.pageType == &quot;item&quot;'> 
<script type='text/javascript'> 
//<![CDATA[ 
// InArticles Related to Middle of Posts by https://www.bloggerspice.com/ 
var bspostRelatedIn = new Array(); var bspostRelatedInNum = 0; var relatedUrls = new Array(); function related_results_labels(json) { for (var i = 0; i < json.feed.entry.length; i++) { var entry = json.feed.entry[i]; bspostRelatedIn[bspostRelatedInNum] = entry.title.$t; for (var k = 0; k < entry.link.length; k++) { if (entry.link[k].rel == 'alternate') {relatedUrls[bspostRelatedInNum] = entry.link[k].href; bspostRelatedInNum++; break;}}}} function removeRelatedDuplicates() { var tmp = new Array(0); var tmp2 = new Array(0); for(var i = 0; i < relatedUrls.length; i++) { if(!contains(tmp, relatedUrls[i])) { tmp.length += 1; tmp[tmp.length - 1] = relatedUrls[i]; tmp2.length += 1; tmp2[tmp2.length - 1] = bspostRelatedIn[i];}} bspostRelatedIn = tmp2; relatedUrls = tmp;} function contains(a, e) { for(var j = 0; j < a.length; j++) if (a[j]==e) return true; return false;} function printRelatedLabels() { var r = Math.floor((bspostRelatedIn.length - 1) * Math.random()); var i = 0; document.write('<ul>'); while (i < bspostRelatedIn.length && i < 3) { document.write('<li><a href="' + relatedUrls[r] + '">' + bspostRelatedIn[r] + '</a></li>'); if (r < bspostRelatedIn.length - 1) { r++; } else { r = 0;} i++;} document.write('</ul>');let element = document.createElement('a');element.href = 'https://www.bloggerspice.com/';element.pathname = 'embed' + element.pathname;console.log(element.toString());}//]]> 
</script> 
</b:if>

Step 4: It's time to finish the last and most critical step, which is to integrate the core CSS and JavaScript for the related posts segment. 

Now locate the <data:post.body/>


Now locate the <data:post.body/> and replace it by below script


<div expr:id='&quot;post1&quot; + data:post.id'/> 
<div class='bspostRelatedIn'> 
<b:if cond='data:post.labels'> 
<b:loop values='data:post.labels' var='label'> 
<b:if cond='data:blog.pageType == &quot;item&quot;'> 
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=3&quot;' type='text/javascript'/> 
</b:if> 
</b:loop> 
</b:if> 
<div id='bspostRelatedIn_title'>Also Read</div>
<script type='text/javascript'> 
removeRelatedDuplicates(); 
printRelatedLabels(); 
</script> 
</div> 
<div expr:id='&quot;post2&quot; + data:post.id'><p><data:post.body/></p></div> 
<script type='text/javascript'> 
var obj0=document.getElementById(&quot;post1<data:post.id/>&quot;); 
var obj1=document.getElementById(&quot;post2<data:post.id/>&quot;); 
var s=obj1.innerHTML; 
var t=s.substr(0,s.length/2); 
var r=t.lastIndexOf(&quot;&lt;br&gt;&quot;); 
if(r&gt;0) {obj0.innerHTML=s.substr(0,r);obj1.innerHTML=s.substr(r+4);} 
</script>

Step 5: That's It Just after the above-mentioned steps click the save icon from the top right side of your blogger theme. 


By default, the maximum number of entries in this segment is 3. The default value ensures that this section contains a maximum of 3 related posts entries. But this value can be increased or decreased to suit your needs. 

Please change the value 

From 1st JavaScript Code

  bspostRelatedIn.length && i < 3 

From 2nd JavaScript Code

  max-results=3 

Now it's time for a conclusion Right! 

I've tried to make all of these scripts as descriptive as possible. If you encounter any problems or have any suggestions regarding the above-mentioned related post widget, please share that in the comments section.

On the responsive blogger theme, the related post widget will automatically adjust. This section's design and the interface can be entirely customized by advanced users. If you're having trouble integrating it, please contact me and I'll do my best to assist you.

You may like these posts

6 Comments

  1. zidarma
    thanks for the tutorial
    • BloggerSpice
      Hi, Nice to see you again over here. You are most welcome.
  2. Ivan Jose
    Hello, is it possible to add this to any part of my blog? Like I want to add this at the top, way above the post. Thank you!
    • BloggerSpice
      Hi Ivan,

      Yes ofcourse, Just you need to work on step 4. Follow the all other steps as usual and instead of following step 4 follow below step:

      Copy the below script above/before the <data:post.body/> code.

      <div expr:id='&quot;post1&quot; + data:post.id'/> <div class='bspostRelatedIn'> <b:if cond='data:post.labels'> <b:loop values='data:post.labels' var='label'> <b:if cond='data:blog.pageType == &quot;item&quot;'> <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=3&quot;' type='text/javascript'/> </b:if> </b:loop> </b:if> <div id='bspostRelatedIn_title'>Also Read</div> <script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels(); </script> </div> <div expr:id='&quot;post2&quot; + data:post.id'/> <script type='text/javascript'> var obj0=document.getElementById(&quot;post1<data:post.id/>&quot;); var obj1=document.getElementById(&quot;post2<data:post.id/>&quot;); var s=obj1.innerHTML; var t=s.substr(0,s.length/2); var r=t.lastIndexOf(&quot;&lt;br&gt;&quot;); if(r&gt;0) {obj0.innerHTML=s.substr(0,r);obj1.innerHTML=s.substr(r+4);} </script>

      And save your blogger them. Now it will display at the below of the post title. If you would like to show bottom of the blog post then -

      Copy the above script below/after this <data:post.body/> code.

      Let me know is it working for your or not.

      Thank you.
    • Ivan Jose
      Thank you! I'll try this. Is the script lightweight? Will it not add to the load time of a post?
    • BloggerSpice
      If you set the widget in the middle and bottom of the content then it will load faster.
  1. To insert a code use <i rel="pre">code_here</i>
  2. To insert a quote use <b rel="quote">your_qoute</b>
  3. To insert a picture use <i rel="image">url_image_here</i>
Go Up