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.

SHARE Pin Share
Artikel Terkait
30 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 ""

    BalasHapus
    Balasan
    1. Ada kode yang kehapus tuh. Cek lagi kodenya.

      Hapus
  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 ;)

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

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

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

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

    BalasHapus
    Balasan
    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

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

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

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

      Hapus
  7. saya ada 3 itu yang mana hu?

    BalasHapus
  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

    BalasHapus
    Balasan
    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.

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

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

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

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

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

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

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

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

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

    BalasHapus
  17. saya sudah ikutin pak, tapi gagal pas klik save, padahal udah hapus semua wigdet yang ditata letak. mohon bimbingannya pak

    BalasHapus
  18. Thankyou gan berhasil! Sekalian saya minta izin ya untuk share kode nya, credit tidak dihilangkan:)

    BalasHapus
  19. Kalo misal artikel untuk label tertentu cuma 1, bagaimana cara membuat supaya related article tidak muncul? Soalnya yg muncul malah link artikel yg sama dan saya khawatir itu jadi internal linking yg berlebihan.

    BalasHapus

Posting Komentar