Related Post dengan Thumbnail Model Grid di Bawah Postingan

Cara membuat dan memasang script artikel terkait dengan gambar thumbnail di bawah postingan Blogger model grid tanpa gepeng.
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.
125
Related Post dengan Thumbnail Model Grid di Bawah Postingan
Related Post dengan Thumbnail Model Grid di Bawah Postingan
Cara membuat dan memasang script artikel terkait dengan gambar thumbnail di bawah postingan Blogger model grid tanpa gepeng.
Bagikan ke aplikasi lainnya:
  • WhatsApp
  • Telegram
  • Facebook
  • Twitter
  • Pinterest
  • LinkedIn

Artikel Terkait

125 komentar

  • Menulis kode gunakan <i>kode</i> (kode harus di-parse)
  • Menulis dalam syntax highlighter gunakan <em>kode panjang</em> (kode harus di-parse)
  • Menyisipkan gambar gunakan <strong>URL GAMBAR</strong> (ekstensi .jpg, .png, .gif, .webp, .ico)
  • Centang Beri Tahu Saya untuk mendapatkan notifikasi ke email saat ada yang membalas komentar.
  • Han Farhan
    17 Agustus, 2023
    Profil: https://www.blogger.com/profile/05826918822005935931
    mbak ada script yg ga di obfuscator gak? soalnya saya mau ngatur bagian widht height sama alt imagenya.
  • admin
    24 Juli, 2023
    Profil: https://www.blogger.com/profile/06984308425309283922
    mbak igniel, tolong agar gambarnya bisa diseting ukuranya dong, jadi biar vertical, soalnya saya buat web wallpaper
  • Syahputra
    25 April, 2023
    Profil: https://www.blogger.com/profile/09716834624340042494
    Mana tau ada yang mau tamipalan nya 2 gambar agar telihat elegan dan rapi coba di link ini
    https://bloggasfull.blogspot.com/2023/04/cara-buat-breadcrumbs-di-blogger.html?m=1
  • Wangy
    05 Februari, 2023
    Profil: https://www.blogger.com/profile/08669256373633307180
    Apakah ukuran gambar bisa di ubah? Soalnya saya mau pakai untuk blogwallpaper ka.
    • Igniel
      06 Februari, 2023
      Profil: https://www.blogger.com/profile/09199170379661896200
      Tunggu kodenya diupdate ya biar ada opsi buat ganti-ganti sendiri.
    • Wangy
      06 Februari, 2023
      Profil: https://www.blogger.com/profile/08669256373633307180
      Siap saya tunggu:)
  • admin 2 belajarkicau
    11 Desember, 2022
    Profil: https://www.blogger.com/profile/09605564230268221413
    haloe bang igniel , aku baru saja pasang Related Posts di blog ku belajarkicau.com aku sudah tampil , tapi blog ku di Related Posts tidak ada gambar hanya tulisan judl artikel dan tanda seperti ini > apakah ada kode yang salah dalam penerapannya , dan apa yang harus aku perbaiki dari kode ini ?
  • Kincaid
    02 Agustus, 2022
    Profil: https://www.blogger.com/profile/00620754151629927068
    Artikelnya perlu diperbaharui mbak. Soalnya sy juga sudah pasang tpi gambar gak muncul.
  • Author
    25 Juni, 2022
    Profil: https://www.blogger.com/profile/06420499654276271611
    sudah saya masukkan scriptnya sesuai tutor kakak tapi artikelnya tidak muncul kak, hanya tulisan related post nya saja yang muncul... itu knapa kak??
    ada juga aku coba yang "baca juga" di tengah artikel tetapi sama juga kak tidak muncul artikelnya hanya tulisan "baca juga" saja.
    mohon bantuannya kak
  • NU NGRANCAH
    23 Maret, 2022
    Profil: https://www.blogger.com/profile/06109472035997997954
    sudah dicoba, tapi tidk muncul ..... masalahnya apa ya???
  • Matematika Ku Bisa
    03 Maret, 2022
    Profil: https://www.blogger.com/profile/12099415037795325650
    sdh diterapin, bgmn agar gmbrnya tdk buram ya
  • Joselcrack1
    13 Februari, 2022
    Profil: https://www.blogger.com/profile/05725206335844823327
    Las imagenes no se ven enfocadas como lo soluciono?
  • Elsa Yolanda
    07 Desember, 2021
    Profil: https://www.blogger.com/profile/11709717017996933263
    sebelumnya saya pake template vio toko yang 4 kolom, tapi saya mau rubah ke 3 kolom ga bisa.. gimana ya mas?
  • Rohmad Nur Hidayat
    24 November, 2021
    Profil: https://www.blogger.com/profile/16614367464226767255
    Alamat blog saya madjongke.com saya cek di strukur hasil gambarnya kurang sempurna karena tidak ada elemen width dan height. Cara atasinya bagaimana ya?
  • Enjoe
    21 Oktober, 2021
    Profil: https://www.blogger.com/profile/07776906850106309693
    mbak tolong update kode dibagian img-nya, skrng blogger ganti host image pake "blogger.googleusercontent.com/img/a" jadi hasil gambarnya di related postnya gak bisa di-crop.
  • Puji Hartono
    16 Juli, 2021
    Profil: https://www.blogger.com/profile/17141580243954872127
    Kak, kalau url : feeds/post/default....json....dibuat asyncronus bisa nggak kak?

    Soalnya ini masuk masalah lcp di pagespeed

    Apa ada trik lain kak? Makasih
  • abdulloh salam
    29 Juni, 2021
    Profil: https://www.blogger.com/profile/12394619168281040776
    halo mbak igniel, kenapa gambar nya tidak muncul ya ?

    tapi ada satu postingan yang gambar nya muncul, dan file gambar nya bukan dari upload lewat blogger, tapi hasil salin

    cara mengatasi nya bagaimana ya ? apakah ada saran untuk upload file gambar lalu pastekan di blog ?
  • Manhua Day
    09 Juni, 2021
    Profil: https://www.blogger.com/profile/09740785927522602670
    Bang kalo nampilinnya berdasarkan label gimana buatnya bang?
  • Manhua Day
    23 Mei, 2021
    Profil: https://www.blogger.com/profile/09740785927522602670
    Min, kalo naruh related post.nya di home page gimana min, terus berdasarkan label yang kita inginkan, bukan mengikuti label postingan yang kita buka.
  • elshalih
    17 Mei, 2021
    Profil: https://www.blogger.com/profile/08626915967731159095
    kalau di ubah ke satu lagi gimana caranya min? nuhun
  • nurlellamusic.blogspot.com
    05 Maret, 2021
    Profil: https://www.blogger.com/profile/07828469287538582287
    Saya coba ikuti step-stepnya berhasil diupdate namun, ko tidak muncul related postnya di blog. kenapa ya?
  • Pida Alandrian
    10 Februari, 2021
    Profil: https://www.blogger.com/profile/11059321875272633606
    Mba, punya saya tiba-tiba related post yang di bawah artikel sama ditengah-tengah artikel malah nggak muncul lagi kalau buka blog via PC. Kalau mobile nggak ada masalah, ada muncul.

    Ini kenapa ya kak?
    Kebetulan saya pakenya yg fiksioner free template
  • hasheemi Rafsanjani
    15 November, 2020
    Profil: https://www.blogger.com/profile/01205852673505466263
    Mau tanya Mbak itu saya pasangkan pada postingan dengan gambar orang 9:16
    Itu di thumbnail releated post nya kok malah kepotong
    Solusinya gimana
  • Onyx
    05 November, 2020
    Profil: https://www.blogger.com/profile/08647041500938546015
    gak support external host image ya mbak?
  • Kiana Kaslana
    29 Oktober, 2020
    Profil: https://www.blogger.com/profile/05587311764565027937
    dah gak work.
  • Lilih
    28 Oktober, 2020
    Profil: https://www.blogger.com/profile/16014968755506189995
    Javascriptnya diencode ya Kak? Kalo yang nggak pake Js adakah?
  • uji coba template
    20 September, 2020
    Profil: https://www.blogger.com/profile/08066987977044208980
    untuk mengubah resolusi gambarnya supaya lebih jelas apa yang harus diedit mbak?
  • Lulu chan
    28 Agustus, 2020
    Profil: https://www.blogger.com/profile/03511086798434724170
    kok nggak muncul di blog saya ya
  • Kang Awèr
    03 Agustus, 2020
    Profil: https://www.blogger.com/profile/15397195276896684845
    Makasih Sob..
  • Anissa Auliasari
    28 Juli, 2020
    Profil: https://www.blogger.com/profile/01675010269156057449
    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
  • cenden
    04 Juli, 2020
    Profil: https://www.blogger.com/profile/10473380286716495663
    Ass mas..
    Artikelny bleh di tulis ulang gk mas?
    Sesuai dgn tulisan sy mas.
    Sumber nya nnti syg cantum kn mas.

  • Putra
    02 Juli, 2020
    Profil: https://www.blogger.com/profile/14144065576473250944
    Hallo mbak igniel.
    Beberapa gambar direlated post saya tidak muncul.
    Mohon penjelasannya.
  • Nikhil Housare
    20 Juni, 2020
    Profil: https://www.blogger.com/profile/12465989323671274716
    My Related post image note showing
    Www.technoniks.com mi site
  • Ch.
    08 Juni, 2020
    Profil: https://www.blogger.com/profile/05079177785058975619
    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?
  • Azhar
    23 Mei, 2020
    Profil: https://www.blogger.com/profile/02753622800011000947
    Gambarnya bisa dibuat portrait gak mbak? yang ini kan landscape. Terima kasih.
  • Marita Ningtyas
    21 Mei, 2020
    Profil: https://www.blogger.com/profile/16130881517158478521
    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
  • Nayana
    16 Mei, 2020
    Profil: https://www.blogger.com/profile/14789245238408296267
    halo kak.. punya ku kok jadinya kayak gini? https://prnt.sc/shtivz
  • Admin
    07 Mei, 2020
    Profil: https://www.blogger.com/profile/12060037667506178257
    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......."
  • Mas Fulan
    01 April, 2020
    Profil: https://www.blogger.com/profile/10092653937551224597
    Terimakasih ignel sangat bermanfaat :)
  • Ely Goro Leba
    27 Maret, 2020
    Profil: https://www.blogger.com/profile/05275401473347868294
    terima kasih tipsnya.
    kalau mau lebarin halaman postingan gimana gan??? blog saya POST PAGE terlalu sempit . gmana ya?
  • Egbujor Victor Chinedu
    27 Maret, 2020
    Profil: https://www.blogger.com/profile/10394649788848833852
    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
  • Adnan T.W.M
    16 Maret, 2020
    Profil: https://www.blogger.com/profile/18295380648801368665
    nya itu yg keberapa mbah di tema ku ada 3??
  • ardmann
    14 Maret, 2020
    Profil: https://www.blogger.com/profile/00688067470205140065
    ga work d blog ku mah...
    padahal sudah d peragakan step by step.
    apa beda tema Yah?
    coba cek deh lalajo-hadedotblogspotdotkom
    • ardmann
      14 Maret, 2020
      Profil: https://www.blogger.com/profile/00688067470205140065
      oh iya aku pake tema 'Terkemuka'
      makasih sebelumnya.
    • ardmann
      14 Maret, 2020
      Profil: https://www.blogger.com/profile/00688067470205140065
      'lalajo-hd' maaf salah.
  • Unknown
    06 Maret, 2020
    Profil: https://www.blogger.com/profile/00489547633930801029
    knapa gmbr nya kecil?
    tolong dong....
    • Igniel
      09 Maret, 2020
      Profil: https://www.blogger.com/profile/09199170379661896200
      Alamat blognya apa?
    • Unknown
      11 Maret, 2020
      Profil: https://www.blogger.com/profile/00489547633930801029
      saya pake blogger teh.
      'musikhade' almatnya. maksih teh.
  • علي كمبيوتر سڤن
    02 Maret, 2020
    Profil: https://www.blogger.com/profile/16158558893347429492
    The image resolution is not good, how can I increase its accuracy?
  • Java Sat
    29 Februari, 2020
    Profil: https://www.blogger.com/profile/01281960000646960429
    request kak....scripnya dksh tambahan https cdn staricali...biar no expire header
  • Ohara
    14 Februari, 2020
    Profil: https://www.blogger.com/profile/13394770560725316177
    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
  • Java Sat
    11 Februari, 2020
    Profil: https://www.blogger.com/profile/01281960000646960429
    pas posting norelated tulisan there is no....kok tdk muncul ya...cm itu problem di saya
    • Igniel
      11 Februari, 2020
      Profil: https://www.blogger.com/profile/09199170379661896200
      Artinya gak ada postingan lain dengan label yang sama.
    • Java Sat
      12 Februari, 2020
      Profil: https://www.blogger.com/profile/01281960000646960429
      brarti tulisan
      There is no other posts in this category
      saya hapus aj...hehe
    • Java Sat
      13 Februari, 2020
      Profil: https://www.blogger.com/profile/01281960000646960429
      keluar ding...xixixi
  • 1000cerita
    30 Januari, 2020
    Profil: https://www.blogger.com/profile/13761443501441059710
    Gak berfungsi.
    • Igniel
      01 Februari, 2020
      Profil: https://www.blogger.com/profile/09199170379661896200
      Berfungsi normal kalau dipraktekan sesuai tutorial.
  • Admin
    26 Januari, 2020
    Profil: https://www.blogger.com/profile/12621359128201372442
    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.
  • Munir
    14 Januari, 2020
    Profil: https://www.blogger.com/profile/15000904957935300437
    entah kenapa semua kebanyakan trik yang berhungan dengan JS di sini gak work di template terbaru bawaan Blogger. gak tampil
    • Igniel
      14 Januari, 2020
      Profil: https://www.blogger.com/profile/09199170379661896200
      Semua template buatan saya udah pake layout v3 terbaru. Udah pasti script pun disesuaikan sama layout v3. Kalo gak work pasangnya ada yang salah.
    • Munir
      14 Januari, 2020
      Profil: https://www.blogger.com/profile/15000904957935300437
      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
    • Igniel
      22 Januari, 2020
      Profil: https://www.blogger.com/profile/09199170379661896200
      Pastikan simpan CSS di tempat yang tepat. Kalau sesuai tutorial pasti work .
    • maskris.
      27 Januari, 2020
      Profil: https://www.blogger.com/profile/01402713484877462099
      Emang bedanya apa teh pasang CSS di atas bskin dengan membuat <style csss sendiri? Apakah berpengaruh ya ?
    • Igniel
      01 Februari, 2020
      Profil: https://www.blogger.com/profile/09199170379661896200
      Jadi nggak efisien. Lebih baik semua digabung dalam satu tag <style>
  • Anonim
    Anonim20 Desember, 2019
    Ubah no imagenya gimana mbak
  • Pap Media
    26 November, 2019
    Profil: https://www.blogger.com/profile/06351543165873231959
    mbak kalo cara pasang iklan adsense di related nya gmna?
  • Templatepix
    17 November, 2019
    Profil: https://www.blogger.com/profile/01721272121509708833
    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
    • Igniel
      17 November, 2019
      Profil: https://www.blogger.com/profile/09199170379661896200
      Semua template yang saya buat sudah menggunakan layout v3 dan muncul. Jadi pastikan kamu nyimpen scriptnya BUKAN di dalam tag kondisional mobile.
    • Templatepix
      17 November, 2019
      Profil: https://www.blogger.com/profile/01721272121509708833
      Baik, sya cba atur lgi, klau tetep tdak bsa sya blik lgi 😅
  • Admin
    17 November, 2019
    Profil: https://www.blogger.com/profile/16375346131206494858
    Ask!
    Kira-kira bisa di edit jdi postingan popular ngga mbak?
    Hallo mbak? Matur sewun 😁
    • Igniel
      17 November, 2019
      Profil: https://www.blogger.com/profile/09199170379661896200
      Nggak bisa. Khusus artikel terkait berdasarkan label.
  • Gustian Pandu
    06 November, 2019
    Profil: https://www.blogger.com/profile/18053424392031272239
    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.
  • Gustian Pandu
    06 November, 2019
    Profil: https://www.blogger.com/profile/18053424392031272239
    Mbak kalau dibuat tampilannya jadi grid Dan list seperti pada blog ini bagaimana caranya mbak??
  • C2Labs
    02 November, 2019
    Profil: https://www.blogger.com/profile/08951273220105474387
    Terima Kasih, It's workssss
  • takadetsu
    25 September, 2019
    Profil: https://www.blogger.com/profile/06921685728525717878
    it works kak igniel ,, thanks 😃
  • Admin
    18 September, 2019
    Profil: https://www.blogger.com/profile/18296305630197594280
    kak izin rewrite ya :)
  • Laippung
    17 September, 2019
    Profil: https://www.blogger.com/profile/16733039751344643545
    kalau pasang di template contempo bawaannya blogger, apa ada yang perlu di hapus biar gak bentrok?
  • Ramdhan
    03 September, 2019
    Profil: https://www.blogger.com/profile/06076751383821320711
    cara ngilangin gambarnya bisa gak?
  • Anonim
    Anonim29 Agustus, 2019
    Neng Inel mantaf, di blog akang berhasil ditrapkan tutornya.
    Makasih ya.
    Salamm ti Papua.
  • Boris Toka Pelawi
    22 Agustus, 2019
    Profil: https://www.blogger.com/profile/00667577124860350293
    thanks it works..caranya simple makasih gan
  • a_afidz
    18 Agustus, 2019
    Profil: https://www.blogger.com/profile/16591200043926586943
    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..
  • emodjeh
    09 Juli, 2019
    Profil: https://www.blogger.com/profile/14450728431773535071
    bikin tutor tampilan home grid dong , ,hhe
    kayak template ini
  • sufyan Yaan
    07 Juli, 2019
    Profil: https://www.blogger.com/profile/00896429756820287073
    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
  • Vivo Themes
    05 Juli, 2019
    Profil: https://www.blogger.com/profile/04647896739043966545
    supaya random gimana mba?
    • Igniel
      05 Juli, 2019
      Profil: https://www.blogger.com/profile/09199170379661896200
      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
  • Gusma
    30 Juni, 2019
    Profil: https://www.blogger.com/profile/17053279602200477044
    cara nambahin wrappernya gimana mba? itu ga ada wrapper soalnya hehe
  • Rahayu Tirto Tinesti
    22 Juni, 2019
    Profil: https://www.blogger.com/profile/12363408436383889950
    teh igniel untuk ada tiga yang pertama, kedua atau yang terakhir, mksh sebelumnya saya masih tahap belajar
  • Unknown
    26 Mei, 2019
    Profil: https://www.blogger.com/profile/04879834651119804839
    mbak gimana ya mengatasi thumbnail tidak muncul,
    karna image post bloggernya dia awali tag p
    soalnya postingan bloggernya expord dari wordpress
  • Rian
    10 Mei, 2019
    Profil: https://www.blogger.com/profile/01230509647052706348
    ini sudah berdasarkan label mbak ?
    • Igniel
      10 Mei, 2019
      Profil: https://www.blogger.com/profile/09199170379661896200
      Berdasarkan label dari postingan yang sedang dibuka.
  • Sam Gadget
    10 Mei, 2019
    Profil: https://www.blogger.com/profile/10467326022831015662
    mbak mau nanya nih, kode related bawaan template saya sudah saya hapus dan ganti dengan punya mbak igniel, kok tumbnailnya gak muncul ya?
    • Igniel
      11 Mei, 2019
      Profil: https://www.blogger.com/profile/09199170379661896200
      Alamat blognya apa?
    • Jufri Aditya
      26 Juni, 2020
      Profil: https://www.blogger.com/profile/02969437061316478208
      Sama kak, gk ada tumbnailnya
  • Moh Ravi Dwi Putra
    15 April, 2019
    Profil: https://www.blogger.com/profile/13796910208637175736
    Untuk mengubah link aktifnya menjadi open new tab bagaimana ya?
  • Statinity
    13 April, 2019
    Profil: https://www.blogger.com/profile/05611718045600974601
    Kalau related post yang seperti blog ini bagaimana cara pemasangnga pak? Bagus sekali soalnya, rapih.
    • Igniel
      13 April, 2019
      Profil: https://www.blogger.com/profile/09199170379661896200
      Itu iklan AdSense jenis matched content, bapak.
  • wahiddun1
    02 April, 2019
    Profil: https://www.blogger.com/profile/12168666600767227208
    wah sangat bermanfaat ka
  • Yuuki
    17 Februari, 2019
    Profil: https://www.blogger.com/profile/04391405424964474862
    gak support gambar yang gak di hosting di blogger ya mbak?
  • Unknown
    06 Februari, 2019
    Profil: https://www.blogger.com/profile/09007809204099428417
    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

    • Igniel
      06 Februari, 2019
      Profil: https://www.blogger.com/profile/09199170379661896200
      Ganti
      max-height:143px;
      Jadi
      max-height:auto;
  • Ikhfan Yusuf
    06 Februari, 2019
    Profil: https://www.blogger.com/profile/02287134167914602934
    Kalau saya pake buat blog saya terus saya edit lagi sesuai keinginan sendiri boleh ngga mba?
  • Blogenesia
    09 Januari, 2019
    Profil: https://www.blogger.com/profile/00790580127420466192
    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
  • Unknown
    30 Desember, 2018
    Profil: https://www.blogger.com/profile/10085150097946716601
    Gambarnya bisa di kecilin ga min? gambar sama pembatas template jadi mentok banget :3
    • Igniel
      30 Desember, 2018
      Profil: https://www.blogger.com/profile/09199170379661896200
      Liat kode ini:
      #ignielRelated ul li{
      list-style:none;
      width:calc((100% / 4) - 7.5px);


      Perbesar angka 7.5 px dan sesuaikan sendiri.
    • Unknown
      30 Desember, 2018
      Profil: https://www.blogger.com/profile/10085150097946716601
      Terima kasih banyak mba,
  • Heru Satria
    14 Desember, 2018
    Profil: https://www.blogger.com/profile/06701328374985240329
    Terimakasih mbak igniel... Related post nya mantap... Sudah saya pasang di blog saya. Makasih banyak tutorialnya... Terus berkarya...
    • Igniel
      30 Desember, 2018
      Profil: https://www.blogger.com/profile/09199170379661896200
      Sama-sama. Makasih mas, sukses buat blognya.
    • Ikhsan Coegraphy
      16 September, 2020
      Profil: https://www.blogger.com/profile/15905808504862936689
      Wong madiun to mas heru
  • Giri Diwa Adam
    19 November, 2018
    Profil: https://www.blogger.com/profile/11346759223421693465
    Boleh tulis ulang artikelnya kak dengan Gaya saya sendiri
    • Igniel
      19 November, 2018
      Profil: https://www.blogger.com/profile/09199170379661896200
      Iya boleh banget. Cantumkan sumbernya ya.
  • Admin
    02 November, 2018
    Profil: https://www.blogger.com/profile/03567087638626893824
    cara nambahin gambar untuk yang gak ada image nya gimana mbak (no image) ?
    • Igniel
      02 November, 2018
      Profil: https://www.blogger.com/profile/09199170379661896200
      Ini sudah dilengkapi dengan noimage.
  • admin
    02 November, 2018
    Profil: https://www.blogger.com/profile/04411820008193967730
    Kalau sudah ada bawaanya bagaimana mb ? Apakah perlu d hapus atau akan otomatis tergantikan?
    • Igniel
      02 November, 2018
      Profil: https://www.blogger.com/profile/09199170379661896200
      Harus dihapus dulu biar nggak bentrok.
    • Chakly Raflesia
      05 Agustus, 2021
      Profil: https://www.blogger.com/profile/02106258514379347993
      cara ngapus RP bawaanya gimana kak?
    • Igniel
      09 Agustus, 2021
      Profil: https://www.blogger.com/profile/09199170379661896200
      Kode related post tiap template berbeda. Cari saja yang sekiranya mirip sama kode di atas.

      Atau lebih bagus lagi tanya ke pembuatnya.
    • R91
      18 Oktober, 2021
      Profil: https://www.blogger.com/profile/10170888562552844226
      Kok gak bisa yah aku sdh ikuti petunjukx
    • Cekiong
      14 September, 2022
      Profil: https://www.blogger.com/profile/16817382764814329295
      Halo, related post kok muncul di label2 tertentu saja ya?, beberapa label hanya muncul 1 post yang paling baru saja. Bagaimana mb?