Related Post dengan Thumbnail dan Snippet Model List di Bawah Postingan

Cara Membuat Related Post dengan Thumbnail dan Snippet Model List di Bawah Postingan

Sebenarnya isi Javascript related post ini hampir dengan versi sebelumnya yaitu related post dengan thumbnail model grid. Yang berbeda adalah adanya penambahan beberapa baris script untuk memanggil snippet atau summary (ringkasan deskripsi) dan perombakan CSS yang membuat tampilannya menjadi model list.

Artikel Terkait dengan Gambar dan Ringkasan Deskripsi

Cara memasang related post dengan thumbnail dan snippet model list di bawah postingan blog ini sangat mudah.

Pertama, tambahkan kode CSS ini "SEBELUM / DI ATAS" </style> atau ]]></b:skin>.
/* Related Post List by igniel.com */
#ignielRelatedList{
  display:block;
  margin:20px 0px;
  line-height:1.25em;
}
#ignielRelatedList h3.title{
  font-size:16px;
  font-weight:600;
  text-align:center;
  text-transform:uppercase;
  line-height:initial;
}
#ignielRelatedList h3.title span{
  background-color:#fff;
  padding:0px 15px;
  position:relative;
  z-index:1;
}
#ignielRelatedList h3.title:before{
  content: '';
  display: block;
  position: relative;
  top:10px;
  width: 100%;
  border-top: 2px solid #cccccc;
}
#ignielRelatedList ul{
  margin:20px 0px 0px;
  padding:0px;
}
#ignielRelatedList ul li{
  list-style:none;
  margin-bottom:15px;
  padding-bottom:15px;
  border-bottom:1px solid #ccc;
  -webkit-margin-start:0px !important;
  display:inline-block;
  width:100%;
  clear:both;
}
#ignielRelatedList ul li:last-child{
  border:0px;
  padding:0px;
}
#ignielRelatedList ul li .thumb{
  overflow:hidden;
  line-height:0px;
  border-radius:7px;
  float:left;
  margin-right:15px;
}
#ignielRelatedList ul li a{
  display:block;
}
#ignielRelatedList ul li a.judul{
  color:#000; /* Warna Huruf */
  font-weight:600;
  font-size:16px;
  overflow:hidden;
  line-height:1.25em;
}
#ignielRelatedList ul li .snippet{
  color:#444;
  font-size:13px;
  overflow:hidden;
  margin:7px 0px 0px;
  padding:0px;
}
#ignielRelatedList ul li a.judul:hover, #ignielRelatedList ul li:hover a.judul{
  color:#ff5722; /* Warna Huruf Ketika Disorot */
}
#ignielRelatedList ul li a img{
  width:120px;
  height:90px;
  transition:all .3s ease;
  border:0px;
  margin:0px;
}
#ignielRelatedList ul li a img:hover, #ignielRelatedList ul li:hover img{
  transform:scale(1.1) rotate(-5deg);
  filter: brightness(75%);
  -webkit-filter: brightness(75%);
}
#ignielRelatedList .norelated{
  text-align:center;
  font-weight:600;
}
@media screen and (max-width:480px){
  #ignielRelatedList ul li a.judul{
    font-size:14px;
  }
  #ignielRelatedList ul li .snippet{
    font-size:12px;
  }
}

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

Kedua, simpan kode ini "SESUDAH / DI BAWAH" <data:post.body/>.
<!-- Related Post List by igniel.com -->
<b:if cond='data:view.isPost'>
  <div id='ignielRelatedList'>
    <h3 class='title'><span>Related Posts</span></h3>
    <script>//<![CDATA[
      var jumlah = 6;
      var kata = 150;
      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=["\\w","\\q\\L\\g\\j\\h","\\g\\e\\l\\I\\h\\G","\\v","\\j\\l\\D\\e\\1X\\1d\\T","\\q\\E\\Z\\q\\h\\p\\j\\l\\I","","\\1o\\K\\j\\l","\\e\\l\\h\\p\\1x","\\T\\e\\e\\D","\\1E\\h","\\h\\j\\h\\g\\e","\\Q\\K\\l\\h\\e\\l\\h","\\q\\E\\z\\z\\f\\p\\1x","\\z\\e\\D\\j\\f\\1E\\h\\G\\E\\z\\Z\\l\\f\\j\\g","\\E\\p\\g","\\D\\f\\h\\f\\2p\\j\\z\\f\\I\\e\\C\\L\\l\\I\\2n\\Z\\f\\q\\e\\1K\\1G\\2q\\j\\1u\\1B\\1d\\1N\\1j\\1r\\2r\\2u\\I\\K\\b\\b\\b\\b\\1H\\1n\\1g\\G\\W\\1g\\I\\b\\b\\b\\b\\W\\b\\b\\b\\b\\1B\\O\\b\\1v\\b\\b\\b\\O\\1a\\D\\1P\\2c\\e\\b\\b\\b\\b\\b\\2s\\1H\\O\\1n\\1u\\1a\\1v\\O\\b\\1o\\Z\\1G\\1g\\C\\I\\b\\b\\b\\b\\2l\\W\\g\\W\\1a\\1u\\1a\\1v\\z\\2d\\1d\\K\\p\\1K\\2k\\2t\\b\\b\\1M\\2i\\b\\2j\\2g\\1p\\1d\\1Q\\1S\\1J\\b\\b\\b\\b\\b\\W\\g\\1Q\\1J\\1q\\1n\\E\\1a\\z\\O\\O","\\g\\j\\l\\1q","\\p\\e\\g","\\f\\g\\h\\e\\p\\l\\f\\h\\e","\\G\\p\\e\\T","\\p\\f\\l\\D\\K\\z","\\T\\g\\K\\K\\p","\\1g\\1N\\1M","\\w\\g\\j\\v","\\w\\D\\j\\1p\\y\\Q\\g\\f\\q\\q\\M\\n\\h\\G\\E\\z\\Z\\n\\v\\w\\f\\y\\G\\p\\e\\T\\M\\n","\\n\\y\\h\\j\\h\\g\\e\\M\\n","\\n\\v\\w\\j\\z\\I\\y\\q\\p\\Q\\M\\n","\\C\\1j\\1P\\1S\\1r\\1b\\G\\1Z\\1r\\1b\\L\\1b\\1q\\1b\\l\\K\\1b\\l\\E","\\p\\e\\L\\g\\f\\Q\\e","\\n\\y\\f\\g\\h\\M\\n","\\n\\C\\v\\w\\C\\f\\v\\w\\C\\D\\j\\1p\\v","\\w\\f\\y\\G\\p\\e\\T\\M\\n","\\n\\y\\Q\\g\\f\\q\\q\\M\\n\\1o\\E\\D\\E\\g\\n\\v","\\w\\C\\f\\v","\\w\\q\\L\\f\\l\\y\\Q\\g\\f\\q\\q\\M\\n\\q\\l\\j\\L\\L\\e\\h\\n\\v","\\y\\1m\\1m\\1m\\y\\w\\C\\q\\L\\f\\l\\v","\\w\\C\\g\\j\\v","\\1j\\p\\j\\h\\e"];d R=0,o=J H(),u=J H(),B=J H();F=J H();1c 1O(t,Y){d k=t[a[1]](a[0]);P(d m=0;m<k[a[2]];m++){x(k[m][a[4]](a[3])!=-1){k[m]=k[m][a[5]](k[m][a[4]](a[3])+1,k[m][a[2]])}};k=k[a[7]](a[6]);k=k[a[5]](0,Y-1);1t k}1c 2f(Y){P(d k=0;k<Y[a[9]][a[8]][a[2]];k++){d t=Y[a[9]][a[8]][k];o[R]=t[a[11]][a[10]];1h=a[6];x(a[12]1i t){1h=t[a[12]][a[10]]}1w{x(a[13]1i t){1h=t[a[13]][a[10]]}};F[R]=1O(1h,2h);x(a[14]1i t){1l=t[a[14]][a[15]]}1w{1l=a[16]};B[R]=1l;P(d m=0;m<t[a[17]][a[2]];m++){x(t[a[17]][m][a[18]]==a[19]){u[R]=t[a[17]][m][a[20]];1k}};R++}}1c 1R(1s,k){P(d m=0;m<1s[a[2]];m++){x(1s[m]==k){1t!0}};1t!1}1c 2e(){d S=J H(0);d V=J H(0);d U=J H(0);d X=J H(0);P(d i=0;i<u[a[2]];i++){x(!1R(S,u[i])){S[a[2]]+=1;S[S[a[2]]-1]=u[i];V[a[2]]+=1;V[V[a[2]]-1]=o[i];U[a[2]]+=1;U[U[a[2]]-1]=F[i];X[a[2]]+=1;X[X[a[2]]-1]=B[i]}};o=V;u=S;F=U;B=X;P(d i=0;i<o[a[2]];i++){d A=1e[a[22]]((o[a[2]]-1)*1e[a[21]]());d 1F=o[i];d 1I=u[i];d 1A=F[i];d 1z=B[i];o[i]=o[A];u[i]=u[A];F[i]=F[A];B[i]=B[A];o[A]=1F;u[A]=1I;F[A]=1A;B[A]=1z};d 1f=0;d r=1e[a[22]]((o[a[2]]-1)*1e[a[21]]());d 1L=r;d N;d 1D=1y[a[23]];2m(1f<1C){x(u[r]!=1D){N=a[24];N+=a[25]+u[r]+a[26]+o[r]+a[27]+B[r][a[29]](/\\/s[0-9]+(\\-c)?/,a[28])+a[2o]+o[r]+a[26]+o[r]+a[2v];N+=a[1Y]+u[r]+a[1T]+o[r]+a[1U];N+=a[1V]+F[r]+a[1W];N+=a[2b];1y[a[2a]](N);1f++;x(1f==1C){1k}};x(r<o[a[2]]-1){r++}1w{r=0};x(r==1L){1k}}}',62,156,'||||||||||_0x7d7f|x41||var|x65|x61|x6C|x74|_0x8ebex12|x69|_0x8ebex8|x6E|_0x8ebex9|x27|judul|x72|x73|_0x8ebex19||_0x8ebex6|urls|x3E|x3C|if|x20|x6D|_0x8ebex13|gambar|x2F|x64|x75|snippet|x68|Array|x67|new|x6F|x70|x3D|_0x8ebex1b|x43|for|x63|rel|_0x8ebexe|x66|_0x8ebex10|_0x8ebexf|x45|_0x8ebex11|_0x8ebex7|x62|||||||||||x51|x2D|function|x4F|Math|_0x8ebex18|x55|postcontent|in|x77|break|postimg|x2E|x53|x6A|x76|x6B|x30|_0x8ebexc|return|x56|x49|else|x79|document|_0x8ebex17|_0x8ebex16|x42|jumlah|_0x8ebex1c|x24|_0x8ebex14|x34|x4E|_0x8ebex15|x54|x36|_0x8ebex1a|x4C|x52|filter|x31|x46|contains|x32|33|34|35|36|x78|32|x39|||||||||||38|37|x50|x57|ignielRelatedList|relpostimgcuplik|x37|kata|x2B|x58|x38|x44|while|x3B|30|x3A|x2C|x4B|x33|x48|x47|31'.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>ignielRelatedList();</script>
      </ul>
      <b:else/>
      There is no other posts in this category.
    </b:if>
  </div>
  <div class='clear'/>
</b:if>

Yang bisa diganti:
var jumlah: jumlah artikel terkait yang ingin dimunculkan.
var kata: jumlah karakter / huruf pada snippet.

Nanti hasil dari script related post pakai thumbnail dan snippet jenis list di akhir artikel tersebut akan menghasilkan tampilan seperti ini.

Cara Memasang Artikel Terkait Dengan Gambar dan Ringkasan Deskripsi di Akhir Postingan Blogspot

Itulah tutorial lengkap untuk membuat related post yang disertai dengan gambar thumbnail dan ringkasan summary di bawah postingan Blogger dengan model tampilan list. Jika ada kesulitan dalam pemasangan silakan komentar di bawah.

Artikel Terkait

39 komentar

Komentar TIDAK DAPAT DIHAPUS setelah dikirim. Pikirkan sebelum menulis.
  • 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>
  • M_ar
    23/2/22
    Profil: https://www.blogger.com/profile/08719624085960115432
    Terimakasih,mantap
  • M_ar
    23/2/22
    Profil: https://www.blogger.com/profile/08719624085960115432
    Terimakasih ,sangat membantu sekali
  • fnsyh
    15/2/22
    Profil: https://www.blogger.com/profile/05205341449957595253
    Keren
  • An Analyst
    21/4/21
    Profil: https://www.blogger.com/profile/07741679743376799211
    Mba Igniel, ditemplate Lycoris 2 saya..
    Related postnya tidak tampil di versi desktop tapi muncul di versi mobile.

    Itu gimana ya mbak solusi supaya tampil di versi desktop? Maksudnya jika di versi desktop hanya nampak "Related Post" dibawahnya tidak muncul gambar dan snippet postingan.
  • Pegiat Literasi.com
    4/2/21
    Profil: https://www.blogger.com/profile/05275401473347868294
    mbk untuk postingan yg gak gambar, jd muncul htam sja ,, cara ganti pake gambar defult blog kita gmana? supaya postingan yg g ad gmbarnya jg
  • Yansyah
    11/1/21
    Profil: https://www.blogger.com/profile/00776710892538069974
    supaya snipet gak muncul di tampilan mobile gimana caranya ya.?
  • Gigend Workspace
    15/11/20
    Profil: https://www.blogger.com/profile/02915567621247226126
    thumbnail tidak muncul, tolong mbak diupdate scriptnya lagi, terutama untuk blogger tema emporio/yang terbaru. thumbnail pakai gambar pertama dipost, tidak muncul pakai script ini...
    • Seorang Manusia yang Lahir di Indonesia
      3/12/20
      Profil: https://www.blogger.com/profile/06890823464453117871
      https://www.igniel.com/2020/07/menampilkan-gambar-editor-baru-blogger.html
  • Chapteria
    6/10/20
    Profil: https://www.blogger.com/profile/09838961540189264270
    Mbak Igniel, gimana ya caranya biar related post (khususnya di bawah postingan artikel) agar tidak tampil untuk 'label tertentu'?

    Bolak-balik sana sini gak nemu tutorialnya :(
    • Seorang Manusia yang Lahir di Indonesia
      3/12/20
      Profil: https://www.blogger.com/profile/06890823464453117871
      pakai kode tag kondisional: https://www.igniel.com/2017/12/tag-kondisional-blogger-terbaru.html
  • uji coba template
    21/9/20
    Profil: https://www.blogger.com/profile/08066987977044208980
    mbak tolong buatkan tutorial related post model grid seperti igniplex yang versi terbarunya donk mbak, bagus dan rapih soalnya. terimakasih..
  • dkr blog
    18/9/20
    Profil: https://www.blogger.com/profile/12868760485513180121
    gan kenapa related postnya hanya muncul di versi mobile tidak terlihat di versi dekstop?
    • Seorang Manusia yang Lahir di Indonesia
      3/12/20
      Profil: https://www.blogger.com/profile/06890823464453117871
      salah penempatan kode munkin. mungkin kamu taruh kodenya di tag kondisional untuk mobile
  • Kaori-Chan
    11/9/20
    Profil: https://www.blogger.com/profile/06874434645407330091
    makasih bang udah work di bloger ku
  • Pancaswara
    13/8/20
    Profil: https://www.blogger.com/profile/12005003258815436016
    Salam kenal Mbak.. Kalo mau yang g ada imageny gimana mbak? Cm tulisan aj ? Sy pake template mbak soalny..
  • Anotherways
    17/7/20
    Profil: https://www.blogger.com/profile/00449628215718477315
    Punya saya malah cuma ada tulisan RELATED POST nya saja mbak postingannya gak ada malahan related post bawaannya masih ada.. pengen jadi model lost saja biar ga bnyak mkan ruang.. itu gmna ya
    • Anotherways
      17/7/20
      Profil: https://www.blogger.com/profile/00449628215718477315
      Ini blog saya mbak bsa mnta tlong d cek mbak?

      https://jalanpikiranqu.blogspot .com
  • DE Blogs
    3/6/20
    Profil: https://www.blogger.com/profile/09232367143945047298
    Yup, saya juga mengalami hal yg sama, baik di Related Post ato juga di Random Post, kejadian nya sama, thumnails di post terbaru nggak ada yg muncul. tolong bantuan nya Mbak Igniel ya ...
    • Iwan
      4/6/20
      Profil: https://www.blogger.com/profile/16526464732457440973
      Bantu jawab,
      gini bro, kata mbaknya tadi, itu ada bug di editor baru blogger.
      caranya ganti dulu ke versi editor blogger lama, edit thumbnail yang ilang, masukin ulang gambarnya.
      udh gw coba, dan berhasil.
    • DE Blogs
      5/6/20
      Profil: https://www.blogger.com/profile/09232367143945047298
      Siap... akan dicobain...
  • Iwan
    3/6/20
    Profil: https://www.blogger.com/profile/16526464732457440973
    ada beberapa thumbnail yang ilang, itu gimana ya solusinya?

    yang ilang itu thumbnail postingan terbaru, tapi postingan yang dulu2 masih tetap normal.
  • Agung Irianto
    14/3/20
    Profil: https://www.blogger.com/profile/07611365078246922139
    Cara menghilangkan snippetnya gimana mbak?
    • Igniel
      19/3/20
      Profil: https://www.blogger.com/profile/09199170379661896200
      Edit CSSnya. Lihat kode ini:
      #ignielRelatedList ul li .snippet{
      Tambahkan ini di bawahnya:
      display:none;
  • Mas Tris
    25/11/19
    Profil: https://www.blogger.com/profile/16737817068415954951
    mbk, kl yang muncul hanya judul dan tumbnailnya saja, ringkasan artikelnya dihilangkan apakan bisa? ada pengaturannya?
    • Igniel
      19/3/20
      Profil: https://www.blogger.com/profile/09199170379661896200
      Edit CSSnya. Lihat kode ini:
      #ignielRelatedList ul li .snippet{
      Tambahkan ini di bawahnya:
      display:none;
  • DE Blogs
    19/5/19
    Profil: https://www.blogger.com/profile/09232367143945047298
    Mantab Mbak... Mampir ke deblogs.id Mbak, komentar dan saran nya ditunggu... Oia, kalo nggak punya paypal gimana ??
    • DE Blogs
      26/5/19
      Profil: https://www.blogger.com/profile/09232367143945047298
      Pagi Mbak, ditempat saya muncul icon panah ya ?? gambar nya ini : http://prntscr.com/ntcfkt

      tolong di cek ya Mbak, di www.deblog.id

      Makasih Mbak
    • DE Blogs
      26/5/19
      Profil: https://www.blogger.com/profile/09232367143945047298
      http://prntscr.com/ntcfkt
    • Igniel
      26/5/19
      Profil: https://www.blogger.com/profile/09199170379661896200
      Paypal untuk apa mas?

      Ada pengaruh dari CSS bawaan template. Tambahin kode ini:
      #ignielRelatedList ul li:before {
      display: none;
      }
    • DE Blogs
      26/5/19
      Profil: https://www.blogger.com/profile/09232367143945047298
      Wadoowww... Sukses, Mantabbb...
  • Hanif
    27/3/19
    Profil: https://www.blogger.com/profile/11279099487003437271
    Mba igniel kalau beli tmplate mba.. Apakah nnti ada dkasih contack person mba. . Soalnya saya masih newbi biar gampang aja nanya2 maslah tmplatenya..

    Makasih
    • Igniel
      27/3/19
      Profil: https://www.blogger.com/profile/09199170379661896200
      Sesuai yang tertulis di postingan, tanya-tanya (support) dilakukan melalui email atau chatting di Facebook.
  • Puji Hartono
    9/1/19
    Profil: https://www.blogger.com/profile/17141580243954872127
    Theme jarwo design,milik mas ozik jarwo

    Kalau pasang di kode body pertama,memang muncul CUMA di bawah artikel

    Saya maunya dibawah postingan,kalau dibawah artikel,kurang sreg
  • Puji Hartono
    9/1/19
    Profil: https://www.blogger.com/profile/17141580243954872127
    Begini mbak igniel :

    Kode " body " di template saya ada 2.

    Saya coba pasang di kode " body " pertama di bagian BAWAHNYA,related post muncul TAPI MALAH DIBAWAH ARTIKEL bukan DIBAWAH POSTINGAN.

    Saya coba pasang dibawah kode " body " yang kedua MALAH TIDAK MUNCUL,saya pasang diatas kode " body "nya juga tak muncul related postnya.

    Yang muncul hanya ketika saya pasang related post di kode " body " pertama ( saya letakan di bawah kode body ) tapi munculnya di bawah artikel BUKAN di bawah postingan.Gimana mbak igniel?
    • Igniel
      9/1/19
      Profil: https://www.blogger.com/profile/09199170379661896200
      Pakai template apa mas?
    • Puji Hartono
      9/1/19
      Profil: https://www.blogger.com/profile/17141580243954872127
      Saya coba tanyakan pemilik theme,katanya memang ada sedikit bug
    • Igniel
      10/1/19
      Profil: https://www.blogger.com/profile/09199170379661896200
      Kalau ada bug lebih baik tanyakan pada pembuat template langsung biar kita nggak bolak-balik pasang script. Biar dia perbaiki dulu bugnya.
  • Admin
    2/11/18
    Profil: https://www.blogger.com/profile/03607121810050002709
    Mba buat artikel widget random post dong yg ada non thumnail versi js trims
    • Admin
      2/11/18
      Profil: https://www.blogger.com/profile/03607121810050002709
      Buat sepetti punya mba igniel di kanan bagus