Blogger Tutorial: How to Put Related Posts at the Bottom of the Post in Blogger

9:11:00 PM Viv Beck 0 Comments

Putting Related Posts With Thumbnails at the Bottom of Your Posts Keeps Reader's Interest

By putting related posts with thumbnails at the bottom of your post, you're doing more than making your blog look cool. Putting related blog posts at the bottom of your blogger posts actually increase your SEO. This is because you create internal links within your site. This is a good thing. You're telling the spiders that cruise through your site that you are thoughtful about the content, that it's all related. SEO ranking, or link juice, that gets traffic, likes this stuff. this internal linking also increases the reality of your site for visitors. Putting related posts with thumbnails at  the bottom of your post is a simple process. Even if you know nothing about HTML you can do it. Just follow the direction below and you're blogger site will have related posts with thumbnails in just a few minutes. All you're going to to is open your HTML code of your blogger site and post the code I give you in the specific place I tell you paste it. There are two piece of code you need and they're given to you below. See, I told you, no coding skills necessary. All you need it to find the location of where to paste this code. First... Step 1 You need to go to the HTML of your blogger site. Click in the HTML window anywhere in the code. Bring up the HTML search bar in the upper right hand corner of the HTML text box. You do this by hitting COMMAND F on a mac and Control F on a PC. Notice, you see a small search bar that reveals itself in the upper right hand corner.
 
This is where you place specific code to help you locate it. The location of the code I'm about to give you is important. You MUST paste the code you copied in the correct location in the provided code or it won't work. Step 2 Copy this very short code: 
</head>
Go over to the search bar you just pulled up on your site. Paste the very short code into the search bar in the upper right hand corner and press enter. This will find the code you put in the search bar and highlight it in yellow. Now you found the proper location within the code. Put your cursor to the left of the highlighted code and press return a couple of times. This is giving you the space to paste the next bundle of code you'll be putting in. Creating this space does not change the code of your site. The only thing this does is make room for the code you're about to paste in this space.
 
Come back to this post. Step 3 Add Style to the Related Post Be sure to copy the exact code, with no extra spaces included. COPY THIS NOW: 
<!--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/AVvXsEhGY1w3WIAPqpBlM-4WZ55eNJAuQoambnh70jx1yA53Ok3HkL8oNJXnoKNR8Ag7_hk6CUheIs8GARq_1DMfDbw6Xa8kongOyMHXh9XNT_WCfkQHQ76TJv0Lj2i3rxgem59UjMHbNsqjRhC0/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/AVvXsEhGY1w3WIAPqpBlM-4WZ55eNJAuQoambnh70jx1yA53Ok3HkL8oNJXnoKNR8Ag7_hk6CUheIs8GARq_1DMfDbw6Xa8kongOyMHXh9XNT_WCfkQHQ76TJv0Lj2i3rxgem59UjMHbNsqjRhC0/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-->
Paste this code in the space you created in the code in the previous step. This is what it will look like: Before Pasting the Code:
After Pasting the Code:
 
Step 4 Add the Thumbnail to the Related Post Copy the code below. Paste it into your finder and press return, just like you did for the previous step. 
<div class='comments' id='comments'>
Once you press return, the finder reveals the location of where you want to place the next piece of code you will need to enter. Notice, the yellow highlight.
Again, you're going to create a space for the code you are about to enter by putting the cursor before the yellow highlighted code and press the return key a couple of times. Notice the space above the highlighted code.
 
Copy the code below. This is what you will paste in the space you just created in your site's HTML code. paste it before the code you just found in your HTML finder. 
<!-- 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-->
Then click "save template"
You now have related posts with thumbnails at the bottom of your blogger post! Congratulation!!!