Memasang Banyak Artikel Terkait (Multiple Related Post) di Antara Paragraf dalam Postingan Blogger

Memasang Banyak Artikel Terkait (Multiple Related Post) di Antara Paragraf dalam Postingan Blogger

Saya mau berbagi script yang baru berhasil dibuat, berhubung sepertinya memang belum ada script sejenis ini. Fungsinya untuk menyisipkan banyak related post sekaligus ke dalam postingan. Logikanya sama dengan menyisipkan banyak iklan AdSense sekaligus, dimana kamu bebas menentukan seberapa banyak related post yang ingin ditampilkan.

Biasanya related post hanya tampil dalam satu tempat, misalnya berjumlah 4 buah dan disimpan tepat di tengah seperti di tutorial related post tengah postingan. Contohnya begini:

Paragraf satu.
Paragraf dua.
Paragraf tiga.
Paragraf empat.
<!-- Related Post -->
Paragraf lima.
Paragraf enam.
Paragraf tujuh.
Paragraf delapan.

Namun dengan tutorial kali ini, keberadaan related post akan disebar satu per satu dan disisipkan di antara paragraf. Jumlahnya bisa kamu atur, mau menampilkan 3, 5, atau bahkan 10 pun bisa. Berikut contoh jika memasukkan 3 buah:

Paragraf satu.
Paragraf dua.
<!-- Related Post -->
Paragraf tiga.
Paragraf empat.
<!-- Related Post -->
Paragraf lima.
Paragraf enam.
<!-- Related Post -->
Paragraf tujuh.
Paragraf delapan.

Menurut saya sih bagus karena rekomendasi artikel sejenis akan selalu muncul di banyak tempat, tidak terfokus di tengah saja.


Menyisipkan Banyak Artikel Terkait ke dalam Paragraf Postingan Blogger

Cari kode <data:post.body/> dan simpan semua kode berikut tepat DI BAWAHNYA. Jika ada banyak, pilih yang berada dalam tag kondisional halaman post.

<b:if cond='data:view.isPost'>
  <script> //<![CDATA[
  // Multiple Related Posts by igniel.com
  (function() {
    var jumlah = 4;
    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}('Z i=["\\J\\v\\l\\s\\j\\E\\t\\l\\q\\x\\w\\t\\n\\14\\w\\J\\v\\l\\s\\j\\E\\t\\l\\q\\x\\w\\v","\\X\\F\\h\\n\\x\\D\\h\\k\\h\\A\\j\\l\\n\\T\\k\\k","\\k\\h\\m\\B\\j\\U","\\G\\n\\l\\u","\\q\\o\\L","\\A\\n\\h\\r\\j\\h\\K\\k\\h\\u\\h\\m\\j","\\A\\k\\r\\s\\s\\z\\r\\u\\h","\\o\\B\\m\\o\\h\\k\\M\\F\\k\\j\\o\\O\\h\\k\\r\\j\\h\\q","\\m\\l\\q\\h\\z\\r\\u\\h","\\P","\\o\\m\\s\\h\\n\\j\\R\\h\\G\\l\\n\\h","\\v\\r\\n\\h\\m\\j\\z\\l\\q\\h","\\m\\h\\N\\j\\D\\o\\t\\k\\o\\m\\B"];y p=I[i[1]](i[0]),a=C+1,b=p[i[2]]/a;c=V[i[3]]({W:C},(15,H)=>H+1);Y(y d=0;d<c[i[2]];d++){y e=c[d],f=13((b*e)),g=I[i[5]](i[4]);g[i[6]]=i[7];S(p[f][i[8]]==i[9]){p[f][i[11]][i[10]](g,p[f])}Q{p[f][i[11]][i[10]](g,p[f][i[12]])}}',62,68,'|||||||||||||||||x65|_0xe7e5|x74|x6C|x6F|x6E|x72|x69|post|x64|x61|x73|x62|x6D|x70|x20|x79|let|x4E|x63|x67|jumlah|x53|x2D|x75|x66|_0x67aex5|document|x2E|x45|x76|x4D|x78|x52|x50|else|x42|if|x41|x68|Array|length|x71|for|var||||parseInt|x2C|_0x67aex4'.split('|'),0,{}));
  })();
  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}('a 9=["\\i\\c\\l\\L\\d\\C","\\c\\l\\d\\k\\H","\\x\\c\\c\\K","\\F\\d","\\d\\w\\d\\i\\c","\\i\\w\\l\\M","\\k\\c\\i","\\z\\i\\d\\c\\k\\l\\z\\d\\c","\\C\\k\\c\\x"];a n=o p();a m=0;a f=o p();t E(u){r(a b=0;b<u[9[2]][9[1]][9[0]];b++){a j=u[9[2]][9[1]][b];n[m]=j[9[4]][9[3]];r(a h=0;h<j[9[5]][9[0]];h++){s(j[9[5]][h][9[6]]==9[7]){f[m]=j[9[5]][h][9[8]];m++;I}}}}t G(){a e=o p(0);a g=o p(0);r(a b=0;b<f[9[0]];b++){s(!B(e,f[b])){e[9[0]]+=1;e[e[9[0]]-1]=f[b];g[9[0]]+=1;g[g[9[0]]-1]=n[b]}};n=g;f=e}t B(v,y){r(a q=0;q<v[9[0]];q++){s(v[q]==y){A D}};A J}',49,49,'|||||||||_0x6cd8|var|_0x941ax6|x65|x74|_0x941axa|relatedUrls|_0x941axb|_0x941ax8|x6C|_0x941ax7|x72|x6E|relatedTitlesNum|relatedTitles|new|Array|_0x941axf|for|if|function|_0x941ax5|_0x941axd|x69|x66|_0x941axe|x61|return|contains|x68|true|related_results_labels|x24|removeRelatedDuplicates|x79|break|false|x64|x67|x6B'.split('|'),0,{}));
  //]]> </script>
  <b:if cond='data:post.labels'>
    <b:loop values='data:post.labels' var='label'>
      <b:if cond='data:view.isPost'>
        <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=100&quot;'/>
      </b:if>
    </b:loop>
  </b:if>
  <script> //<![CDATA[
    // Multiple Related Posts by igniel.com
    (function ignielMultiRelated() {
      var text = 'BACA JUGA:';
      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}('P b=["\\e\\f\\c\\B\\h\\E","\\o\\d\\c\\z\\q\\N","\\A\\e\\q\\q\\o","\\S\\n\\B\\c\\n\\f\\e\\C\\y\\e\\h\\n\\T\\f\\e\\d\\h\\f\\z","\\M\\y\\f\\o\\G\\H\\f\\e\\f\\p\\h\\q\\o\\L\\e\\e","\\n\\c\\c\\f\\o\\F\\V\\C\\I","\\k\\g\\m\\d\\c\\s\\p\\e\\d\\g\\g\\u\\j\\p\\q\\c\\h\\f\\c\\h\\j\\l\\k\\g\\m\\d\\c\\s\\p\\e\\d\\g\\g\\u\\j\\h\\f\\K\\h\\j\\l","\\k\\w\\g\\m\\d\\c\\l\\k\\d\\s\\E\\o\\f\\A\\u\\j","\\j\\s\\h\\n\\h\\e\\f\\u\\j","\\j\\l","\\k\\w\\d\\l\\k\\w\\g\\m\\d\\c\\l\\k\\g\\m\\d\\c\\s\\p\\e\\d\\g\\g\\u\\j\\n\\p\\q\\c\\j\\l\\k\\w\\g\\m\\d\\c\\l"];v r=D[b[2]]((t[b[0]]-1)*D[b[1]]());v i=0;v x=O[b[4]](b[3]);Q(i<t[b[0]]&&i<x[b[0]]){R(v a=0;a<x[b[0]];a++){x[a][b[5]]=b[6]+W+b[7]+Y[r]+b[8]+t[r]+b[9]+t[r]+b[U];J(r<t[b[0]]-1){r++}X{r=0};i++}}',61,61,'|||||||||||_0x2867|x6E|x61|x6C|x65|x73|x74||x22|x3C|x3E|x70|x69|x72|x63|x6F||x20|relatedTitles|x3D|let|x2F|jumlah|x75|x64|x66|x67|x4D|Math|x68|x48|x79|x53|x4C|if|x78|x41|x71|x6D|document|var|while|for|x2E|x52|10|x54|text|else|relatedUrls'.split('|'),0,{}));
    })();
  //]]> </script>
</b:if>
- var jumlah: jumlah related post yang ditampilkan. Pastikan hanya mengubah angka 4 saja.
- var text: Tulisan atau judul dari related post. Hanya ganti di bagian BACA JUGA: saja (tanda kutip jangan dihapus).

Lalu tambahkan kode CSS ini untuk membuat tampilannya lebih menarik. Usahakan memilih warna yang kontras dengan sekitarnya agar mudah dikenali oleh pengunjung. Simpan DI ATAS </style> atau ]]></b:skin>.

/* Multiple Related Posts by igniel.com */
.ignielMultiRelated {background-color:#C0392B; color:#fff; margin:10px 0px; display:-webkit-box;
display:-webkit-flex; display:-moz-box; display:-ms-flexbox; display:flex; flex-wrap:nowrap; justify-content:space-between; transition:all .3s ease;}
.ignielMultiRelated:hover {background-color:#252525;}
.ignielMultiRelated .content {padding:10px 15px;}
.ignielMultiRelated .content .text {margin-right:10px; text-decoration:underline;}
.ignielMultiRelated .content a {color:#fff; text-decoration:none; line-height:1.5em;}
.ignielMultiRelated .icon{height:auto; min-width:50px; background:#E74C3C url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z' fill='%23fff'/%3E%3C/svg%3E") center / 40px no-repeat; transition:all .3s ease;}
.ignielMultiRelated:hover .icon {background-color:#000;}

Hasilnya bisa dicek di Codepen saya.


Terakhir simpan template dan lihat hasilnya. Cukup unik bukan tutorial memasang banyak artikel terkait dalam postingan Blogspot di atas. Saya sering melihatnya dalam blog dengan platform WordPress, mungkin memang ada pluginnya. Sebagai pengguna Blogger tentunya tidak mau kalah dong.

Kamu bebas menulis ulang artikel ini menggunakan bahasa sendiri di blog masing-masing dengan syarat harus menyertakan sumber aslinya (link hidup).

SHARE Pin Share
Artikel Terkait
25 komentar
  1. Mantap sistah, tapi kayaknya tanpa style terlihat lebih natural yah, seperti situs berita pada umumnya. ^_^

    BalasHapus
    Balasan
    1. Iya style nya sesuaikan dengan selera masing-masing aja.

      Hapus
  2. mba jadinya acak-acakan seperti gambar berikut ini di template viomagz
    https://1.bp.blogspot.com/-uFxugYpE9Cs/XEAuPLFFMjI/AAAAAAAABDM/nAmKghjvQQ0RdfsYg10RhetjWtvU6Zq6QCEwYBhgL/s1600/Capture.PNG

    BalasHapus
    Balasan
    1. Bukan acak-acakan. Script ini bekerja menyisipkan related post sesuai jumlah paragraf. Dan saya lihat artikel mas di atas cukup pendek dan cuma ada beberapa paragraf saja. Sementara jumlah related postnya disetting banyak. Jadi numpuk. Coba jumlahnya kurangi.

      Hapus
    2. jadi spesifikasi minimumnya harus ada berapa paragraf mba ?

      Hapus
    3. Minimal 1 paragraf.

      Artikel masnya terlalu pendek. Jumlah relatednya kurangi biar gak numpuk.

      Hapus
    4. kalau blog yang artikelnya pendek pendek cukup gunakan 2 saja baca juganya.

      Hapus
  3. keren, kalo bisa request yang ada gambar+judulnya mbak jadi mirip kek wordpress

    BalasHapus
  4. Kenapa scriptnya di obfus semua.?

    BalasHapus
    Balasan
    1. Semacam di lock, jadi nda bisa di ubah atau di modofikasi.

      Hapus
    2. Dia ngeshare tutorial nya setengah-setengah doang, awalnya sih ane liat blog nya bagus,tapi pas bagian javascript atau script nya di obfus semua. Gimana pemula mau tau cara kerja scriptnya kalau gak bisa dibaca.

      Hapus
    3. Salah tempat bos kalo bilang setengah-setengah. Ini tutorial blogging. Bukan tutorial pemrograman.

      Hapus
  5. ini yang dipake ditemplate textrim bukan mba?

    BalasHapus
  6. eleh ngelu ndasku đŸ¤£
    aku ijin pakai yang related di tengah postingan saja.

    BalasHapus
  7. Kok pas saya coba gak work ya mba :(

    BalasHapus
    Balasan
    1. Kalo pasangnya benar pasti work.

      Hapus
  8. Supaya tiap link di klik open new tab gmna?

    BalasHapus
  9. https://faizaltech98.blogspot.com/2019/11/cara-membuat-multiple-related-post.html
    Terima kasih post nya mba izin post ulang

    BalasHapus
  10. 4 same related Posts showing in my blogspot blog. I have used textrim bloggger template by you. Help me. I writeen 2 posts of same label for testing purpose. Help me.

    BalasHapus
    Balasan
    1. How many posts in the same Label you have?

      Hapus
  11. Ngurangi jumlah related post yang ditampilkan bijimane tante? Misal cuman 2 related post. Tengkiyu tante.

    BalasHapus
    Balasan
    1. Eh mengatur letak maksudnya wkwk. Mindah posisi related post ke paragraf sekian.

      Hapus
    2. Pake yang ini bos. Besok-besok jangan komen pake kloningan ya bos, apalagi yang fotonya cewek cakep tapi gak tau siapa.
      https://www.igniel.com/2019/01/iklan-setelah-paragraf-ke-sekian.html

      Hapus

Posting Komentar