Related Post dengan Thumbnail Model Grid di Bawah Postingan

Cara Membuat Related Post dengan Thumbnail Model Grid di Bawah Postingan

Related post atau artikel terkait adalah sekumpulan link yang menuju ke postingan atau konten lain yang memiliki kesamaan topik dengan artikel yang sedang dibaca. Keberadaannya sudah cukup lumrah dan sepertinya belakangan ini menjadi wajib karena dapat membuat pengunjung tertarik untuk menjelajahi postingan lainnya.

Beberapa keuntungan memasang related post dari segi SEO adalah:
  1. Meningkatkan page views (PV)
  2. Menurunkan bounce rate
  3. Meningkatkan waktu kunjungan rata-rata pengunjung
  4. Melengkapi navigasi blog agar terlihat lebih profesional

Posisi paling umum untuk menempatkan related post adalah di akhir artikel. Bayangkan saja ketika pengunjung selesai membaca satu artikel berkualitas, mereka pasti penasaran dengan artikel lain yang memiliki pembahasan serupa. Dengan adanya related post ini akan membantu pengunjung untuk langsung menuju artikel terkait yang dicari.

Cara Memasang Artikel Terkait dengan Thumbnail di Akhir Artikel

Related post ini dilengkapi dengan thumbnail (gambar) agar lebih menarik dengan gaya tampilan model grid. Saya pun pakai script ini untuk Fiksioner Free Blogger Template dan hasilnya cukup bagus. Rapi, terlihat sederhana dan elegan namun tidak terlalu berlebihan.


A. 3 Kolom

Tampilan grid ini memiliki 3 kolom. Cocok untuk blog yang area postingannya tidak terlalu lebar.

Pertama, tambahkan dulu kode CSS berikut "SEBELUM / DI ATAS" </style> atau ]]></b:skin>.
/* Related Post Grid by igniel.com */
#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;
  }
}

Yang bisa diganti:
#ignielRelated ul li a.judul: warna huruf di judul artikel.
#ignielRelated ul li a.judul:hover, #ignielRelated ul li:hover a.judul: warna huruf di judul artikel ketika disorot.

Lalu simpan kode ini "SESUDAH / DI BAWAH" <data:post.body/>.
<!-- Related Post Grid by igniel.com -->
<b:if cond='data:view.isPost'>
  <div id='ignielRelated'>
    <h3 class='title'><span>Related Posts</span></h3>
    <script>//<![CDATA[
      var jumlah = 6;
      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>

var jumlah adalah jumlah artikel terkait yang ingin dimunculkan. Kamu bisa ganti angkanya sesuka hati. Karena jumlah kolomnya ada 3, lebih baik pakai angka kelipatan 3 juga. Misalnya 6, 9, 12, dll agar tampilanya rapi.

Hasil dari artikel terkait grid 3 kolom dengan gambar.
Membuat Related Post Dengan Thumbnail di Dalam Artikel Blogger


B. 4 Kolom

Jika area postingan blog kamu cukup lebar, maka related post yang berjumlah 4 kolom cocok dipakai untuk menutupi area yang luas.

Simpan kode CSS berikut "SEBELUM / DI ATAS" </style> atau ]]></b:skin>.
/* Related Post Grid by igniel.com */
#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% / 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;
  }
}

Yang bisa diganti:
#ignielRelated ul li a.judul: warna huruf di judul artikel.
#ignielRelated ul li a.judul:hover, #ignielRelated ul li:hover a.judul: warna huruf di judul artikel ketika disorot.

Lalu simpan kode ini "SESUDAH / DI BAWAH" <data:post.body/>. Sebenarnya kodenya sama saja sih seperti yang 3 kolom sebelumnya.
<!-- Related Post Grid by igniel.com -->
<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>

var jumlah adalah jumlah artikel terkait yang ingin dimunculkan. Javascriptnya sama saja dengan versi 3 kolom. Yang perlu diganti hanya var jumlah untuk menyesuaikan tampilan. Angkanya bisa diubah sesukanya. Karena jumlah kolomnya ada 4, pakailah angka kelipatan 4 seperti 8, 12, 16, dll agar tampilanya rapi.

Hasil dari artikel terkait grid 4 kolom dengan gambar.
Cara Memasang Artikel Terkait Dengan Gambar di Postingan Blogspot

Selesai sudah tutorial tentang cara memasang artikel terkait dengan gambar di bawah postingan Blogger. Pilih model yang paling sesuai dengan template agar tampilan blog kamu makin keren. Jika kurang suka dengan model grid, coba juga jenis tampilan lain yaitu related post model list dengan thumbnail dan snippet.
SHARE Pin Share
Artikel Terkait
91 komentar
  1. Kalau sudah ada bawaanya bagaimana mb ? Apakah perlu d hapus atau akan otomatis tergantikan?

    BalasHapus
    Balasan
    1. Harus dihapus dulu biar nggak bentrok.

      Hapus
  2. cara nambahin gambar untuk yang gak ada image nya gimana mbak (no image) ?

    BalasHapus
    Balasan
    1. Ini sudah dilengkapi dengan noimage.

      Hapus
  3. Boleh tulis ulang artikelnya kak dengan Gaya saya sendiri

    BalasHapus
    Balasan
    1. Iya boleh banget. Cantumkan sumbernya ya.

      Hapus
  4. Terimakasih mbak igniel... Related post nya mantap... Sudah saya pasang di blog saya. Makasih banyak tutorialnya... Terus berkarya...

    BalasHapus
    Balasan
    1. Sama-sama. Makasih mas, sukses buat blognya.

      Hapus
  5. Gambarnya bisa di kecilin ga min? gambar sama pembatas template jadi mentok banget :3

    BalasHapus
    Balasan
    1. Liat kode ini:
      #ignielRelated ul li{
      list-style:none;
      width:calc((100% / 4) - 7.5px);


      Perbesar angka 7.5 px dan sesuaikan sendiri.

      Hapus
    2. Terima kasih banyak mba,

      Hapus
  6. mbak cara pasang nya di home page gimana biar bisa related post sesuai label,? udah saya ganti link feed nya sesuai label tetap ga muncul

    BalasHapus
  7. Kalau saya pake buat blog saya terus saya edit lagi sesuai keinginan sendiri boleh ngga mba?

    BalasHapus
  8. Untuk menambah ukuran tinggi gambar dibagian mana..?? udah acak2

    #ignielRelated ul li .thumb{
    overflow:hidden;
    line-height:0px;
    border-radius:7px;


    dan

    #ignielRelated ul li a img{
    width:100%;
    max-height:143px;
    transition:all .3s ease;
    border:0px;
    margin:0px;
    }


    tapi gambarnya masih mentok...
    Maunya sih seperti ini
    https://1.bp.blogspot.com/-m8sBP-MN4eY/XFrjWosgNMI/AAAAAAAADeA/aKlU73eYEjw5cbCWY8hb82abKgxnRS4KACLcBGAs/s1600/Screenshot_4.png

    BalasHapus
    Balasan
    1. Ganti
      max-height:143px;
      Jadi
      max-height:auto;

      Hapus
  9. gak support gambar yang gak di hosting di blogger ya mbak?

    BalasHapus
  10. wah sangat bermanfaat ka

    BalasHapus
  11. Kalau related post yang seperti blog ini bagaimana cara pemasangnga pak? Bagus sekali soalnya, rapih.

    BalasHapus
    Balasan
    1. Itu iklan AdSense jenis matched content, bapak.

      Hapus
  12. Untuk mengubah link aktifnya menjadi open new tab bagaimana ya?

    BalasHapus
  13. mbak mau nanya nih, kode related bawaan template saya sudah saya hapus dan ganti dengan punya mbak igniel, kok tumbnailnya gak muncul ya?

    BalasHapus
  14. ini sudah berdasarkan label mbak ?

    BalasHapus
    Balasan
    1. Berdasarkan label dari postingan yang sedang dibuka.

      Hapus
  15. mbak gimana ya mengatasi thumbnail tidak muncul,
    karna image post bloggernya dia awali tag p
    soalnya postingan bloggernya expord dari wordpress

    BalasHapus
  16. teh igniel untuk ada tiga yang pertama, kedua atau yang terakhir, mksh sebelumnya saya masih tahap belajar

    BalasHapus
  17. cara nambahin wrappernya gimana mba? itu ga ada wrapper soalnya hehe

    BalasHapus
  18. supaya random gimana mba?

    BalasHapus
    Balasan
    1. Tujuan dari related post itu buat menampilkan artikel yang mempunyai label yang sama. Kalau random nggak bisa disebut related dong.

      Kalau masih mau pake random yang ini.
      https://www.igniel.com/2018/11/random-post-thumbnail.html

      Hapus
  19. Mbak Igniel tutorialnya mantap banget. Untuk varian template terbaru dengan layout versi 3 bagus diterapkan pada emporio dan terkemuka, ...tapi gambarnya jadi kacau saat ditempatkan di template contempo yang hanya punya satu satunya: <data:post.body/>

    Bisa bantu dong...soalnya saya kepingin banget menerapkannya pada contempo

    BalasHapus
  20. bikin tutor tampilan home grid dong , ,hhe
    kayak template ini

    BalasHapus
  21. Maaf mba mohon bantuannya, kalo misalkan judul post nya tidak dimuat seluruh dan saya ingin hanya dimuat sebagian. Kode yang harus diubah apa ya mba? Terimakasih..

    BalasHapus
    Balasan
    1. Bisa, tingga di potong mas ๐Ÿ˜…

      Hapus
  22. thanks it works..caranya simple makasih gan

    BalasHapus
  23. Neng Inel mantaf, di blog akang berhasil ditrapkan tutornya.
    Makasih ya.
    Salamm ti Papua.

    BalasHapus
  24. cara ngilangin gambarnya bisa gak?

    BalasHapus
  25. kalau pasang di template contempo bawaannya blogger, apa ada yang perlu di hapus biar gak bentrok?

    BalasHapus
  26. kak izin rewrite ya :)

    BalasHapus
  27. it works kak igniel ,, thanks ๐Ÿ˜ƒ

    BalasHapus
  28. Terima Kasih, It's workssss

    BalasHapus
  29. Mbak kalau dibuat tampilannya jadi grid Dan list seperti pada blog ini bagaimana caranya mbak??

    BalasHapus
  30. Maaf nanya lagi mbak?? Melanjuti pertanyaan saya yang sebelumnya....
    "Tresponsive grid 2 dan list seperti pada blog mbak ini" bagaimana caranya, jika berkenan?? karena menurut saya sangat bagus dan keren.

    BalasHapus
  31. Ask!
    Kira-kira bisa di edit jdi postingan popular ngga mbak?
    Hallo mbak? Matur sewun ๐Ÿ˜

    BalasHapus
    Balasan
    1. Nggak bisa. Khusus artikel terkait berdasarkan label.

      Hapus
  32. Saya ada problem saat di aplikasikan ke layout blogget v3, related post hanya mncul pda tampilan mobilr saja, ktika sya inspect element jga tetap tdak mncul, bgaimana fix nya Mba?
    Btw bkin tutorial buat komentar seperti di blog ini bgus Mba, mksh

    BalasHapus
    Balasan
    1. Semua template yang saya buat sudah menggunakan layout v3 dan muncul. Jadi pastikan kamu nyimpen scriptnya BUKAN di dalam tag kondisional mobile.

      Hapus
    2. Baik, sya cba atur lgi, klau tetep tdak bsa sya blik lgi ๐Ÿ˜…

      Hapus
  33. mbak kalo cara pasang iklan adsense di related nya gmna?

    BalasHapus
  34. Ubah no imagenya gimana mbak

    BalasHapus
  35. entah kenapa semua kebanyakan trik yang berhungan dengan JS di sini gak work di template terbaru bawaan Blogger. gak tampil

    BalasHapus
    Balasan
    1. Semua template buatan saya udah pake layout v3 terbaru. Udah pasti script pun disesuaikan sama layout v3. Kalo gak work pasangnya ada yang salah.

      Hapus
    2. di tempalate siginfikan bawaan blogger gak tampil, tetapi saya pasang di template contempo tampil tetapi gambarnya jadi kecil dan menyamping. di buka di browser hp gak responsive jadi kesusun 3 doble kayak versi dekstop

      Hapus
    3. Pastikan simpan CSS di tempat yang tepat. Kalau sesuai tutorial pasti work .

      Hapus
    4. Emang bedanya apa teh pasang CSS di atas bskin dengan membuat <style csss sendiri? Apakah berpengaruh ya ?

      Hapus
    5. Jadi nggak efisien. Lebih baik semua digabung dalam satu tag <style>

      Hapus
  36. Terimakasih tutorialnya.
    Teh buat tutorial juga dong tentang vertical scroll recent post untuk blogger jadi dia recent post nya otomatis scrol sendiri, saya search di google tapi belum ada satupun blogger indonesia yang membuatnya.
    Nuhun teh.

    BalasHapus
  37. Balasan
    1. Berfungsi normal kalau dipraktekan sesuai tutorial.

      Hapus
  38. pas posting norelated tulisan there is no....kok tdk muncul ya...cm itu problem di saya

    BalasHapus
    Balasan
    1. Artinya gak ada postingan lain dengan label yang sama.

      Hapus
    2. brarti tulisan
      There is no other posts in this category
      saya hapus aj...hehe

      Hapus
    3. keluar ding...xixixi

      Hapus
  39. Request donk Teh Buatin "theiaStickySidebar" yang Widget Sidebar Mengikuti Scroll ke Atas dan ke Bawah. bukan yang sticky biasa/cuma bisa fixed di atas doank kaya milik tteh ini.


    Web Kak bungfrangki udah di Realist Tapi untuk penempatan di Blog Aku Ngk berjalan Mulus, Tapi Biasanya Klo Scrip yang tteh buat fixs smua di blog aku, mangkanya aku request yang ini kalo ada waktu luang please buatin y teh.

    Cara Membuat Widget Sticky Sidebar Mengikuti Scroll ke Atas dan ke Bawah

    BalasHapus
  40. request kak....scripnya dksh tambahan https cdn staricali...biar no expire header

    BalasHapus
  41. The image resolution is not good, how can I increase its accuracy?

    BalasHapus
  42. knapa gmbr nya kecil?
    tolong dong....

    BalasHapus
    Balasan
    1. Alamat blognya apa?

      Hapus
    2. saya pake blogger teh.
      'musikhade' almatnya. maksih teh.

      Hapus
  43. ga work d blog ku mah...
    padahal sudah d peragakan step by step.
    apa beda tema Yah?
    coba cek deh lalajo-hadedotblogspotdotkom

    BalasHapus
    Balasan
    1. oh iya aku pake tema 'Terkemuka'
      makasih sebelumnya.

      Hapus
    2. 'lalajo-hd' maaf salah.

      Hapus
  44. nya itu yg keberapa mbah di tema ku ada 3??

    BalasHapus
  45. Thanks it worked but i have a little problem here... How can i select the number of related posts that shows on PC and mobile; i would love to show 4 on Mobile and 3 related on PC.

    Awaiting response. Thanks

    BalasHapus
  46. terima kasih tipsnya.
    kalau mau lebarin halaman postingan gimana gan??? blog saya POST PAGE terlalu sempit . gmana ya?

    BalasHapus
  47. Terimakasih ignel sangat bermanfaat :)

    BalasHapus
  48. gan, bir judulnya yang muncul di tumbnail tidak terlalu panjang bagaimana?

    Misal
    "eksplorasi minyak dan gas bumi di daerah pantai utara Jawa"

    diganti menjadi,
    "eksplorasi minya dan gas bumi di......."

    BalasHapus
  49. halo kak.. punya ku kok jadinya kayak gini? https://prnt.sc/shtivz

    BalasHapus
  50. Mbak Tanya dong.. Aku Kan pakai fiksioner.. nah di bagian related postnya yang no image Kan defaultnya pakai gambar dari mbak.. kalau mau diubah.. bagian Mana ya yang diganti? Terima kasih

    BalasHapus
  51. Gambarnya bisa dibuat portrait gak mbak? yang ini kan landscape. Terima kasih.

    BalasHapus
  52. Kak, maaf mau nanya. ada solusi gk, buat saya yang enggak bisa muncul related postnya? soalnya saya pake template galauness buatan abang iksandi, ada solusi kak?

    BalasHapus
  53. My Related post image note showing
    Www.technoniks.com mi site

    BalasHapus
  54. Hallo mbak igniel.
    Beberapa gambar direlated post saya tidak muncul.
    Mohon penjelasannya.

    BalasHapus
  55. Ass mas..
    Artikelny bleh di tulis ulang gk mas?
    Sesuai dgn tulisan sy mas.
    Sumber nya nnti syg cantum kn mas.

    BalasHapus
  56. Mbak Igniel,

    Gambarnya gepeng kalau Bagian CSSnya begini:
    #ignielRelated ul li a img{
    width:100%;
    max-height:143px;
    transition:all .3s ease;
    border:0px;
    margin:0px;

    Tadi baru aku robah ukurannya jadi begini:

    width:100%;
    max-height: auto;

    Baru cakep deh...Makasih, Mbak...untuk blog aku adedansasa.com

    BalasHapus
  • Centang kotak Beri tahu saya untuk mendapatkan notifikasi via email jika ada yang membalas komentar.
  • Jika ingin menulis kode maka harus di-parse terlebih dulu (terutama Javascript dan HTML)
  • Gunakan <i> untuk menuliskan kode. Contoh:
    <i>#comments</i>
  • Gunakan <em> untuk menuliskan kode yang lebih panjang atau URL. Contoh:
    <em>#comments {margin:0; padding:10px 15px}</em>
×

Berlangganan

Dapatkan pemberitahuan melalui email setiap ada artikel baru. Gratis!