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).

Baca Juga
DONASI VIA PAYPAL Bantu berikan donasi jika artikelnya dirasa bermanfaat. Donasi akan digunakan untuk memperpanjang domain www.igniel.com. Terima kasih.

Artikel Terkait

16 Komentar

  1. Mantap sistah, tapi kayaknya tanpa style terlihat lebih natural yah, seperti situs berita pada umumnya. ^_^

    ReplyDelete
    Replies
    1. Iya style nya sesuaikan dengan selera masing-masing aja.

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

    ReplyDelete
    Replies
    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.

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

      Delete
    3. Minimal 1 paragraf.

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

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

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

    ReplyDelete
  4. Kenapa scriptnya di obfus semua.?

    ReplyDelete
    Replies
    1. Semacam di lock, jadi nda bisa di ubah atau di modofikasi.

      Delete
  5. ini yang dipake ditemplate textrim bukan mba?

    ReplyDelete
  6. eleh ngelu ndasku 🤣
    aku ijin pakai yang related di tengah postingan saja.

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

    ReplyDelete
    Replies
    1. Kalo pasangnya benar pasti work.

      Delete

Gunakan tag HTML <em> untuk menuliskan URL, potongan kode, atau hal penting lainnya.
Contoh: <em>isi pesan</em>