Memasang Artikel Terkait (Related Post) di Tengah Postingan Blogger

Memasang Related Post (Artikel Terkait) di Tengah Postingan Blogger

Tutorial ini sebenarnya sudah umum banget ya. Tapi belum pernah saya bahas, jadi ditulis saja deh...sekalian buat menambah jumlah postingan. Sebelum cepat-cepat pergi karena dirasa pasaran, tunggu dulu. Disini saya pakai script untuk menyisipkan konten ke tengah artikel yang dibuat sendiri. Jadi mending dicoba deh cara memasang related post di Blogger ini karena hasilnya mungkin akan berbeda dengan script yang kamu pakai.


Menampilkan Artikel Terkait di Tengah isi Post Blogspot

Cari kode <data:post.body/> dan simpan semua kode berikut tepat DI BAWAHNYA.

<b:if cond='data:view.isPost'>
  <script> //<![CDATA[
    // Related Posts Middle by igniel.com
    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}('c a=["\\e\\d\\s\\Q\\f\\C","\\d\\s\\f\\h\\W","\\B\\d\\d\\I","\\V\\f","\\f\\k\\f\\e\\d","\\e\\k\\s\\S","\\h\\d\\e","\\r\\e\\f\\d\\h\\s\\r\\f\\d","\\C\\h\\d\\B","\\h\\r\\s\\I\\F\\U","\\B\\e\\F\\F\\h","\\m\\O\\e\\l","\\T\\h\\k\\f\\d","\\m\\e\\k\\l\\m\\r\\K\\C\\h\\d\\B\\P\\w","\\w\\K\\f\\k\\f\\e\\d\\P\\w","\\w\\l","\\m\\D\\r\\l\\m\\D\\e\\k\\l","\\m\\D\\O\\e\\l"];c g=x y();c v=0;c j=x y();z R(H){u(c b=0;b<H[a[2]][a[1]][a[0]];b++){c p=H[a[2]][a[1]][b];g[v]=p[a[4]][a[3]];u(c q=0;q<p[a[5]][a[0]];q++){A(p[a[5]][q][a[6]]==a[7]){j[v]=p[a[5]][q][a[8]];v++;18}}}}z X(){c n=x y(0);c o=x y(0);u(c b=0;b<j[a[0]];b++){A(!J(n,j[b])){n[a[0]]+=1;n[n[a[0]]-1]=j[b];o[a[0]]+=1;o[o[a[0]]-1]=g[b]}};g=o;j=n}z J(G,L){u(c t=0;t<G[a[0]];t++){A(G[t]==L){M 1b}};M Y}z 19(){c i=N[a[10]]((g[a[0]]-1)*N[a[9]]());c b=0;E[a[12]](a[11]);Z(b<g[a[0]]&&b<1c){E[a[12]](a[13]+j[i]+a[14]+g[i]+a[15]+g[i]+a[16]);A(i<g[a[0]]-1){i++}1a{i=0};b++};E[a[12]](a[17])}',62,75,'||||||||||_0x22c4|_0x6c56x6|var|x65|x6C|x74|relatedTitles|x72|_0x6c56x11|relatedUrls|x69|x3E|x3C|_0x6c56xa|_0x6c56xb|_0x6c56x7|_0x6c56x8|x61|x6E|_0x6c56xf|for|relatedTitlesNum|x22|new|Array|function|if|x66|x68|x2F|document|x6F|_0x6c56xd|_0x6c56x5|x64|contains|x20|_0x6c56xe|return|Math|x75|x3D|x67|related_results_labels|x6B|x77|x6D|x24|x79|removeRelatedDuplicates|false|while|||||||||break|ignielBacaJuga|else|true|jumlah'.split('|'),0,{}));
  //]]></script>
  <div class='ignielRelatedMiddle'>
    <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>
    <span class='judul'><span>Baca Juga</span></span>
    <script> //<![CDATA[
      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}('L b=["\\i\\p\\e\\i\\a\\c\\K\\a\\c\\m\\d\\a\\h\\J\\i\\h\\h\\c\\a","\\p\\a\\d\\S\\c\\a\\s\\a\\e\\d\\j\\v\\r\\R\\c\\m\\j\\j\\t\\m\\s\\a","\\x\\n\\f\\j\\d\\y\\o\\f\\h\\r\\u\\o\\k\\Q\\u\\x\\n\\f\\j\\d\\y\\o\\f\\h\\r\\u\\n","\\P\\D\\a\\k\\r\\w\\a\\c\\a\\E\\d\\f\\k\\F\\c\\c","\\c\\a\\e\\p\\d\\G","\\e\\f\\h\\a\\t\\m\\s\\a","\\C","\\i\\e\\j\\a\\k\\d\\v\\a\\H\\f\\k\\a","\\n\\m\\k\\a\\e\\d\\t\\f\\h\\a","\\e\\a\\I\\d\\w\\i\\o\\c\\i\\e\\p"];O();(N(){A q=z[b[1]](b[0])[0];B(q){A g=z[b[3]](b[2]),l=M(g[b[4]]/2);B(g[l][b[5]]==b[6]){g[l][b[8]][b[7]](q,g[l])}T{g[l][b[8]][b[7]](q,g[l][b[9]])}}})()',56,56,'||||||||||x65|_0x9301|x6C|x74|x6E|x6F|_0xa209x2|x64|x69|x73|x72|_0xa209x3|x61|x70|x62|x67|_0xa209x1|x79|x6D|x4E|x20|x42|x53|x2E|x2D|document|let|if|x50|x75|x63|x41|x68|x66|x78|x4D|x52|var|parseInt|function|ignielBacaJuga|x71|x2C|x43|x45|else'.split('|'),0,{}));
    //]]> </script>
  </div>
</b:if>

var jumlah = 4 adalah jumlah artikel terkait yang dimunculkan dan bisa diganti sesuka hati. Pastikan hanya mengubah angkanya saja.

Agar tampilannya tidak membosankan, tambahkan kode CSS ini dan simpan DI ATAS </style> atau ]]></b:skin>. Kamu bisa ganti untuk menyesuaikan dengan template blog.

/* Related Posts Middle by igniel.com */
.ignielRelatedMiddle {background-color:#f5f5f5; border:1px solid #e5e5e5; display:block; margin:20px 0px; padding:10px 20px;}
.ignielRelatedMiddle .judul {color:#f44336; font-size:120%; font-weight:600; text-transform:uppercase}
.ignielRelatedMiddle ul {margin:10px 0px 0px !important; padding:0px !important;}
.ignielRelatedMiddle ul li {list-style:none; padding:5px 0px !important; border-bottom:2px dotted #aaa !important; text-align:left !important; line-height:1.25em !important;}
.ignielRelatedMiddle ul li:first-child {padding-top:0px; !important;}
.ignielRelatedMiddle ul li:last-child {padding-bottom:0px !important; border:0px !important}
.ignielRelatedMiddle ul li a:before{content:''; display:inline-block; width:17px; height:17px; margin-right:3px; vertical-align:-3px; background: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='%23333'/%3E%3C/svg%3E") center / 20px no-repeat;}

Jangan lupa simpan template dan lihat hasilnya. Keberadaan artikel terkait di tengah postingan sangat penting untuk menurunkan bounce rate dan memancing pengunjung agar mau membaca artikel lain. Kamu bisa kombinasikan dengan menambahkan related post bawah artikel model grid atau related post bawah artikel model list.

Baca Juga

Artikel Terkait

27 Komentar

  1. eror gan ada pesan
    Kesalahan saat mengurai XML, baris 4497, kolom 3: The element type "bodi" must be terminated by the matching end-tag ""

    ReplyDelete
    Replies
    1. Ada kode yang kehapus tuh. Cek lagi kodenya.

      Delete
  2. saya pemula buat blog. sangat membingungkan dengan peletakkan kode''. sempet bingung tp akhirnya faham dari post kaka ini. dan tampilannya sesuai dengan keinginan saya. makasih kak ;)

    ReplyDelete
  3. kok punya gwe random ya gan.kadang diatas kadang dibawah ditengah jarang

    ReplyDelete
  4. Membuat baca juiga seperti bloga anda bagaimana, bisa minta tutoriallnya

    ReplyDelete
    Replies
    1. Ada disini:
      https://www.igniel.com/2019/01/artikel-terkait-tengah-post.html

      Delete
  5. kak, biar related pots nya bisa dinaikin dikit harus diubah apanya ya?
    terima kasih

    ReplyDelete
    Replies
    1. Dinaikin gimana? Ini otomatis memotong di tengah. Posisinya tergantung seberapa banyak kata. Kalau mau diatur sendiri muncul dimana pakai yang ini:
      https://www.igniel.com/2018/11/iklan-sebelum-sesudah-elemen.html
      https://www.igniel.com/2019/01/iklan-setelah-paragraf-ke-sekian.html

      Delete
    2. nah itu maksud saya kak,, wkwk
      terima kasih

      Delete
  6. Maaf kk mau nanya..
    Saya sudah memasukkan kodenya..
    artikel sudah ada 10, tetapi Baca Juga nya belum muncul..
    itu gimana yaa kk?

    ReplyDelete
    Replies
    1. Baca disini ya:
      https://www.igniel.com/2019/01/artikel-terkait-tengah-post.html?showComment=1563804970132#c5150579271522409251

      Delete
  7. saya ada 3 itu yang mana hu?

    ReplyDelete
  8. Hy kak igniel.
    Begini kak punya saya tulisan baca juga yang di tengah postingan sudah ada..
    Tapi kenapa tidak ada judul entrinya di dalam tulisan baca juganya

    ReplyDelete
    Replies
    1. Ada 3 kemungkinan:
      1) Postingan belum dikasih label.
      2) Belum ada postingan lain yang memiliki label sejenis. Misalnya postingan dengan label Blog baru ada satu.
      3) Script error.

      Delete
  9. KAYANYA bentrok sm related post di bawah. thumbnail related post asli hilang.

    ReplyDelete
  10. untuk merubah warna tulisan related post mana yg harus dirubah?

    ReplyDelete
  11. min kalo saya edit lagi css nya bolehkan?

    ReplyDelete
  12. hay dear how can i remove bullet points. from related post script ??????

    ReplyDelete
  13. itu css nya kenapa tidak berfungsi di blog saya ya mbak https://www.syukmagroups.com

    ReplyDelete
  14. mampir agan dan izin nyomot script, tpi kok setelah saya terapkan tidah muncul yah Baca juga, padahal tidak ada yg eror

    ReplyDelete
    Replies
    1. Postingannya udah dikasih label? Kalau udah, apa postingan dengan label tersebut udah lebih dari satu?

      Delete
  15. terima kasih, saya ijin menggunakanya bang, salam kenal dari saya https://pengin-pintar.blogspot.com/

    ReplyDelete
  16. Gimana caranya supaya saat postingan gk ada labelnya, related postya juga gk ditampilin?

    ReplyDelete
  1. Untuk menulis kode gunakan <i>KODE</i>
  2. Untuk menyisipkan kode ke dalam Syntax Highlighter gunakan <em>KODE YANG LEBIH PANJANG</em>
  3. Kode harus di-parse terlebih dulu agar bisa ditulis.
  4. Centang Notify me untuk mendapatkan notifikasi balasan komentar melalui Email.