How to Create a Related Post Grid (related articles) Under Blog Posts

Table of Contents [Hide]

     Create a related post with a thumbnail image below the blog post - What is a Related Post? Related posts are a set of links that lead to posts related to the articles read, or you can say they still have the same topic.

    Related Post Grid
    Related Post Grid

    This has been done a lot of blogs - blogs that are already well known and have a name on google because it can increase the PV on a blog.

    Related: Script to Remove Automatically Active Links in Blogger Comments

    The advantages that can be taken from the installation of Related Posts in terms of blog SEO:

    1. Help increase blog visitors' PV or page views because many people need helpful articles, so having related posts is beneficial for your blog visitors.
    2. Lowering your blog's Bounce Rate, Why is that? Because with these related posts, your blog is said to be attractive and looks elegant for blog visitors.
    3. Help increase the average visit time on the blog; what does that mean? As I explained earlier, visitors will see your other articles related to the theme or topic if your article is attractive and easy to understand.

    An excellent position to put related posts is at the end of the article to not disturb visitors to read the paper they are reading now. The placement below is what visitors will see if it's interesting; of course, visitors will click and see other related articles.

    Here I will give two (2) options, namely:

    • 3 column grid with thumbnails
    • 4 column grid with thumbnails

    How to put a Related post under a blog post with Thumbnail

    A. Three (3) column Grid

    1. Log in to your blogger first,

    2. Go to Theme menu ~ Edit HTML,

    3. And copy and paste the CSS code below, just above </style> or ]]></b:skin>. To make it easier to find the code, type CTRL + F on the keyboard.

    /* Related Post Grid by inputlearn.net */
    #ignielRelated{
      display:block;
      margin:20px 0px;
      line-height:1.5em;
    }
    #ignielRelated h3.title{
      font-size:16px;
      font-weight:600;
      text-align:center;
      text-transform:uppercase;
      line-height:initial;
    }
    #ignielRelated h3.title span{
      background-color:#fff;
      padding:0px 15px;
      position:relative;
      z-index:1;
    }
    #ignielRelated h3.title:before{
      content: &amp;amp;#039;&amp;amp;#039;;
      display: block;
      position: relative;
      top:10px;
      width: 100%;
      border-top: 2px solid #cccccc;
    }
    #ignielRelated ul{
      margin:20px 0px 0px;
      padding:0px;
      display:flex;
      display:-webkit-flex;
      flex-wrap:wrap;
      -webkit-flex-wrap:wrap;
      -ms-flex-wrap:wrap;
    }
    #ignielRelated 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;
    }
    #ignielRelated ul li .thumb{
      overflow:hidden;
      line-height:0px;
      border-radius:7px;
    }
    #ignielRelated ul li:nth-of-type(3n){
      margin-right:0px;
    }
    #ignielRelated ul li a{
      display:block;
    }
    #ignielRelated ul li a.judul{
      color:#000; /* Warna Huruf */
      font-weight:600;
      margin-top:7px;
    }
    #ignielRelated ul li a.judul:hover, #ignielRelated ul li:hover a.judul{
      color:#ff5722; /* Warna Huruf Ketika Disorot */
    }
    #ignielRelated ul li a img{
      width:100%;
      max-height:143px;
      transition:all .3s ease;
      border:0px;
      margin:0px;
    }
    #ignielRelated ul li a img:hover, #ignielRelated ul li:hover img{
      transform:scale(1.1) rotate(-5deg);
      filter: brightness(75%);
      -webkit-filter: brightness(75%);
    }
    #ignielRelated .norelated{
      text-align:center;
      font-weight:600;
    }
    @media screen and (max-width:480px){
      #ignielRelated ul li{
        width: calc((100% / 2) - 7.5px);
        margin-right:15px;
        margin-bottom:15px;
      }
      #ignielRelated ul li:nth-of-type(3n){
        margin-right:15px;
      }
      #ignielRelated ul li:nth-of-type(2n){
        margin-right:0px;
      }
    }

    4. Still in Editing HTML, please find the code <data:post.body/>, and paste the code below right after the code <data:post.body/>.

    &lt;!-- Related Post Grid by inputlearn.net --&gt;
    &lt;b:if cond=&#039;data:view.isPost&#039;&gt;
      &lt;div id=&#039;ignielRelated&#039;&gt;
        &lt;h3 class=&#039;title&#039;&gt;&lt;span&gt;Related Posts&lt;/span&gt;&lt;/h3&gt;
        &lt;script&gt;//&lt;![CDATA[
          var jumlah = 6;
          eval(function(p,a,c,k,e,d){e=function(c){return(c&lt;a?&#039;&#039;:e(parseInt(c/a)))+((c=c%a)&gt;35?String.fromCharCode(c+29):c.toString(36))};if(!&#039;&#039;.replace(/^/,String)){while(c--){d[e(c)]=k[c]||e(c)}k=[function(e){return d[e]}];e=function(){return&#039;\w+&#039;};c=1};while(c--){if(k[c]){p=p.replace(new RegExp(&#039;\b&#039;+e(c)+&#039;\b&#039;,&#039;g&#039;),k[c])}}return p}(&#039;d a=[&quot;\y&quot;,&quot;\x\1f\f\k\h&quot;,&quot;\f\e\q\C\h\E&quot;,&quot;\w&quot;,&quot;\k\q\A\e\1Y\1d\P&quot;,&quot;\x\z\U\x\h\n\k\q\C&quot;,&quot;&quot;,&quot;\1l\F\k\q&quot;,&quot;\e\q\h\n\1E&quot;,&quot;\P\e\e\A&quot;,&quot;\1H\h&quot;,&quot;\h\k\h\f\e&quot;,&quot;\S\F\q\h\e\q\h&quot;,&quot;\x\z\v\v\g\n\1E&quot;,&quot;\v\e\A\k\g\1H\h\E\z\v\U\q\g\k\f&quot;,&quot;\z\n\f&quot;,&quot;\A\g\h\g\2n\k\v\g\C\e\D\1f\q\C\2q\U\g\x\e\1M\1z\2p\k\1t\1w\1d\1C\1i\2k\2j\2e\C\F\b\b\b\b\1I\1n\Z\E\V\Z\C\b\b\b\b\V\b\b\b\b\1w\O\b\1r\b\b\b\O\W\A\1b\2f\e\b\b\b\b\b\1A\1I\O\1n\1t\W\1r\O\b\1l\U\1z\Z\D\C\b\b\b\b\2h\V\f\V\W\1t\W\1r\v\1T\1d\F\n\1M\2g\2b\b\b\1B\1X\b\1W\1V\1j\1d\1K\1G\1J\b\b\b\b\b\V\f\1K\1J\1k\1n\z\W\v\O\O&quot;,&quot;\f\k\q\1k&quot;,&quot;\n\e\f&quot;,&quot;\g\f\h\e\n\q\g\h\e&quot;,&quot;\E\n\e\P&quot;,&quot;\n\g\q\A\F\v&quot;,&quot;\P\f\F\F\n&quot;,&quot;\Z\1C\1B&quot;,&quot;\y\f\k\w&quot;,&quot;\y\A\k\1j\K\S\f\g\x\x\I\p\h\E\z\v\U\p\w\y\g\K\E\n\e\P\I\p&quot;,&quot;\p\K\h\k\h\f\e\I\p&quot;,&quot;\p\w\y\k\v\C\K\x\n\S\I\p&quot;,&quot;\D\1i\1b\2a\1b\X\E\1b\1G\1A\X\1f\X\1k\X\q\F\X\q\z&quot;,&quot;\n\e\1f\f\g\S\e&quot;,&quot;\p\K\g\f\h\I\p&quot;,&quot;\p\D\w\y\D\g\w\y\D\A\k\1j\w&quot;,&quot;\y\g\K\E\n\e\P\I\p&quot;,&quot;\p\K\S\f\g\x\x\I\p\1l\z\A\z\f\p\w&quot;,&quot;\y\D\g\w&quot;,&quot;\y\D\f\k\w&quot;,&quot;\1i\n\k\h\e&quot;];d Q=0,l=J H(),r=J H(),B=J H();1c 2l(t,T){d i=t[a[1]](a[0]);N(d j=0;j&lt;i[a[2]];j++){u(i[j][a[4]](a[3])!=-1){i[j]=i[j][a[5]](i[j][a[4]](a[3])+1,i[j][a[2]])}};i=i[a[7]](a[6]);i=i[a[5]](0,T-1);1q i}1c 2d(T){N(d i=0;i&lt;T[a[9]][a[8]][a[2]];i++){d t=T[a[9]][a[8]][i];l[Q]=t[a[11]][a[10]];1g=a[6];u(a[12]1h t){1g=t[a[12]][a[10]]}1s{u(a[13]1h t){1g=t[a[13]][a[10]]}};u(a[14]1h t){1m=t[a[14]][a[15]]}1s{1m=a[16]};B[Q]=1m;N(d j=0;j&lt;t[a[17]][a[2]];j++){u(t[a[17]][j][a[18]]==a[19]){r[Q]=t[a[17]][j][a[20]];1o}};Q++}}1c 1L(1p,i){N(d j=0;j&lt;1p[a[2]];j++){u(1p[j]==i){1q 1Q}};1q 1P}1c 1R(){d L=J H(0);d R=J H(0);d 1N=J H(0);d Y=J H(0);N(d m=0;m&lt;r[a[2]];m++){u(!1L(L,r[m])){L[a[2]]+=1;L[L[a[2]]-1]=r[m];R[a[2]]+=1;R[R[a[2]]-1]=l[m];1N[a[2]]+=1;Y[a[2]]+=1;Y[Y[a[2]]-1]=B[m]}};l=R;r=L;B=Y;N(d m=0;m&lt;l[a[2]];m++){d G=1a[a[22]]((l[a[2]]-1)*1a[a[21]]());d 1O=l[m];d 1F=r[m];d 1v=B[m];l[m]=l[G];r[m]=r[G];B[m]=B[G];l[G]=1O;r[G]=1F;B[G]=1v};d 1e=0;d o=1a[a[22]]((l[a[2]]-1)*1a[a[21]]());d 1D=o;d M;d 1y=1u[a[23]];2i(1e&lt;1x){u(r[o]!=1y){M=a[24];M+=a[25]+r[o]+a[26]+l[o]+a[27]+B[o][a[29]](/\/s[0-9]+(\-c)?/,a[28])+a[2o]+l[o]+a[26]+l[o]+a[2c];M+=a[2m]+r[o]+a[2r]+l[o]+a[1Z];M+=a[1S];1u[a[1U]](M);1e++;u(1e==1x){1o}};u(o&lt;l[a[2]]-1){o++}1s{o=0};u(o==1D){1o}}}&#039;,62,152,&#039;||||||||||_0x91f7|x41||var|x65|x6C|x61|x74|_0x46aax8|_0x46aax9|x69|judul|_0x46aax12|x72|_0x46aax18|x27|x6E|urls||_0x46aax6|if|x6D|x3E|x73|x3C|x75|x64|gambar|x67|x2F|x68|x6F|_0x46aax13|Array|x3D|new|x20|_0x46aaxe|_0x46aax1a|for|x43|x66|rel|_0x46aaxf|x63|_0x46aax7|x62|x45|x51|x2D|_0x46aax11|x55|||||||||||Math|x31|function|x4F|_0x46aax17|x70|postcontent|in|x77|x76|x6B|x6A|postimg|x53|break|_0x46aaxc|return|x49|else|x56|document|_0x46aax16|x42|jumlah|_0x46aax1b|x34|x33|x4C|x52|_0x46aax19|x79|_0x46aax15|x32|x24|x4E|x54|x46|contains|x36|_0x46aax10|_0x46aax14|false|true|ignielRelatedGrid|35|x57|36|x37|x58|x2B|x78|34|||||||||||x39|x48|31|relpostimgcuplik|x47|x50|x38|x44|while|x4B|x30|filter|32|x3A|30|x2C|x3B|33&#039;.split(&#039;|&#039;),0,{}));
          //]]&gt;&lt;/script&gt;
        &lt;b:if cond=&#039;data:post.labels&#039;&gt;
          &lt;b:loop values=&#039;data:post.labels&#039; var=&#039;label&#039;&gt;
            &lt;script expr:src=&#039;&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;amp;callback=relpostimgcuplik&amp;amp;max-results=25&quot;&#039;/&gt;
          &lt;/b:loop&gt;
          &lt;ul&gt;
            &lt;script&gt;ignielRelatedGrid();&lt;/script&gt;
          &lt;/ul&gt;
          &lt;b:else/&gt;
          There is no other posts in this category.
        &lt;/b:if&gt;
      &lt;/div&gt;
    &lt;div class=&#039;clear&#039;/&gt;
    &lt;/b:if&gt;

    5. Save Theme.

    B. Four (4) column Grid

    1. For the same installation as before, go to the Theme menu ~ Edit HTML.

    2. Then copy and paste the code below just above the </style> or ]]></b:skin> code.

      /* Related Post Grid by inputlearn.net */
    #ignielRelated{
      display:block;
      margin:20px 0px;
      line-height:1.5em;
    }
    #ignielRelated h3.title{
      font-size:16px;
      font-weight:600;
      text-align:center;
      text-transform:uppercase;
      line-height:initial;
    }
    #ignielRelated h3.title span{
      background-color:#fff;
      padding:0px 15px;
      position:relative;
      z-index:1;
    }
    #ignielRelated h3.title:before{
      content: &amp;amp;#039;&amp;amp;#039;;
      display: block;
      position: relative;
      top:10px;
      width: 100%;
      border-top: 2px solid #cccccc;
    }
    #ignielRelated ul{
      margin:20px 0px 0px;
      padding:0px;
      display:flex;
      display:-webkit-flex;
      flex-wrap:wrap;
      -webkit-flex-wrap:wrap;
      -ms-flex-wrap:wrap;
    }
    #ignielRelated ul li{
      list-style:none;
      width:calc((100% / 4) - 7.5px);
      text-align:center;
      margin-right:10px;
      margin-bottom:20px;
      padding:0px;
      -webkit-margin-start:0px !important;
    }
    #ignielRelated ul li .thumb{
      overflow:hidden;
      line-height:0px;
      border-radius:7px;
    }
    #ignielRelated ul li:nth-of-type(4n){
      margin-right:0px;
    }
    #ignielRelated ul li a{
      display:block;
    }
    #ignielRelated ul li a.judul{
      color: #000; /* Warna Judul */
      font-weight:600;
      margin-top:7px;
    }
    #ignielRelated ul li a.judul:hover, #ignielRelated ul li:hover a.judul{
      color: #ff5722; /* Warna Judul Ketika Disorot */
    }
    #ignielRelated ul li a img{
      width:100%;
      max-height:143px;
      transition:all .3s ease;
      border:0px;
      margin:0px;
    }
    #ignielRelated ul li a img:hover, #ignielRelated ul li:hover img{
      transform:scale(1.1) rotate(-5deg);
      filter: brightness(75%);
      -webkit-filter: brightness(75%);
    }
    #ignielRelated .norelated{
      text-align:center;
      font-weight:600;
    }
    @media screen and (max-width:480px){
      #ignielRelated ul li{
        width: calc((100% / 2) - 7.5px);
        margin-right:15px;
        margin-bottom:15px;
      }
      #ignielRelated ul li:nth-of-type(4n){
        margin-right:15px;
      }
      #ignielRelated ul li:nth-of-type(2n){
        margin-right:0px;
      }
    }

    3. Then, just like before, look for the code <data:post.body/> and paste the code below right below the code <data:post.body/>.

      <!-- Related Post Grid by inputlearn.net -->
    <b:if cond='data:view.isPost'>
      <div id='ignielRelated'>
        <h3 class='title'><span>Related Posts</span></h3>
        <script>//<![CDATA[
          var jumlah = 8;
          eval(function(p,a,c,k,e,d){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--){d[e(c)]=k[c]||e(c)}k=[function(e){return d[e]}];e=function(){return'\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\b'+e(c)+'\b','g'),k[c])}}return p}('d a=["\y","\x\1f\f\k\h","\f\e\q\C\h\E","\w","\k\q\A\e\1Y\1d\P","\x\z\U\x\h\n\k\q\C","","\1l\F\k\q","\e\q\h\n\1E","\P\e\e\A","\1H\h","\h\k\h\f\e","\S\F\q\h\e\q\h","\x\z\v\v\g\n\1E","\v\e\A\k\g\1H\h\E\z\v\U\q\g\k\f","\z\n\f","\A\g\h\g\2n\k\v\g\C\e\D\1f\q\C\2q\U\g\x\e\1M\1z\2p\k\1t\1w\1d\1C\1i\2k\2j\2e\C\F\b\b\b\b\1I\1n\Z\E\V\Z\C\b\b\b\b\V\b\b\b\b\1w\O\b\1r\b\b\b\O\W\A\1b\2f\e\b\b\b\b\b\1A\1I\O\1n\1t\W\1r\O\b\1l\U\1z\Z\D\C\b\b\b\b\2h\V\f\V\W\1t\W\1r\v\1T\1d\F\n\1M\2g\2b\b\b\1B\1X\b\1W\1V\1j\1d\1K\1G\1J\b\b\b\b\b\V\f\1K\1J\1k\1n\z\W\v\O\O","\f\k\q\1k","\n\e\f","\g\f\h\e\n\q\g\h\e","\E\n\e\P","\n\g\q\A\F\v","\P\f\F\F\n","\Z\1C\1B","\y\f\k\w","\y\A\k\1j\K\S\f\g\x\x\I\p\h\E\z\v\U\p\w\y\g\K\E\n\e\P\I\p","\p\K\h\k\h\f\e\I\p","\p\w\y\k\v\C\K\x\n\S\I\p","\D\1i\1b\2a\1b\X\E\1b\1G\1A\X\1f\X\1k\X\q\F\X\q\z","\n\e\1f\f\g\S\e","\p\K\g\f\h\I\p","\p\D\w\y\D\g\w\y\D\A\k\1j\w","\y\g\K\E\n\e\P\I\p","\p\K\S\f\g\x\x\I\p\1l\z\A\z\f\p\w","\y\D\g\w","\y\D\f\k\w","\1i\n\k\h\e"];d Q=0,l=J H(),r=J H(),B=J H();1c 2l(t,T){d i=t[a[1]](a[0]);N(d j=0;j<i[a[2]];j++){u(i[j][a[4]](a[3])!=-1){i[j]=i[j][a[5]](i[j][a[4]](a[3])+1,i[j][a[2]])}};i=i[a[7]](a[6]);i=i[a[5]](0,T-1);1q i}1c 2d(T){N(d i=0;i<T[a[9]][a[8]][a[2]];i++){d t=T[a[9]][a[8]][i];l[Q]=t[a[11]][a[10]];1g=a[6];u(a[12]1h t){1g=t[a[12]][a[10]]}1s{u(a[13]1h t){1g=t[a[13]][a[10]]}};u(a[14]1h t){1m=t[a[14]][a[15]]}1s{1m=a[16]};B[Q]=1m;N(d j=0;j<t[a[17]][a[2]];j++){u(t[a[17]][j][a[18]]==a[19]){r[Q]=t[a[17]][j][a[20]];1o}};Q++}}1c 1L(1p,i){N(d j=0;j<1p[a[2]];j++){u(1p[j]==i){1q 1Q}};1q 1P}1c 1R(){d L=J H(0);d R=J H(0);d 1N=J H(0);d Y=J H(0);N(d m=0;m<r[a[2]];m++){u(!1L(L,r[m])){L[a[2]]+=1;L[L[a[2]]-1]=r[m];R[a[2]]+=1;R[R[a[2]]-1]=l[m];1N[a[2]]+=1;Y[a[2]]+=1;Y[Y[a[2]]-1]=B[m]}};l=R;r=L;B=Y;N(d m=0;m<l[a[2]];m++){d G=1a[a[22]]((l[a[2]]-1)*1a[a[21]]());d 1O=l[m];d 1F=r[m];d 1v=B[m];l[m]=l[G];r[m]=r[G];B[m]=B[G];l[G]=1O;r[G]=1F;B[G]=1v};d 1e=0;d o=1a[a[22]]((l[a[2]]-1)*1a[a[21]]());d 1D=o;d M;d 1y=1u[a[23]];2i(1e<1x){u(r[o]!=1y){M=a[24];M+=a[25]+r[o]+a[26]+l[o]+a[27]+B[o][a[29]](/\/s[0-9]+(\-c)?/,a[28])+a[2o]+l[o]+a[26]+l[o]+a[2c];M+=a[2m]+r[o]+a[2r]+l[o]+a[1Z];M+=a[1S];1u[a[1U]](M);1e++;u(1e==1x){1o}};u(o<l[a[2]]-1){o++}1s{o=0};u(o==1D){1o}}}',62,152,'||||||||||_0x91f7|x41||var|x65|x6C|x61|x74|_0x46aax8|_0x46aax9|x69|judul|_0x46aax12|x72|_0x46aax18|x27|x6E|urls||_0x46aax6|if|x6D|x3E|x73|x3C|x75|x64|gambar|x67|x2F|x68|x6F|_0x46aax13|Array|x3D|new|x20|_0x46aaxe|_0x46aax1a|for|x43|x66|rel|_0x46aaxf|x63|_0x46aax7|x62|x45|x51|x2D|_0x46aax11|x55|||||||||||Math|x31|function|x4F|_0x46aax17|x70|postcontent|in|x77|x76|x6B|x6A|postimg|x53|break|_0x46aaxc|return|x49|else|x56|document|_0x46aax16|x42|jumlah|_0x46aax1b|x34|x33|x4C|x52|_0x46aax19|x79|_0x46aax15|x32|x24|x4E|x54|x46|contains|x36|_0x46aax10|_0x46aax14|false|true|ignielRelatedGrid|35|x57|36|x37|x58|x2B|x78|34|||||||||||x39|x48|31|relpostimgcuplik|x47|x50|x38|x44|while|x4B|x30|filter|32|x3A|30|x2C|x3B|33'.split('|'),0,{}));
          //]]></script>
        <b:if cond='data:post.labels'>
          <b:loop values='data:post.labels' var='label'>
            <script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&amp;callback=relpostimgcuplik&amp;max-results=25"'/>
          </b:loop>
          <ul>
            <script>ignielRelatedGrid();</script>
          </ul>
          <b:else/>
          There is no other posts in this category.
        </b:if>
      </div>
    <div class='clear'/>
    </b:if>

    4. Save Theme.


    Take note

    Usually, for those who use the template made by Mas Sugeng, namely Viomagz, look for the <data:post.body/> code, usually there are (3) codes in the template. Please try one by one until it appears appropriate. For those who use a template other than Viomagz, please specify the code is also the same as the previous Viomagz.

    Related: 5 Easy Tips to Increase Alexa Rank

    Well, please try and practice it for those interested in using it. My advice should include related posts because it improves your blog's SEO.

    That's enough for this discussion about Installing related posts under blog posts with thumbnails. Hopefully helpful. Thank you. Script Source (Igniel.com)

    Source: Inputlearn.blogspot.com

    Previous Post Next Post

    Contact Form