Memasang Multiplex Banyak Artikel Terkait Didalam Postingan Blogger


 Cepot kali ini mau berbagi script yang habis Cepot pelajari, berhubung Cepot baru belajar script jenis ini juga untuk blogcepot.com ini. Fungsinya untuk menampilkan sekaligus menyisipkan banyak artikel terkait di dalam setiap paragraf artikel blogger kamu. Nantinya kamu bisa menentukan sendiri berapa banyak artikel related post yang ingin di tampilkan di tengah artikel bloggers kamu.

Biasanya related post muncul banyak di dalam satuparagraf saja. Misalnya kamu menyetting 5 buah artikel terkait.


Paragraf Cepot 1.
Paragraf Cepot 2.
Paragraf Cepot 3.
Paragraf Cepot 4.
<!-- Related Post -->
Paragraf Cepot 5.
Paragraf Cepot 6.
Paragraf Cepot 7.
Paragraf Cepot 8.

Namun kali ini Cepot akan membuat related post muncul banyak di setiap paragraf artikel blogger kamu. Nanti tampilanya akan seperti ini.

Paragraf Cepot 1.
Paragraf Cepot 2.
<!-- Related Post -->
Paragraf Cepot 3.
Paragraf Cepot 4.
<!-- Related Post -->
Paragraf Cepot 5.
Paragraf Cepot 6.
<!-- Related Post -->
Paragraf Cepot 7.
Paragraf cepot8.

Menurut Cepot jika membuat tampilan related post di blogger kamu seperti ini sangat bagus banget.

MEMASANG MULTIPLEX RELATED POST DI BLOGGER AGAR MUNCUL SATU-SATU

Blogger adalah salah satu platform blogging yang banyak digunakan oleh para penulis dan pembuat konten. Salah satu fitur yang penting dalam sebuah blog adalah Related Post atau artikel terkait. Biasanya, Related Post muncul dalam bentuk daftar di bawah artikel atau dalam satu blok paragraf saja. Namun, kali ini kita akan membahas cara memasang Multiplex Related Post agar muncul satu per satu di setiap paragraf artikel.

Kenapa Harus Menggunakan Multiplex Related Post?

Menampilkan Related Post satu per satu di dalam artikel memiliki beberapa keuntungan, di antaranya:

  1. Meningkatkan Engagement – Pembaca akan lebih tertarik untuk mengeklik artikel lain yang relevan dengan topik yang sedang mereka baca.

  2. Meminimalisir Bounce Rate – Dengan menyisipkan artikel terkait di antara paragraf, pembaca lebih cenderung untuk menjelajahi lebih banyak halaman di blog.

  3. Optimasi SEO – Internal linking yang lebih baik dapat membantu meningkatkan peringkat blog di mesin pencari.

  4. Tampilan Lebih Rapi – Related Post tidak menumpuk di satu tempat tetapi tersebar merata di seluruh artikel.

Cara Memasang Multiplex Related Post di Blogger

Berikut adalah langkah-langkah untuk memasang Related Post satu per satu di dalam artikel:

1. Masuk ke Blogger dan Edit Template

  • Login ke akun Blogger kamu.

  • Pilih blog yang ingin kamu edit.

  • Masuk ke menu Tema dan klik Edit HTML.

2. Tambahkan Kode JavaScript

Untuk membuat Related Post muncul satu-satu di tengah artikel, tambahkan kode berikut di dalam <head> sebelum tag </head>:

<script>
function insertRelatedPosts() {
    var paragraphs = document.querySelectorAll(".post-body p");
    var relatedPosts = [
        "<a href='#'>Artikel Terkait 1</a>",
        "<a href='#'>Artikel Terkait 2</a>",
        "<a href='#'>Artikel Terkait 3</a>",
        "<a href='#'>Artikel Terkait 4</a>"
    ];

    var insertAfter = 2; // Menyisipkan setelah setiap 2 paragraf
    var count = 0;

    paragraphs.forEach(function(paragraph, index) {
        if ((index + 1) % insertAfter === 0 && count < relatedPosts.length) {
            var div = document.createElement("div");
            div.className = "related-post";
            div.innerHTML = relatedPosts[count];
            paragraph.parentNode.insertBefore(div, paragraph.nextSibling);
            count++;
        }
    });
}

document.addEventListener("DOMContentLoaded", insertRelatedPosts);
</script>
Jika kode tersebut gagal, silahkan coba kode berikut ini :

Cari kode <data:post.body/> pada template blogger kamu,
Lalu psang kode ini di bawahnya.
<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>

Kemudian Padang kode css di bawah ini di template blogger kamu, taruh di pengaturan CSS template blogger kamu ya.

/* 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;}


Catatan :
Var : jumlah 4 adalah jumlah artikel terkait yang ingin kamu tampilkan. Kamu bisa merubahnya jadi 10 atau 100 🤣.

3. Tambahkan CSS Agar Tampilan Lebih Menarik

Agar Related Post terlihat rapi, tambahkan kode CSS berikut ke dalam template Blogger:

<style>
.related-post {
    background-color: #f9f9f9;
    padding: 10px;
    margin: 15px 0;
    border-left: 4px solid #007bff;
    font-size: 14px;
}
.related-post a {
    text-decoration: none;
    color: #007bff;
    font-weight: bold;
}
</style>

4. Simpan dan Uji Coba

Setelah menambahkan kode di atas, simpan template dan coba buat artikel dengan beberapa paragraf untuk melihat apakah Related Post muncul satu per satu sesuai dengan yang diharapkan.

Kesimpulan

Menggunakan Multiplex Related Post di Blogger dapat membantu meningkatkan interaksi pembaca, memperbaiki SEO, dan membuat blog lebih menarik. Dengan langkah-langkah yang sudah dijelaskan di atas, kamu dapat dengan mudah menyisipkan artikel terkait secara otomatis di tengah artikel Blogger.

Jika kamu mengalami kendala dalam menerapkan kode ini, jangan ragu untuk bertanya di kolom komentar. Semoga bermanfaat!


Artikel Terkait

0 Komentar