Cara Membuat Related Post di Bawah Postingan Blog

Related post atau artikel terkait adalah sekumpulan link yang menuju ke postingan atau artikel yang miliki kesamaan topik dengan konten yang sedang dibaca.
Keberadaannya sendiri sekarang sudah lumrah dan mungkin belakangan ini menjadi wajib karena dapat membuat pengunjung tertarik untuk menjelajahi postingan lainnya yang kamu miliki.

Keuntungan memasang related post atau artikel terkait dari pandangan SEO

• Meningkatkankan page views atau PV.
• Menurunkan bounce rate.
• Meningkatkan waktu kunjungan rata² pengunjung.

Pertama sobat harus menambahkan kode CSS ini kedalam template. Letakkan tepat DIATAS kode
]]></b:skin>

 /* Related Post Grid by igniel */
#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: '';
  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;
  }
}

Kemudian tambahkan juga kode ini, letakkan tepat DIBAWAH <data:post.body/>

 <!-- Related Post Grid by igniel -->
<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>

Sobat juga bisa mengubah warna dan var atau jumlah related post yang muncul.

Lalu simpan, dan inilah hasilnya.

Saya sudah mencoba tutorial ini di template viomagz dan hasilnya sangat keren.

source: igniel.com

Share this post

Artikel Terkait