How To Add Related Post Widget in Blogger with Thumbnail - FindersAdda : Tutorials of Make Money, Computer or Internet

Tuesday, 21 November 2017

How To Add Related Post Widget in Blogger with Thumbnail

Hello Friends! How are You? I hope, you will be well and also hope that you found my last post on "How to make stylish heading in blogger blog like wordpress" and it will be very helpful for you. Thank you very much for all lovely comment and suggestion. You've inspired me to write another post.

In this article, I am going to learn "How To Add Related Post Widget in Blogger with Thumbnail" Let's begin..

How to add related post widget in blogger blog

What is related post widget?

Related post widget is a widget that provides facility to show some related post. For example, you are reading a article on any blog related to earn money then you will have seen some article list related to earn money below the post and it is called related post.

What are the benefits of adding related post widget in blog?

If you want to know that what are the benefits of adding related post widget then read this post carefully.

The main advantages of adding related post widget in blog is that to increase page views. Suppose if you don't add related post widget in blog then readers can only read one post. Even if you add related post widget in your blog then readers can read current post as well as related post also.

How to add Related post Widget in Blogger Blog?

Now I am going to tell that how to add related post widget in blogger blog? If you were searching this then you are reading right article.

1) First of all, open your blogger account in web browser.

2) Then click on the Theme option besides blogger dashboard and then click on the Edit HTML option.

3) Now click the mouse cursor anywhere between code and press Ctrl + F and then find </head>

4) Copy the below code and paste it into your blogger above the </head> tag.

<!--Related Posts Start--><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]=''}if(relatedTitles[relatedTitlesNum].length>35)relatedTitles[relatedTitlesNum]=relatedTitles[relatedTitlesNum].substring(0,35)+"...";for(var k=0;k<;k++){if([k].rel=='alternate'){relatedUrls[relatedTitlesNum][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><!--Related Posts End-->
NOTE : - You can change its width and height according to your requirement. I have highlighted width and height. This code credit goes to helpblogger.

5) Now again press Ctrl + f and find <div class='post-footer'> 

6) Copy the below code and paste it in to your blogger code box above the  <div class='post-footer'>

<!-- Related Posts 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><script expr:src='&quot;/feeds/posts/default/-/&quot; + + &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="" rel="nofollow" >Related Posts Widget</a></div></b:if><!-- Related Posts End-->

NOTE : - You can change number of related post according to your requirement.

Note 2 : - If related post widget is not showing in your blogging after adding this code then go to code box of your blogger and find <b:includable id='postQuickEdit' var='post'> and paste the step 6 code above </b:includable>. For better understanding you can see image.

paste the code above </b:includable>

7) Click on the Save Theme option.

Once again, I hope you liked this post so much. If you loved this post, Then, share with your friends and also give comments and some suggestion that what should i improve in this post. 

Thank You So Much.

By Sumit Kumar Gupta

About Author


Author & Editor

Myself Sumit Kumar Gupta & 21 year's old person. I am a programmer and blogger. I spend much more time on programming and blogging and helps other programmers and bloggers.


  1. Thank you for sharing this post this is very helpful for me


We are eager to see your comments.
Comment Rule :

1. Don't use any link in the comment box. If you have any problem related to link then contact me with the contact form.

2. Don't use the wrong word if you write the wrong word in comment box then it will get spam.