How to add Related post widget with Thumbnails or without Thumbnails to blogger blog?

By adding a related post into your blogger blog you can increase your inter traffic and get more benefits. 

If you are thinking it is not necessary to add related posts to your blogger blog, then you are wrong. By displaying related posts in your blogger blog You can easily keep your readers engaged with your blogger blog and with your related posts links that you have previously written.

What are related posts?

Related posts are old posts that related to your current reading posts. It displays base on the label of your current reading post. Let take an example, if you are reading about some post related to blogging label, then under related posts, it displays other old posts titles those related to blogging label. So readers can easily find the content relevant to the previous article that readers currently read. 


Let's think some persons come to visit your site for looking for information, via traffic from search engines, social media, web directories, ref sites, and other sites. If your site hasn’t enough information that they are looking for they will immediately exit from your blog without visiting another page. That will be caused to increase your bounce rate too. 

By adding related posts into your blogger you can avoid that situation. Remember that Related posts play a key role in your site. That facilitating and suggesting to your readers what they want to read next? After solving readers’ issues by reading your article, in the end, they saw other related articles that are related to their searching or intention. Then those readers click on that related post title and continue reading your blog articles. So with that related post, we can prevent our visitors from exiting on our blogger blog.


Also below are some benefits of adding the related post to your blogger. 

·         Improve blog site performances

·         Improve blog traffic

·         Improve internal links

·         Decrease your blog bounce rate

·         Improve your page views

·         Improve user interaction

So today let discuss how to add Related post with Thumbnails and without Thumbnails into your blogger blog. It will be helpful for displaying old post links those related to your current reading post.

How to add Related post widget with Thumbnails to your blogger?

                                          

See demo image of Related post with Thumbnails

Step 01: Sign in to your blogger blog

Step 02: Go to blogger Dashboard>> Template >> Edit HTML button

Step 03: Find (Ctrl + F) </head> and copy below code and paste above or before </head> tag.

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<style type='text/css'>

#related-posts{float:left;width:auto;}

#related-posts a{border-right: 1px dotted #eaeaea;}

#related-posts h4{margin-top: 10px;background:none;font:18px Oswald;padding:3px;color:#999999; text-transform:uppercase;}

#related-posts .related_img {margin:5px;border:2px solid #f2f2f2;object-fit: cover;width:110px;height:100px;-webkit-border-radius: 5px;-moz-border-radius: 5px; border-radius: 5px; }

#related-title {color:#333;text-align:center;text-transform:capitalize;padding: 0px 5px 10px;font-size:12px;width:110px; height: 40px;}

</style>

<script type='text/javascript'>

//<![CDATA[

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]='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiy9l1jB7J_8bnFhIfUSkQflBJBWr2nQuyQ621VnyWLldC1pOQbjBZLLJZlm-TFZ1ofCuGhqP5JtZCkAOTIfYMW3GBunt5FSXMkC6fgWzHED4N9xLae-vEMWb8cnn3Q_qDqn3NeticD9XpR/s1600/no-thumbnail.png'}if(relatedTitles[relatedTitlesNum].length>35)relatedTitles[relatedTitlesNum]=relatedTitles[relatedTitlesNum].substring(0,35)+"...";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('<h4>'+relatedpoststitle+'</h4>');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>

Step 04: Find ( Ctrl + F ) <div class='post-footer'>. Most of times you will found two <div class='post-footer'> codes. You should stop at second code. Or if that code appear more than 2 times then you should search for conditional tag <b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/> and stop there.

( If you interest to replace your existing related code with that codes, then you should Find  <div id='related-posts'> code or some code with 'related-posts' below the <div class='post-footer'>.)

Step 05: Now copy and paste below codes beforeor above the <div class='post-footer'> or <b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/> where you stopped at Step 04. (If you interest to replace your existing related post code with that code, then replace your current code with below code.)

<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>

<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=5&quot;' type='text/javascript'/></b:loop>

<script type='text/javascript'>

var currentposturl=&quot;<data:post.url/>&quot;;

var maxresults=5;

var relatedpoststitle=&quot;<b>Related Posts:</b>&quot;;

removeRelatedDuplicates_thumbs();

printRelatedLabels_thumbs();

</script>

</div><div class='clear'/><div style="font-size: 9px;float: right; margin: 5px;"><a style="font-size: 9px; text-decoration: none;" href="https://blogfowl.blogspot.com/2017/12/related-post-widget-for-blogger-with.html" rel="nofollow" >Related Posts Widget</a></div>

</b:if>

Step 06: now save your template.

*Note – If related post not showing then placed above code above the  <b:includable id='postQuickEdit' var='post'> tag.

With the above code, you can add beautiful Related post widget with Thumbnails into your blogger blog.

How to add Related post widget without Thumbnails?

Step 01: Sign in to your blogger blog

Step 02: Go to blogger Dashboard >> Template >> Edit HTML button

Step 03: Press Ctrl + F and find </head>code.

Step 04: Copy and paste the below code aboveor before </head> tag.

<style>

#related-posts {

float : left;

width : 100%;

margin-top:20px;

margin-left : 5px;

margin-bottom:20px;

font : 14px Verdana;

margin-bottom:10px;

}

#related-posts .widget {

list-style-type : none;

margin : 5px 0 5px 0;

padding : 0;

}

#related-posts .widget h2, #related-posts h2 {

font-size : 20px;

font-weight : normal;

margin : 5px 7px 0;

padding : 0 0 5px;

}

#related-posts a {

text-decoration : none;

}

#related-posts a:hover {

text-decoration : none;

}

#related-posts ul {

border : medium none;

margin : 10px;

padding : 0;

}

#related-posts ul li {

display : block;

background : url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzLMEXslaVOolAoTQRb2BCZ1NQReQJFWZ_bK9S4A1RqvZhSP9TV_rN-Qz42H2eiOn-V2xL1T6wfPDN7ZEYkRwcEjNstaVujuAibJLMQ4Wi1JILplN3kTsrpkBnK1mxq_ALsSRK2yq8Hc4/s200/greentickbullet.png) no-repeat 0 0;

margin : 0;

padding-top : 0;

padding-right : 0;

padding-bottom : 1px;

padding-left : 21px;

margin-bottom : 5px;

line-height : 2em;

border-bottom:1px dotted #cccccc;

}

</style>

<script type='text/javascript'>

//<![CDATA[

var relatedTitles = new Array();

var relatedTitlesNum = 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];

relatedTitles[relatedTitlesNum] = entry.title.$t;

for (var k = 0; k < entry.link.length; k++) {

if (entry.link[k].rel == 'alternate') {

relatedUrls[relatedTitlesNum] = entry.link[k].href;

relatedTitlesNum++;

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] = relatedTitles[i];

}

}

relatedTitles = 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((relatedTitles.length - 1) * Math.random());

var i = 0;

document.write('<ul>');

while (i < relatedTitles.length && i < 20) {

document.write('<li><a href="' + relatedUrls[r] + '">' + relatedTitles[r] + '</a></li>');

if (r < relatedTitles.length - 1) {

r++;

} else {

r = 0;

}

i++;

}

}

//]]>

</script>

Step 03: Find (Ctrl + F) <div class='post-footer'>. Most of times you will found two <div class='post-footer'> codes. You should stop at second code. Or if that code appear more than 2 times then you should search for conditional tag <b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/> and stop there or find <b:includable id='postQuickEdit' var='post'> code.

(If you interest to replace your existing related code with that codes, then you should Find <div id='related-posts'> code or some code with 'related-posts' below the <div class='post-footer'>.)

Step 04: Now copy and paste below codes before or above the <div class='post-footer'> or <b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/> or <b:includable id='postQuickEdit' var='post'> where you stopped at Step 03. (If you interest to replace your existing related post code with that code, then replace your current code with below code.)

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<div id='related-posts'>

<font face='Arial' size='5'><b>You May Also Like: </b></font><font color='#FFFFFF'><b:loop values='data:post.labels' var='label'><data:label.name/><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&amp;max-results=5&quot;' type='text/javascript'/></b:if></b:loop> </font>

<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();

</script>

</div>

</b:if>

Customize- Replace <font face='Arial' size='5'><b>You May Also Like: </b> title and title size as you prefer.

Replace max-results=5 with the number of related post titles that you want to display under related post widget.

Step 05: Save the theme.

With the above code, you can add beautiful Related post widget without Thumbnails to your blogger blog.

Those related posts are automatically displayed based on the same label as your current post. You can display your related post with or without thumbnails below the post body. It will increase your readers’ interaction with your blogger blog.

I Hope the above methods help you to add Related post widget with Thumbnails or without Thumbnails to blogger blog. And if you have any problem or know more fixes on this Related post widget with Thumbnails or without Thumbnails, Please share with us in the comments section below. Happy blogging!