How to Add a Custom Related Posts Section on a Blogger Blog

On
A blog post graphical sketchOne of the important elements within a blog layout is the related content section. No matter how good is your content, unless you don't offer similar or matching content entries around the blog post, you cannot expect engaging and multi-page sessions from the visitors. Search engines too prefer to rank sites—on which—the visitors spend more time browsing the content. Today, we're going to learn to integrate a custom related posts section on a blog powered by Google's Blogger platform. This section will appear at the bottom of the post on single post pages. After its integration, you'll definitely witness an increase in the number of page views. Before attempting the integration, take a backup of your Blogger template. A better strategy will be to first test it on a dummy blog. I've used this related content section on one of my blogs for years. Remember, if your blog is new with just a couple of posts, the related content section may not work as expected. So, make sure there are enough posts on the blog for it to work—flawlessly.

A blog post graphical sketch
If you're familiar with the basics of CSS, you can easily customize and tweak the overall appearance of the related posts section to match with the blog theme.

Read Also:
A Step-by-Step Guide to Design and Code a Custom Blogger (BlogSpot) Template


Depending on your Blogger template, you may need to change the placement of the rendering code where you want the related post section to appear. It's a simple insert and test exercise.

Add Core CSS and JavaScript to the Header

After taking a backup of the template, open the HTML code of the same within your Blogger dashboard. Go to Theme → Edit HTML option to open the template's code.

All the code snippets mentioned below should be included just before the </head> tag within the template. Inclusion should be in the same order as they appear below.

First of all, add the following CSS rules which apply the basic styling to the related content section.


<style>
#related-posts{
    float:center;
    text-transform:none;
    height:100%;
    padding-top:20px;
    padding-left:5px;
    font-size:15px;
    border-top:1px solid #ddd;
    margin-top:25px
}
#related-posts h2{
    font-size:25px;
    text-transform:none;
    letter-spacing:0em;
    color:#555;
    font-family:Georgia,sans-serif;
    margin-bottom:.7em;
    margin-top:0em;
    padding-top:0em
}
#related-posts a{
    font-family:Georgia,serif;
    text-align:center;
    border-right:1px dotted #DDD;
    color:#2361A1;
    padding:10px 10px 0 10px!important;
    min-height:250px
}
#related-posts a:hover{
    background-color:#E5E5E5
}
</style>

As mentioned earlier, you can easily modify and extend these CSS rules to adjust the design and layout of the related posts entries. In case you're not familiar with CSS, keep the original rules—intact.

And, right below these CSS rules, add the following JavaScript code. It's the core related-posts section code necessary for its functioning.


<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
/*<![CDATA[*/
var post_thumbnail_width = 180;
var post_thumbnail_height = 120;
var max_related_entries = 6;

function escapeRegExp(string){return string.replace(/[.*+?^${}()|[\]\\]/g,"\\$&")}function replaceAll(str,term,replacement){return str.replace(new RegExp(escapeRegExp(term),"g"),replacement)}function display_related_posts(json_feed){for(var defaultnoimage="https://i.ibb.co/yS6JvBh/no-image.jpg",post_titles=new Array,title_num=0,post_urls=new Array,post_thumbnail_url=new Array,relatedpoststitle=(window.location.href,"You might also like:"),border_color="#DDDDDD",i=0;i<json_feed.feed.entry.length;i++){var feed_entry=json_feed.feed.entry[i];post_titles[title_num]=feed_entry.title.$t;try{post_thumbnail_url[title_num]=feed_entry.media$thumbnail.url}catch(error){s=feed_entry.content.$t,a=s.indexOf("<img"),b=s.indexOf('src="',a),c=s.indexOf('"',b+5),d=s.substr(b+5,c-b-5),-1!=a&&-1!=b&&-1!=c&&""!=d?post_thumbnail_url[title_num]=d:"undefined"!=typeof defaultnoimage?post_thumbnail_url[title_num]=defaultnoimage:post_thumbnail_url[title_num]="https://i.ibb.co/yS6JvBh/no-image.jpg"}for(var k=0;k<feed_entry.link.length;k++)"alternate"==feed_entry.link[k].rel&&(post_urls[title_num]=feed_entry.link[k].href,title_num++)}var random_entry=Math.floor((post_titles.length-1)*Math.random()),iteration=0;if(post_titles.length>0){var rp_heading=document.createElement("h2"),textnode=document.createTextNode(relatedpoststitle);rp_heading.appendChild(textnode),document.getElementById("related-posts").appendChild(rp_heading);var rp_container=document.createElement("div");rp_container.setAttribute("style","clear: both;"),rp_container.setAttribute("id","rp-container"),document.getElementById("related-posts").appendChild(rp_container)}for(;iteration<post_titles.length&&20>iteration&&max_related_entries>iteration;)if(post_urls[random_entry]!=currentURL){var rp_anchor=document.createElement("a");0!=iteration?rp_anchor.setAttribute("style","text-decoration:none;padding:10px;float:left;border-left: none "+border_color+";"):rp_anchor.setAttribute("style","text-decoration:none;padding:10px;float:left;"),rp_anchor.setAttribute("id","rp-anchor-"+iteration),rp_anchor.setAttribute("href",post_urls[random_entry]),document.getElementById("rp-container").appendChild(rp_anchor);var rp_img=document.createElement("img");rp_img.setAttribute("style","width:"+post_thumbnail_width+"px;height:"+post_thumbnail_height+"px; border:1px solid #CCCCCC;"),rp_img.setAttribute("id","rp-img-"+iteration);var pin=String(post_thumbnail_url[random_entry].match(/\/s72-c\//));post_thumbnail_url[random_entry]=replaceAll(post_thumbnail_url[random_entry],pin,"/w"+post_thumbnail_width+"-h"+post_thumbnail_height+"-p/"),rp_img.setAttribute("src",post_thumbnail_url[random_entry]),rp_img.setAttribute("alt","Matched post excerpt thumbnail in the post footer."),document.getElementById("rp-anchor-"+iteration).appendChild(rp_img);var rp_para=document.createElement("div");rp_para.setAttribute("style","width:"+post_thumbnail_width+"px; height:"+post_thumbnail_height+"px;border: 0pt none ; margin: auto; padding-top: 18px; line-height:1.6;"),rp_para.setAttribute("id","rp-para-"+iteration);var textnode=document.createTextNode(post_titles[random_entry]);rp_para.appendChild(textnode),document.getElementById("rp-anchor-"+iteration).appendChild(rp_para),iteration++,random_entry<post_titles.length-1?random_entry++:random_entry=0}else iteration++,random_entry<post_titles.length-1?random_entry++:random_entry=0;post_urls.splice(0,post_urls.length),post_thumbnail_url.splice(0,post_thumbnail_url.length),post_titles.splice(0,post_titles.length)}
/*]]>*/
</script>
</b:if>

Now, here you need to pay attention to 3 important variables you can see at the beginning of the JavaScript code. All 3 of them helps you change the important attributes of the related posts section.

Every entry in the related content section includes a thumbnail image picked from the post as well as the title of the post. The thumbnail image is generally the first image included in the post.

The numeric values assigned to the variables post_thumbnail_width and post_thumbnail_height controls the width and height of the thumbnail image. These numeric values are used as pixel values within the code. You can change these numeric values as per your needs.

Pro Tip: For best results, either keep both the width and height thumbnail values equal or keep the width 20% to 30% larger than the height.


Depending on the width of the content section of your theme, you may need to adjust the thumbnail size with the help of both these variables. Feel free to experiment with the thumbnail size on your blog.

The third variable max_related_entries control the maximum number of entries you want in this section. The default value ensures one gets a maximum of 6 related posts entries in this section. You can increase or decrease this value as per your requirements.

Here's how a sample related posts section may look like.

Related posts section with 6 entries
Here, the maximum number of entries allowed in this section is 6 and the width of the thumbnail image is bigger than the height. The same section can also include smaller and square thumbnail images and up to 8 entries with 4 of them—per row.

It all depends on how you utilize the available 3 variables on your blog.

Now that we've integrated the core CSS and JavaScript for the related posts section, it's time to complete the last and the most important step.

Execute Section Rendering Code at the Right Place

There's one more thing left to complete the entire setup. Though we have the styling and rendering code in the header, we still need to call and execute it at the right place within the template so that the related posts section appears at the desired place within the layout. That's what we're going to do next.

Depending on your template and its current state, the final execution code may be placed within one of the two blocks mentioned below. Within the template's HTML code, find the following two lines.
  • Line 1: <div class='post-footer-line post-footer-line-2'>
  • Line 2: <div class='post-footer-line post-footer-line-3'>
Now, the final code needs to be placed right below one of these lines. The question is that which line to choose within your template? That's a simple matter of testing.

First, paste the code below the first line and save the template. Open one of the blog posts to see if the section is appearing well and good at the location where you want it to be.

If it's not, remove the code beneath the first line and paste it below the second line. Once again, refresh the web page and see the placement of the related content section. And, here's the final code snippet that needs to be inserted below one of the lines mentioned above.


<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop index='labelcount' values='data:post.labels' var='label'>
<script>
  var currentURL = &#39;<data:blog.url/>&#39;;
</script>
<b:if cond='data:labelcount &lt; 1'>
<script async='async' expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=display_related_posts&quot;' type='text/javascript'/></b:if></b:loop>
</div><div style='clear:both'/>
</b:if>

Generally, one of the lines serves the purpose without any issues. In case, none of these two lines give you the desired result, you can create a custom widget section below the post footer section and can paste the final code—right within it.

If your Blogger template is responsive, the entries within the related content section will automatically adjust on smaller devices. Power users can completely customize the style and layout of this section.

If you're unable to integrate it successfully, give me a shout and I'll try my best to help you.