How To Add Related Post With Thumbnails In Blogger Step By Step - 3 Steps

The more of your content your viewers consume, the more probable they are to become faithful fans of your work. These people will be more likely to share your articles on social media, return to your website regularly. However, this raises a bigger question: How do you get users to read more of your content? Top-quality content is, of course, a big piece of the puzzle, but an easy-to-navigate website structure is just as important. After reading your article, a visitor will wonder what to do next — should they leave or should they read more? 

Are your users leaving your site after reading the first post? Increasing page views and reducing the bounce rate is a big challenge for site owners. One of the best ways to move people around your website is to include related content links at the bottom of your articles. It has proven to be an effective way of getting more page views.

Related content links are an ideal way to encourage visitors to remain on your website, improving bounce rate, page views, and time-on-site statistics — all metrics with a positive influence on your website’s SEO performance. The Related Posts feature scans all of your posts’ contents, analyze it, and uses that to display contextual posts your visitors might be interested in reading after they’re finished with the current post. Related Post With Thumbnails are also an incredible way to infuse life into some of your older articles, which have been pushed off your front page and no longer receive the traffic they deserve. Many popular blogs use this strategy to increase the time users spend on their time.

What others are reading:

How To Add A Contact Form - Contact Page In Blogger Step By Step

How To Add Breadcrumbs Post Navigation In Blogger Step By Step

How To Add Custom Robots.txt File In Blogger Step By Step

How To Add Twitter Cards To Blogger And Wordpress Step By Step

How To Create A Blog On Blogger.com (Blogspot) Step By Step

How To Set Custom Header Tags For Blogger Blog Step By Step - 4 Steps


Bounce rate is a very important factor for any blog, and you must do everything in your power to reduce it. The engagement of users on your site can influence your search result position in search engines like Google, so you need to understand the process to improve user experience and make it easy for them to find more content of their interest easily on your blog. You have to make sure that you are publishing quality content which creates value for your user because no matter what you do if your content is not good enough, the users will never stick to your site. So offer them quality content regularly and design your site the way that it can retain visitors on your site.

Bounce rate essentially represents the percentage of initial visitors to a site who “bounce” away to a different site, rather than continue on to other pages within the same site. This can have a significant impact on your AdSense earning. By adding related posts in your blogger blog you are killing three birds with one stone. You are decreasing your bounce rate, you are increasing your AdSense income, and lastly, you are increasing your page views. In this blogger blog tutorial series, we will show you how you can display related posts in your blogger blog with ease, just follow closely.

Summary: the benefits of setting up Related Post With Thumbnail in blogger blog

1. It will increase page views
2. It reduces the bounce rate
3. It will improve internal linking
4. It will improve user interaction

Step 1: Go to your Blogger Dashboard>> Theme>> Edit HTML

Step 2: You will be provided with the whole code of your blog template in a large field.

Search for the close head tag of the template and place the code given below just before it.

If you don't know how to do it don't worry I am taking you through this Blogger Blog Tutorial step by step. Click inside the template and press ctrl +F keys on your keyboard simultaneously. This action will trigger a search box to appear at the upper right part of the template codes. Copy and paste this code </head> inside the search box and press enter on your keyboard. Copy and paste the following code just before it. 

<!--Related Posts with thumbnails Scripts and Styles Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#related-posts { 
    float:left;
    width:auto; 
}
#related-posts h2 { 
    margin-top: 10px;
    background:none;padding:3px; 
}
#related-posts .related_img { 
    margin:5px;
    border:4px solid #f2f2f2;
    width:105px;height:105px;
    transition:all 300ms ease-in-out;
    -webkit-transition:all 300ms ease-in-out;
    -moz-transition:all 300ms ease-in-out;
    -o-transition:all 300ms ease-in-out;
    -ms-transition:all 300ms ease-in-out; 
}
#related-title {
    color: #222;
    line-height: 16px;
    padding: 0 10px;
    text-align: center;
    text-shadow: 0 2px 2px #fff;
    width: 100px;
}
#related-posts .related_img:hover{ 
    opacity:.7;
    filter:alpha(opacity=70);
    -moz-opacity:.7;
    -khtml-opacity:.7
}
#related-title:hover { 
    text-decoration: underline; 
}
</style>
<script type='text/javascript'>
//<![CDATA[
imgr=new Array();imgr[0]="http://2.bp.blogspot.com/-ex3V86fj4dQ/UrCQQa4cLsI/AAAAAAAAFdA/j2FCTmGOrog/s1600/no-thumbnail.png";showRandomImg=true;aBold=true;summaryPost=400;summaryTitle=20;numposts1=12;numposts2=4;function removeHtmlTag(strx,chop){var s=strx.split("<");for(var i=0;i<s.length;i++){if(s[i].indexOf(">")!=-1){s[i]=s[i].substring(s[i].indexOf(">")+1,s[i].length)}}s=s.join("");s=s.substring(0,chop-1);return s}
  function showrecentposts1(json){j=(showRandomImg)?Math.floor((imgr.length+1)*Math.random()):0;img=new Array();if(numposts2<=json.feed.entry.length){maxpost=numposts2}else{maxpost=json.feed.entry.length}for(var i=0;i<maxpost;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var pcm;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break}}for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){pcm=entry.link[k].title.split(" ")[0];break}}if("content"in entry){var postcontent=entry.content.$t}else if("summary"in entry){var postcontent=entry.summary.$t}else var postcontent="";postdate=entry.published.$t;if(j>imgr.length-1)j=0;img[i]=imgr[j];s=postcontent;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!=""))img[i]=d;var month=[1,2,3,4,5,6,7,8,9,10,11,12];var month2=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];var day=postdate.split("-")[2].substring(0,2);var m=postdate.split("-")[1];var y=postdate.split("-")[0];for(var u2=0;u2<month.length;u2++){if(parseInt(m)==month[u2]){m=month2[u2];break}}var daystr=day+' '+m+' '+y;pcm='<a href="'+posturl+'">'+pcm+' comments</a>';var trtd='<div class="col_maskolis"><h2 class="posttitle"><a href="'+posturl+'">'+posttitle+'</a></h2><a href="'+posturl+'"><img class="related_img" src="'+img[i]+'"/></a><div class="clear"></div></div>';document.write(trtd);j++}}var relatedTitles=new Array();var relatedTitlesNum=0;var relatedUrls=new Array();var thumburl=new Array();function related_results_labels_thumbs(json){for(var i=0;i<json.feed.entry.length;i++){var entry=json.feed.entry[i];relatedTitles[relatedTitlesNum]=entry.title.$t;try{thumburl[relatedTitlesNum]=entry.gform_foot.url}catch(error){s=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);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){thumburl[relatedTitlesNum]=d}else thumburl[relatedTitlesNum]='http://2.bp.blogspot.com/-ex3V86fj4dQ/UrCQQa4cLsI/AAAAAAAAFdA/j2FCTmGOrog/s1600/no-thumbnail.png'}for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){relatedUrls[relatedTitlesNum]=entry.link[k].href;relatedTitlesNum++}}}}function removeRelatedDuplicates_thumbs(){var tmp=new Array(0);var tmp2=new Array(0);var tmp3=new Array(0);for(var i=0;i<relatedUrls.length;i++){if(!contains_thumbs(tmp,relatedUrls[i])){tmp.length+=1;tmp[tmp.length-1]=relatedUrls[i];tmp2.length+=1;tmp3.length+=1;tmp2[tmp2.length-1]=relatedTitles[i];tmp3[tmp3.length-1]=thumburl[i]}}relatedTitles=tmp2;relatedUrls=tmp;thumburl=tmp3}function contains_thumbs(a,e){for(var j=0;j<a.length;j++)if(a[j]==e)return true;return false}function printRelatedLabels_thumbs(){for(var i=0;i<relatedUrls.length;i++){if((relatedUrls[i]==currentposturl)||(!(relatedTitles[i]))){relatedUrls.splice(i,1);relatedTitles.splice(i,1);thumburl.splice(i,1);i--}}var r=Math.floor((relatedTitles.length-1)*Math.random());var i=0;if(relatedTitles.length>0)document.write('<h2>'+relatedpoststitle+'</h2>');document.write('<div style="clear: both;"/>');while(i<relatedTitles.length&&i<20&&i<maxresults){document.write('<a style="text-decoration:none;margin:0 4px 10px 0;float:left;');if(i!=0)document.write('"');else document.write('"');document.write(' href="'+relatedUrls[r]+'"><img class="related_img" src="'+thumburl[r]+'"/><br/><div id="related-title">'+relatedTitles[r]+'</div></a>');if(r<relatedTitles.length-1){r++}else{r=0}i++}document.write('</div>');relatedUrls.splice(0,relatedUrls.length);thumburl.splice(0,thumburl.length);relatedTitles.splice(0,relatedTitles.length)}
//]]>
</script>
</b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->

Step 3: Again, Click inside the template and press ctrl + F keys on your keyboard simultaneously. This action will trigger a search box to appear at the upper right part of the template codes. Copy and paste this code <div class='comments' id='comments'> inside the search box and press enter on your keyboard. Copy and paste the following code just before it. 

Important!, the div comment tag is 2 in the template codes, so we're going to paste the below code just before each div comment tag in the template codes, that means that you're going to paste the below code twice! Understood? Tip, when you Click inside the template and press ctrl + F keys on your keyboard and find the div comment tag as explained above, it will be highlighted in yellow so it's clear to see. The one you see is the first div comment tag. Paste the below code just before it and scroll downwards, you will find the second div comment tag, paste the same code below just before it, now save the template or theme. That is it, you're good to go. Just adhere to the instructions here strictly and you'll not encounter any issues!

<!-- Related Posts with Thumbnails Code Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
    <div id='related-posts'>
        <b:loop values='data:post.labels' var='label'>
            <b:if cond='data:label.isLast != &quot;true&quot;'>
        </b:if>
        <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_thumbs&amp;max-results=6&quot;' type='text/javascript'/></b:if></b:loop>
        <script type='text/javascript'>
            var currentposturl=&quot;<data:post.url/>&quot;;
            var maxresults=6;
            var relatedpoststitle=&quot;<b>Related Posts:</b>&quot;;
            removeRelatedDuplicates_thumbs();
            printRelatedLabels_thumbs();
        </script>
    </div>
</b:if>
<!-- Related Posts with Thumbnails Code End-->

See the infographic for an explanation on step 3  for the first pasting of the code above

See the infographic for an explanation on step 3  for the second pasting of the code above

See the beautiful result I've gotten after I have added the related post with thumbnails codes above to my Demo Blog.

Customization

max-results: Make sure the value of max-results is greater than maxposts. This is the safest thing to do if your blog posts having only one label in order to maintain the number of posts to appear in our related posts widget.
maxposts: Just change this value if you want to increase or decrease the number of posts to be displayed. Again, this value should be less than the max-results.

Some Frequently Questions And Answeres About this Related Posts Widget

Question No.1 – How does this related post with thumbnails widget choose what post to be included?
Answer: Blog posts are chosen based on the same label. It will simply check and get the label of the current post and it will use that label name to request the data from the blogger API. The number of data requests will depend on how many categories your blog post has.

Question No.2 – How this widget chooses what thumbnail to be used in every post?
Answer: The related posts widget will check first if you uploaded an image file through Blogger in your blog post if it returns true, it will pick that one and use it as a thumbnail.
Second, if the first statement returns false, it will check your blog post body if you are using images from third party sites, then it if returns true it will pick the first image and make it as a thumbnail.

Reasons Why Your Related Post With Thumbnails May Not Show

1. You do not assign a label to your blog posts
2. Your blog posts under assigned labels or tags are not enough to fetch the maximum result and maximum post. In this case, you have to publish more articles with assigned labels respectively.
3. You did not follow this tutorial strictly step by step

I have tried so much to cover everything in this Blogger Blog Tutorial, how to add Related Post With Thumbnails In Blogger. If you follow the tutorial strictly, I don't think you'll encounter any issues, however, if you encounter issues, comment it at the comment section below and I will attend to you! Happy blogging!
full-width