Blogger Tutorial For Blogger-How To Add Related Post

Related Posts In Google Blogger

Why should I add a related post to my blog and does it add value to my blogger blog? That is the question many people asked me, but in this tutorial for beginners, I am going to show you a step-by-step method of adding a related post to your blogger blog.

A related post, as the name implies, shows posts that are related to the current post you are viewing when on any Google blogger blog. In other words, it displayed the posts that are in the same Category/Label below the current post being viewed. To answer the question my visitors usually asked me.

A related post adds to the internal linking structure of a blog, one of the important SEO metrics Google to determine the relevance of your blog posts – how related posts are interlinked to one another. Another advantage of adding a related post is that it allows the visitor to quickly search for related posts that might be of importance to them.

Now back to the real work – how to add a related post with a thumbnail image. As you can see in the image, there are 5 posts that are related to the current post being displayed. To see the effect of the related post in your blog, make sure you have at least two posts in the same Category/Label. I would prefer you have six posts. Secondly, all posts must have an image so that the thumbnails for the posts can be displayed.

You may read this:
How To Create Sitemap Page For Blogger Bog

Blogger Tutorial For Beginners – How To Add Page

To add a related post at the bottom of a post, follow the steps given below:

Step one: Edit the Blog's HTML  by adding CSS to the head section

In the blogger dashboard, select Template > HTML to see HTML/XML code of your blog as shown below. Find  </head> tag in the code by pressing Ctrl + F  and type the header tag in the search bar displayed and press the enter key.

Copy-paste the below code above the </head> tag. This code is the CSS for the related post.

 <!--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]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj31muk1R5yD3oHs2YqzAXYDzJn548D8xcMuIuzgjsFcm39mHAPyPWwUWClOL2IR5ixiR_a2RYezQWhUxTheyx9NHEa53Dj07G-GRI09fqPSgY27Ay3zPOiGHrbvgtkem1RfVq3S8pMYOKF/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]='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj31muk1R5yD3oHs2YqzAXYDzJn548D8xcMuIuzgjsFcm39mHAPyPWwUWClOL2IR5ixiR_a2RYezQWhUxTheyx9NHEa53Dj07G-GRI09fqPSgY27Ay3zPOiGHrbvgtkem1RfVq3S8pMYOKF/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 two: Add the code for the related post

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

With the same method used in step one, find this tag <div class= ‘comments’ id= ‘comments’>. Copy-paste the below code above the <div class= ‘comments’ id= ‘comments’> tag. In most cases, there are two instances of this <div class= ‘comments’ …..> tag in Google blogger blog. Paste the code above the one and save your blog, if nothing changes then erase the code above the instance of the tag and place the code on the second tag and press save.

In my own case, the second <div class= ‘comments’ …..> tag worked and all related posts rendered nicely. You can as well play with the CSS file you have just copied to the head section, but only if you know what you are doing. Fill free and enjoy yourself by following the steps in this tutorial. Share your comment/opinion about this post – How To Add Related Post. Thank you for reading.