How to Add Related Posts in Blogger with Widget Thumbnail in 2021

How to Add Related Post Widget in Blogger – How to Add Related Post Widget with Thumbnail in Blogger Blog? Hello Friends! How are you? Welcome again to Guptatreepoint blog. Friends, in this post today, I will tell you how to add related posts in Blogger with Widget Thumbnail? Before that we will know what is Thumbnail and what is the related post widget and what is the benefit of it?

What is Related Post Widget?

The related post widget is an important part of any blog that currently shows another post related to the open post. It works on a label or categories basis. As you all know that designing a blog is very important because a blog without design looks like a bride without makeup. So the better your blog design, the more people will be attracted towards your blog and will read your blog carefully.

This widget is placed at the bottom of the post in most blogs so that any reader can see the post related to that post only after reading the currently open post and if the post related to that post is helpful to that readers then that reader Will also read that post.

The design of many blogger template is quite simple in which related post widget is not available but nowadays most blogger template related posts come with widget. But in the template in which the related post widget is not available, we have to manually add it so that our readers can easily read the related posts.

What is the benefit of applying this widget:

If you are new in the blogging field, then perhaps you will not know how important it is to put related post widgets in the blog. You must have seen all the popular blogs, then there is a related post widget in all of them because it has so many benefits. Which are also for the readers and at the same time there are some benefits for the blog owner. So let us know about the benefits of both.

What are the benefits for readers:

Whenever a reader is reading a post on your blog and if that post is liked by that reader, then he spends a lot of time on your blog because he gets good good and important content there. If he reads any of your posts till the end and any other post related to it is shown to him, then there are 90% chances that he will definitely read the posts related to it.

This will benefit the readers that what they did not know about the information means that they were not able to search that topic in the search engine, that topic was found there by which they got knowledge. Friends, it has happened to me many times that when we are reading someone’s blog post, then there are many posts that we do not know about and because of getting there, we get to know about that topic. |

Benefits for blog owner:

Friends, now you must be thinking that this has benefited the readers but what will the blog owner benefit from it? So friends, you all know that a blogger works very hard to get traffic on his blog and until his traffic arrives on his blog, he remains unhappy about his blog.

So if you are a blogger and you have added a related post widget on your blog, then it will benefit you that whenever a readers will read your related post then your traffic will increase and alexa rank will be very good. At the same time, your blog will also rank in a good position.

What is Thumbnail?

Thumbnail is a term used by the graphics designer or photographer to represent any larger image in a smaller form. Whenever you open YouTube, before starting the video, you must have seen an image on which the video is written about it is called thumbnail.

Thumbnail is an image that represents any large size image in a small size image or shows in the starting of any video which tells what the video is based on, what it shows in the video. Has gone

When you open someone’s blog, then you have an image show of the post on the homepage of that blog which is of small size which represents what this post is based on. But when you open that post, that image is shown to you in large size, then the image which was being shown on the homepage of the blog is called thumbnail.

How to add related post widget in Blogger blog?

Friends, now you have come to know about the related post widget and at the same time you will have also come to know about its benefits. So now I will tell you how to add related post widget in blogger blog. In this post, I will give you two codes, one will be code in which you will also show thumbnail along with related posts and the other will be code that will only show the title of related posts.

There are many themes in which the related post widget looks good with thumbnail but there are some themes in which the related post widget looks good without thumbnail. So I will give you two codes, you can choose one code according to the theme of your blog and put it in your blog.

Steps To Add Related Post Widget With Thumbnail

  • First of all, login to your blogger dashboard with your Gmail address and password. (Click here for Blogger)
  • After that copy the code given below.
    <!–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 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]=’http://2.bp.blogspot.com/-ex3V86fj4dQ/UrCQQa4cLsI/AAAAAAAAFdA/j2FCTmGOrog/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>
    <!–Related Posts with thumbnails Scripts and Styles End–>
  • Now next to the blogger dashboard Theme Clicking on the tab and then in the Blogger dashboard Edit HTML Click on

     Theme and Edit HTML

    Theme and Edit HTML

  • Now a code box will open in front of you in which you have to click the mouse pointer anywhere in the middle of the code and after that Ctrl + F have to press. As soon as you press Ctrl + F, a search box will open in the top right side in the coding area in which Write and then press Enter.
  • Now the copied code Paste it over the tag and then Save Theme Click on For more information, see the image given below.

     Paste code above head tag

    Paste code above head tag

  • Now after that, copy the code given below again.
    <!– 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>
    <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=”http://helplogger.blogspot.com/2012/03/how-to-add-related-posts-widget-to.html” rel=”nofollow” >Related Posts Widget</a></div>
    </b:if>
    <!– Related Posts with Thumbnails Code End–>
  • Now after that click the mouse pointer again in the code area and search code
  • After that the code copied </b: includable> Paste over it. For more information, see the image given below.

    Code Pasting

    Code Pasting

  • And lastly Save Theme Click on

Note: In the code above to reduce the size of Thumbnail width and height Can reduce the size more. now width Size of 110px While is height Size of 100 px Is

Steps to Add Related Post Widget Without Thumbnail

  • First of all, login to your blogger dashboard with your Gmail address and password. (Click here for Blogger)
  • After that copy the below given CSS code.
    <br />#related-posts {<br />float : left;<br />width : 350px;<br />margin:20px 0 20px 5px;<br />font : 18px Verdana;<br />}<br />#related-posts .widget {<br />margin : 5px 0 5list-style-type:circle;px 0;<br />padding:0px;<br />list-style-type:circle;<br />}<br />#related-posts .widget h2, #related-posts h2 {<br />font-size : 20px;<br />font-weight : normal;<br />margin : 5px 7px 0;<br />padding : 0 0 5px;<br />}<br />#related-posts a {<br />text-decoration : none;<br />}<br />#related-posts a:hover {<br />text-decoration : underline;<br />}<br />#related-posts ul {<br />border : medium none;<br />margin : 10px;<br />padding : 0;<br />}<br />#related-posts ul li {<br />display : block;<br />margin : 0;<br />padding : 0 0 5px 21px;<br />margin-bottom : 5px;<br />line-height : 2em;<br />border-bottom:1px dotted #cccccc;<br />}<br />
  • Now next to the blogger dashboard Theme Click and then Customize Click on
  • After that Advanced Click on the option and then Add CSS Click on the option. Now a code box will open in which paste the copied CSS code. And after this Apply to blog Click on
  • Now after that Back to Blogger Click on
  • Copy the code given below again.
    <br />&lt;script type="text/javascript"&gt;<br />//&lt;![CDATA[<br />var relatedTitles = new Array();<br />var relatedTitlesNum = 0;<br />var relatedUrls = new Array();<br />function related_results_labels(json) <br /> {<br />  for (var i = 0; i &lt; json.feed.entry.length; i++) <br />   {<br />    var entry = json.feed.entry[i];<br />    relatedTitles[relatedTitlesNum] = entry.title.$t;<br />    for (var k = 0; k &lt; entry.link.length; k++) {<br />    if (entry.link[k].rel == 'alternate') <br />     {<br />      relatedUrls[relatedTitlesNum] = entry.link[k].href;<br />      relatedTitlesNum++;<br />      break;<br />     }<br />    }<br />   }<br /> }<br />function removeRelatedDuplicates() <br /> {<br />   var tmp = new Array(0);<br />   var tmp2 = new Array(0);<br />   for(var i = 0; i &lt; relatedUrls.length; i++) <br />    {<br />     if(!contains(tmp, relatedUrls[i])) <br />      {<br />       tmp.length += 1;<br />       tmp[tmp.length - 1] = relatedUrls[i];<br />       tmp2.length += 1;<br />       tmp2[tmp2.length - 1] = relatedTitles[i];<br />      }<br />    }<br />    relatedTitles = tmp2;<br />    relatedUrls = tmp;<br /> }<br />     <br />function contains(a, e) <br /> {<br />  for(var j = 0; j &lt; a.length; j++) if (a[j]==e) return true;<br />   return false;<br /> }<br />     <br />function printRelatedLabels()<br /> {<br />  var r = Math.floor((relatedTitles.length - 1) * Math.random());<br />  var i = 0;<br />  document.write('&lt;ol&gt;');<br />  while (i &lt; relatedTitles.length &amp;&amp; i &lt; 5) <br />   {<br />    document.write('&lt;li&gt;&lt;a href="' + relatedUrls[r] + '"&gt;' + relatedTitles[r] + '&lt;/a&gt;&lt;/li&gt;');<br />    if (r &lt; relatedTitles.length - 1)<br />     {<br />      r++;<br />     } <br />     else <br />     {<br />      r = 0;<br />     }<br />     i++;<br />   }<br />   document.write('&lt;/ol&gt;');<br /> }<br />//]]&gt;<br />&lt;/script&gt;<br />
  • And next to the blogger dashboard Theme Clicking on the tab and then in the Blogger dashboard Edit HTML Click on
  • Now a code box will open in front of you in which you have to click the mouse pointer anywhere in the middle of the code and after that Ctrl + F have to press. As soon as you press Ctrl + F, a search box will open in the top right side in the coding area in which Write and then press Enter.
  • Now the copied code Paste it over the tag and then Save Theme Click on For more information, see the image below.

     Paste code above head tag

    Paste code above head tag

  • Now after that copy the below given JavaScript code.
    <br />&lt;b:if cond='data:blog.pageType == "item"'&gt;<br />&lt;div id='related-posts'&gt;<br />&lt;font face="Arial" size="5"&gt;&lt;b&gt;You May Also Like: &lt;/b&gt;&lt;/font&gt;&lt;font color="#FFFFFF"&gt;&lt;b:loop values="data:post.labels" var="label"&gt;&lt;b:if cond='data:label.isLast != "true"'&gt;,&lt;/b:if&gt;&lt;b:if cond='data:blog.pageType == "item"'&gt;<br />&lt;script expr:src=""/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=5"" type="text/javascript"/&gt;&lt;/b:if&gt;&lt;/b:loop&gt; &lt;/font&gt;<br />&lt;script type="text/javascript"&gt; removeRelatedDuplicates(); printRelatedLabels();<br />&lt;/script&gt;<br />&lt;/div&gt;<br />&lt;/b:if&gt;<br />
  • Now after that click the mouse pointer again in the code area and search code
  • After that the code copied </b: includable> Paste over it. For more information, see the image below.

    Code Pasting

    Code Pasting

  • And lastly Save Theme Click on

Final Words

Before ranking any blog, it is very important to design it. Unless you design your blog well then your blog will not rank well because your readers will not like your blog, so give importance to designing. You will find many websites to install related post widgets, which will easily provide the code to add related post widgets, but that slows down the loading speed of your blog, so try not to put any widgets using any website.

I told in this post that How to put related post widget in Blogger blog. I hope you have liked this post very much, to share this post with your friends and at the same time you must also give your feedback.

Leave A Reply

Your email address will not be published.