How to Add Related Post Section in Blogger with Thumbnail

One of the best way to decrease bounce rate and to increase multi-page sessions is by showing related posts section in the end of every post. So that you can keep the visitors engaging within the site. This also helps to get better ranking in SERPs.

Steps to add Related Posts widget in Blogger

• Step-1: Login in to Blogger.com Dashboard.
• Step-2: Go to the Theme Section >> Edit HTML.
• Step-3: Search for ]]></b:skin> by pressing Ctrl+F.
• Step-4: Now Paste the below code just above ]]></b:skin>

/* Related Posts Widget */
#PRelated {display:block;margin:29px 0;line-height:1.4em}#PRelated h3.title{font-size:16px;font-weight:600;text-align:center;text-transform:uppercase;line-height:initial}#PRelated h3.title span{background-color:#005af1;color:#fff;padding:0 15px;position:relative;z-index:1}
#PRelated h3.title:before{ content: ''; display: block;position: relative;top:10px;width: 100%;border-top: 2px solid #005af1;}
#PRelated ul li{list-style:none; width:calc((100% / 3) - 14px);text-align:center;margin-right:21px;margin-bottom:21px;padding:0px;-webkit-margin-start:0px !important;}
#PRelated ul{margin:21px 0 0;padding:0;display:flex;display:-webkit-flex;flex-wrap:wrap;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap}
#PRelated ul li .thumb{overflow:hidden;line-height:0;background-color:#ddd;border-radius:7px}#PRelated ul li:nth-of-type(3n){margin-right:0}#PRelated ul li a{display:block}#PRelated ul li a.judul{color:#000;font-family:Georgia;font-weight:600;margin-top:7px}#PRelated ul li a.judul:hover,#PRelated ul li:hover a.judul{color:#ff5721}#PRelated ul li a img{width:100%;max-height:144px;transition: 0.55s all ease-in-out;border:0;margin:0}#PRelated ul li a img:hover,#PRelated ul li:hover img{transform:scale(1.1);filter:brightness(86%);-webkit-filter:brightness(86%);animation:none;-moz-animation:none;-webkit-animation:none;-o-animation:none}#PRelated .norelated{text-align:center;font-weight:600}
@media screen and (max-width:481px){ #PRelated ul li{width: calc((100% / 2) - 7.5px);margin-right:15.5px;margin-bottom:15.5px;}#PRelated ul li:nth-of-type(3n){margin-right:15px;}#PRelated ul li:nth-of-type(2n){margin-right:0px;}}
/* Related Posts Widget */

Step-4: Now Search for <data:post.body/> and paste the below code just above this tag.

<b:if cond='data:view.isPost'>
<div id='PRelated'>
<h3 class='title'><span> #Related-Posts </span></h3>
<script>//<![CDATA[
var jumlah = 6;
'use strict';var _0x91f7=["<","split","length",">","indexOf","substring","","join","entry","feed","$t","title","content","summary","media$thumbnail","url","data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC","link","rel","alternate","href","random","floor","URL","<li>","<div class='thumb'><a href='","' title='","'><img src='","/w191-h123-p-k-no-nu","replace","' alt='","'/></a></div>","<a href='","' class='judul'>","</a>","</li>","write"];var rel=0;var judul=new Array;var urls=new Array;var gambar=new Array;function filter(_0x46aax6$jscomp$0,_0x46aax7$jscomp$0){var _0x46aax8$jscomp$0=_0x46aax6$jscomp$0[_0x91f7[1]](_0x91f7[0]);var _0x46aax9$jscomp$0=0;for(;_0x46aax9$jscomp$0<_0x46aax8$jscomp$0[_0x91f7[2]];_0x46aax9$jscomp$0++){if(_0x46aax8$jscomp$0[_0x46aax9$jscomp$0][_0x91f7[4]](_0x91f7[3])!=-1){_0x46aax8$jscomp$0[_0x46aax9$jscomp$0]=_0x46aax8$jscomp$0[_0x46aax9$jscomp$0][_0x91f7[5]](_0x46aax8$jscomp$0[_0x46aax9$jscomp$0][_0x91f7[4]](_0x91f7[3])+1,_0x46aax8$jscomp$0[_0x46aax9$jscomp$0][_0x91f7[2]])}}_0x46aax8$jscomp$0=_0x46aax8$jscomp$0[_0x91f7[7]](_0x91f7[6]);_0x46aax8$jscomp$0=_0x46aax8$jscomp$0[_0x91f7[5]](0,_0x46aax7$jscomp$0-1);return _0x46aax8$jscomp$0}function relpostimgcuplik(_0x46aax7$jscomp$1){var _0x46aax8$jscomp$1=0;for(;_0x46aax8$jscomp$1<_0x46aax7$jscomp$1[_0x91f7[9]][_0x91f7[8]][_0x91f7[2]];_0x46aax8$jscomp$1++){var _0x46aax6$jscomp$1=_0x46aax7$jscomp$1[_0x91f7[9]][_0x91f7[8]][_0x46aax8$jscomp$1];judul[rel]=_0x46aax6$jscomp$1[_0x91f7[11]][_0x91f7[10]];postcontent=_0x91f7[6];if(_0x91f7[12]in _0x46aax6$jscomp$1){postcontent=_0x46aax6$jscomp$1[_0x91f7[12]][_0x91f7[10]]}else{if(_0x91f7[13]in _0x46aax6$jscomp$1){postcontent=_0x46aax6$jscomp$1[_0x91f7[13]][_0x91f7[10]]}}if(_0x91f7[14]in _0x46aax6$jscomp$1){postimg=_0x46aax6$jscomp$1[_0x91f7[14]][_0x91f7[15]]}else{postimg=_0x91f7[16]}gambar[rel]=postimg;var _0x46aax9$jscomp$1=0;for(;_0x46aax9$jscomp$1<_0x46aax6$jscomp$1[_0x91f7[17]][_0x91f7[2]];_0x46aax9$jscomp$1++){if(_0x46aax6$jscomp$1[_0x91f7[17]][_0x46aax9$jscomp$1][_0x91f7[18]]==_0x91f7[19]){urls[rel]=_0x46aax6$jscomp$1[_0x91f7[17]][_0x46aax9$jscomp$1][_0x91f7[20]];break}}rel++}}function contains(_0x46aaxc$jscomp$0,_0x46aax8$jscomp$2){var _0x46aax9$jscomp$2=0;for(;_0x46aax9$jscomp$2<_0x46aaxc$jscomp$0[_0x91f7[2]];_0x46aax9$jscomp$2++){if(_0x46aaxc$jscomp$0[_0x46aax9$jscomp$2]==_0x46aax8$jscomp$2){return true}}return false}function PRelatedGrid(){var _0x46aaxe$jscomp$0=new Array(0);var _0x46aaxf$jscomp$0=new Array(0);var _0x46aax10$jscomp$0=new Array(0);var _0x46aax11$jscomp$0=new Array(0);var _0x46aax12$jscomp$0=0;for(;_0x46aax12$jscomp$0<urls[_0x91f7[2]];_0x46aax12$jscomp$0++){if(!contains(_0x46aaxe$jscomp$0,urls[_0x46aax12$jscomp$0])){_0x46aaxe$jscomp$0[_0x91f7[2]]+=1;_0x46aaxe$jscomp$0[_0x46aaxe$jscomp$0[_0x91f7[2]]-1]=urls[_0x46aax12$jscomp$0];_0x46aaxf$jscomp$0[_0x91f7[2]]+=1;_0x46aaxf$jscomp$0[_0x46aaxf$jscomp$0[_0x91f7[2]]-1]=judul[_0x46aax12$jscomp$0];_0x46aax10$jscomp$0[_0x91f7[2]]+=1;_0x46aax11$jscomp$0[_0x91f7[2]]+=1;_0x46aax11$jscomp$0[_0x46aax11$jscomp$0[_0x91f7[2]]-1]=gambar[_0x46aax12$jscomp$0]}}judul=_0x46aaxf$jscomp$0;urls=_0x46aaxe$jscomp$0;gambar=_0x46aax11$jscomp$0;_0x46aax12$jscomp$0=0;for(;_0x46aax12$jscomp$0<judul[_0x91f7[2]];_0x46aax12$jscomp$0++){var _0x46aax13$jscomp$0=Math[_0x91f7[22]]((judul[_0x91f7[2]]-1)*Math[_0x91f7[21]]());var _0x46aax14$jscomp$0=judul[_0x46aax12$jscomp$0];var _0x46aax15$jscomp$0=urls[_0x46aax12$jscomp$0];var _0x46aax16$jscomp$0=gambar[_0x46aax12$jscomp$0];judul[_0x46aax12$jscomp$0]=judul[_0x46aax13$jscomp$0];urls[_0x46aax12$jscomp$0]=urls[_0x46aax13$jscomp$0];gambar[_0x46aax12$jscomp$0]=gambar[_0x46aax13$jscomp$0];judul[_0x46aax13$jscomp$0]=_0x46aax14$jscomp$0;urls[_0x46aax13$jscomp$0]=_0x46aax15$jscomp$0;gambar[_0x46aax13$jscomp$0]=_0x46aax16$jscomp$0}var _0x46aax17$jscomp$0=0;var _0x46aax18$jscomp$0=Math[_0x91f7[22]]((judul[_0x91f7[2]]-1)*Math[_0x91f7[21]]());var _0x46aax19$jscomp$0=_0x46aax18$jscomp$0;var _0x46aax1a$jscomp$0;var _0x46aax1b$jscomp$0=document[_0x91f7[23]];for(;_0x46aax17$jscomp$0<jumlah;){if(urls[_0x46aax18$jscomp$0]!=_0x46aax1b$jscomp$0){_0x46aax1a$jscomp$0=_0x91f7[24];_0x46aax1a$jscomp$0=_0x46aax1a$jscomp$0+(_0x91f7[25]+urls[_0x46aax18$jscomp$0]+_0x91f7[26]+judul[_0x46aax18$jscomp$0]+_0x91f7[27]+gambar[_0x46aax18$jscomp$0][_0x91f7[29]](/\/s[0-9]+(\-c)?/,_0x91f7[28])+_0x91f7[30]+judul[_0x46aax18$jscomp$0]+_0x91f7[26]+judul[_0x46aax18$jscomp$0]+_0x91f7[31]);_0x46aax1a$jscomp$0=_0x46aax1a$jscomp$0+(_0x91f7[32]+urls[_0x46aax18$jscomp$0]+_0x91f7[33]+judul[_0x46aax18$jscomp$0]+_0x91f7[34]);_0x46aax1a$jscomp$0=_0x46aax1a$jscomp$0+_0x91f7[35];document[_0x91f7[36]](_0x46aax1a$jscomp$0);_0x46aax17$jscomp$0++;if(_0x46aax17$jscomp$0==jumlah){break}}if(_0x46aax18$jscomp$0<judul[_0x91f7[2]]-1){_0x46aax18$jscomp$0++}else{_0x46aax18$jscomp$0=0}if(_0x46aax18$jscomp$0==_0x46aax19$jscomp$0){break}}};
//]]></script>
<b:if cond='data:post.labels'>
<b:loop class='lazy' values='data:post.labels' var='label'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=relpostimgcuplik&amp;max-results=25&quot;'/>
</b:loop>
<ul>
<script>PRelatedGrid();</script>
</ul>
<b:else/>
There are no other posts in this category.
</b:if>
</div>
<div class='clear'/>
</b:if>

Also Read:  How to Add Social Media Sharing Buttons in Blogger