Menempatkan Banyak Artikel Terkait (Multiple Related Post) dalam Postingan Blogger

Tutorial Cara Membuat Multi Related Post di Tengah Postingan Blogger ini sebenarnya sudah umum, tetapi belum pernah saya bahas sebelumnya. Oleh karena itu, saya menulis artikel ini untuk menambah jumlah postingan sekaligus memberikan panduan yang mungkin berbeda dari yang biasa Anda temui. 

Di sini, saya menggunakan script untuk menyisipkan konten ke tengah artikel otomatis. Jadi, lebih baik Anda mencoba cara memasang related post di Blogger ini karena hasilnya mungkin akan berbeda dengan script yang biasa Anda pakai.

Menampilkan Artikel Terkait di Tengah isi Post Blogspot 

Untuk menampilkan artikel terkait di tengah isi post Blogger, Anda perlu mengikuti beberapa langkah berikut. Pastikan Anda mempersiapkan template blog Anda sebelum memulai. Berikut adalah panduan lengkapnya.

1. Buka Blogger: Masuk ke akun Blogger Anda dan pilih blog yang ingin Anda tambahkan related post.
2. Masuk ke Tema: Di dashboard Blogger, klik "Tema" di sidebar kiri.
3. Edit HTML: Klik tombol "Edit HTML" untuk mengedit kode tema blog Anda.

Pertama. Silahkan kalian Cari Kode `<data:post.body/>` dan Tambahkan Kode Berikut

<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='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=100"'/>
      </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>

Temukan kode `<data:post.body/>` dalam template Blogger Anda dan simpan semua kode tepat di bawahnya.

Kode di atas akan menampilkan artikel terkait di tengah isi postingan Anda. Perhatikan bagian `var jumlah = 4` yang menentukan jumlah artikel terkait yang akan ditampilkan. Anda bisa mengubah angkanya sesuai keinginan.

2. Tambahkan CSS untuk Mempercantik Tampilan

Agar tampilan artikel terkait tidak membosankan, tambahkan kode CSS berikut dan simpan di bagian ATAS `<style>` atau `]]></b:skin>`. Anda bisa menyesuaikannya agar sesuai dengan template blog Anda.

.ignielMultiRelated {
    background-color: #fff;
    color: #000;
    margin: 0px 0px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    transition: all 0.3s ease;
}
.ignielMultiRelated:hover {
    background-color: #fff;
}
.ignielMultiRelated .content {
    padding: 9px 8px;
}
.ignielMultiRelated .content .text {
    margin-right: 10px;
    text-decoration: none;
}
.ignielMultiRelated .content a {
    color: #1a8917;
    text-decoration: none;
    line-height: 1.7em;
}
.ignielMultiRelated:hover .icon {
    background-color: #000;
}

3. Simpan Template dan Lihat Hasilnya

Setelah menambahkan kode HTML dan CSS di atas, simpan template Anda dan lihat hasilnya. Artikel terkait yang muncul di tengah postingan dapat membantu menurunkan bounce rate dan memancing pengunjung untuk membaca artikel lainnya di blog Anda.

Menampilkan artikel terkait di tengah postingan Blogger dapat memberikan banyak manfaat bagi blog Anda. Dengan mengikuti langkah-langkah di atas, Anda bisa menyajikan konten yang lebih menarik dan meningkatkan interaksi pengunjung. Jangan lupa untuk selalu menyesuaikan tampilan agar sesuai dengan tema blog Anda. Selamat mencoba!