How To Add Related Post With Thumbnail In Blogger

  

One of the important elements within a blog layout is the related content section. No matter how good is your content, unless you don't offer similar or matching content entries around the blog post, you cannot expect engaging and multi-page sessions from the visitors. Search engines too prefer to rank sites on which the visitors spend more time browsing the content.

So, if your post has not been labelled, there will be no related post displayed to your readers.

Hence, you should make sure that you have published your blog post indicating labels.

How To Add Related Post With Thumbnail In Blogger

• Login to your blogger blog Dashboard.
• Then go to Theme > > Edit HTML.
• Click anywhere inside the code area and press Ctrl + F keys to open the search box.
• Now, Search for ]]></b:skin> Or </style> tag and paste below code just above of this tag.

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

• Now, Search for <data:post.body/> tag and paste below code just after of this tag.

Note :- If you see this code one or more times, Select the code that appears in the last.

<b:if cond='data:view.isPost'>
<div id='Related'>
    <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 RelatedGrid(){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='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=relpostimgcuplik&max-results=25"'/>
      </b:loop>
      <ul>
        <script>RelatedGrid();</script>
      </ul>
      <b:else/>
      There is no other posts in this category.
    </b:if>
  </div>
<div class='clear'/>
  </b:if>

• Click Save Theme.