Related Post dengan Thumbnail dan Snippet Model List di Bawah Postingan

Cara membuat dan memasang script artikel terkait dengan gambar thumbnail dan snippet / summary (deskripsi ringkasan) di bawah postingan Blogger model list.
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.
39
Related Post dengan Thumbnail dan Snippet Model List di Bawah Postingan
Related Post dengan Thumbnail dan Snippet Model List di Bawah Postingan
Cara membuat dan memasang script artikel terkait dengan gambar thumbnail dan snippet / summary (deskripsi ringkasan) di bawah postingan Blogger model list.
Bagikan ke aplikasi lainnya:
  • WhatsApp
  • Telegram
  • Facebook
  • Twitter
  • Pinterest
  • LinkedIn

Artikel Terkait

39 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.
  • A. Abdul Mustahab ツ
    12 September, 2023
    Profil: https://www.blogger.com/profile/05409057447679540831
    mbak apa scriptnya ada yag salah yah, related post yang muncul cuma satu, padahal sudah di set ke 6.
  • ok
    10 Januari, 2023
    Profil: https://www.blogger.com/profile/12934935341431455450
    kalau mau pasang di theme textrim apa harus menghapus script yang sudah ada ?
  • M_ar
    23 Februari, 2022
    Profil: https://www.blogger.com/profile/08719624085960115432
    Terimakasih,mantap
  • M_ar
    23 Februari, 2022
    Profil: https://www.blogger.com/profile/08719624085960115432
    Terimakasih ,sangat membantu sekali
  • An Analyst
    21 April, 2021
    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.
  • Ely Goro Leba
    04 Februari, 2021
    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 Januari, 2021
    Profil: https://www.blogger.com/profile/00776710892538069974
    supaya snipet gak muncul di tampilan mobile gimana caranya ya.?
  • Gigend Workspace
    15 November, 2020
    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...
  • Chapteria
    06 Oktober, 2020
    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 :(
    • Muhammad Reza
      03 Desember, 2020
      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 September, 2020
    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 September, 2020
    Profil: https://www.blogger.com/profile/12868760485513180121
    gan kenapa related postnya hanya muncul di versi mobile tidak terlihat di versi dekstop?
    • Muhammad Reza
      03 Desember, 2020
      Profil: https://www.blogger.com/profile/06890823464453117871
      salah penempatan kode munkin. mungkin kamu taruh kodenya di tag kondisional untuk mobile
  • Kaori-Chan
    11 September, 2020
    Profil: https://www.blogger.com/profile/06874434645407330091
    makasih bang udah work di bloger ku
  • Pancaswara
    13 Agustus, 2020
    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..
  • Berbagilmu
    17 Juli, 2020
    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
    • Berbagilmu
      17 Juli, 2020
      Profil: https://www.blogger.com/profile/00449628215718477315
      Ini blog saya mbak bsa mnta tlong d cek mbak?

      https://jalanpikiranqu.blogspot .com
  • DE Blogs
    03 Juni, 2020
    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
      04 Juni, 2020
      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
      05 Juni, 2020
      Profil: https://www.blogger.com/profile/09232367143945047298
      Siap... akan dicobain...
  • Iwan
    03 Juni, 2020
    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 Maret, 2020
    Profil: https://www.blogger.com/profile/07611365078246922139
    Cara menghilangkan snippetnya gimana mbak?
    • Igniel
      19 Maret, 2020
      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 November, 2019
    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 Maret, 2020
      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 Mei, 2019
    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 Mei, 2019
      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 Mei, 2019
      Profil: https://www.blogger.com/profile/09232367143945047298
      http://prntscr.com/ntcfkt
    • Igniel
      26 Mei, 2019
      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 Mei, 2019
      Profil: https://www.blogger.com/profile/09232367143945047298
      Wadoowww... Sukses, Mantabbb...
  • Hanif
    27 Maret, 2019
    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 Maret, 2019
      Profil: https://www.blogger.com/profile/09199170379661896200
      Sesuai yang tertulis di postingan, tanya-tanya (support) dilakukan melalui email atau chatting di Facebook.
  • Puji Hartono
    09 Januari, 2019
    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
    09 Januari, 2019
    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
      09 Januari, 2019
      Profil: https://www.blogger.com/profile/09199170379661896200
      Pakai template apa mas?
    • Puji Hartono
      09 Januari, 2019
      Profil: https://www.blogger.com/profile/17141580243954872127
      Saya coba tanyakan pemilik theme,katanya memang ada sedikit bug
    • Igniel
      10 Januari, 2019
      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
    02 November, 2018
    Profil: https://www.blogger.com/profile/03607121810050002709
    Mba buat artikel widget random post dong yg ada non thumnail versi js trims
    • Admin
      02 November, 2018
      Profil: https://www.blogger.com/profile/03607121810050002709
      Buat sepetti punya mba igniel di kanan bagus