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.

Artikel Terkait

64 komentar

Ikuti format penulisan berikut untuk menyisipkan elemen tambahan.
  • Menulis kode gunakan <i>kode</i>
  • Menulis dalam syntax highlighter gunakan <em>kode panjang</em>
  • Menyisipkan gambar gunakan <strong>URL GAMBAR</strong>
  • Jendela Belajar Kita
    6/3/22
    Profil: https://www.blogger.com/profile/14027235972383757687
    Sukses bang.... bisa di cek di blog ku bang
  • Sutrisno
    8/2/22
    Profil: https://www.blogger.com/profile/09964536894786346035
    kok gambarnya gak muncul yah
  • dy
    25/1/22
    Profil: https://www.blogger.com/profile/00017329317328752843
    Hi... klo mau yg gak ada label juga tampil di related post, gimana..?
    • Igniel
      28/1/22
      Profil: https://www.blogger.com/profile/09199170379661896200
      Kalau gak ada label, terus relatednya mau diambil berdasarkan apa? Random? Jadi gak relevan dengan artikel dong.
  • catatan muslim
    15/12/21
    Profil: https://www.blogger.com/profile/06938275360112925405
    terimakasihh pencerahannya mbak
  • Mas SEO Media
    7/11/21
    Profil: https://www.blogger.com/profile/17696600477446226706
    Keren Mbak, thanks tutorialnya
  • Boy Paskand
    30/8/21
    Profil: https://www.blogger.com/profile/00636203494441823525
    Template agan ini mantap benar gan.., saya suka sekali.., andai aku dapat copian xml dari template untuk blog ku alangkah bahagiannya.., berapa harganya ini gan templatenya?
    • Igniel
      31/8/21
      Profil: https://www.blogger.com/profile/09199170379661896200
      Template blog Igniel tidak dijual kak.
  • Mujib Maulana
    26/7/21
    Profil: https://www.blogger.com/profile/01386034762501026825
    Mbak igniel, saya minta izin untuk menggunakan scriptnya ya, dan juga saya post diblog saya, terimakasih :v
  • Khairunnisa Ast
    4/7/21
    Profil: https://www.blogger.com/profile/09610401324538176582
    Terima kasih. Sudah saya pasang dan berhasil
  • Cah Samin
    20/3/21
    Profil: https://www.blogger.com/profile/11116753106951062462
    gan, kalo diatas related dikasih iklan.. gimana caranya?? makasih
  • Dede Rudiansah
    14/3/21
    Profil: https://www.blogger.com/profile/08687263435710435736
    Biar iklan (tengah) gak ikut masuk di kolom 'Baca Juga' gimana itu om?
  • Toko Buku Bekas Aksiku
    18/2/21
    Profil: https://www.blogger.com/profile/01677557629330387247
    terima kasih
  • Muhammad syafaat
    11/1/21
    Profil: https://www.blogger.com/profile/14775036980406818308
    Cara agar kelihatan di Postingannya gimana kak
  • Yeinie
    3/1/21
    Profil: https://www.blogger.com/profile/15117368173283662175
    Terimakash tutor nya berhasil.. setelah otak atik, pertama ga muncul, ternyata bisa muncul setelah saya letakan di di data.post nya bagian 3..
  • Rizal Burhanudin
    16/12/20
    Profil: https://www.blogger.com/profile/03181417392195367401
    kak mau nanya kalau misalnya saya buatnya perartikel manual gak ke edit tema nya itu nanti hasilnya bakal sama gak kak
  • Allotrop
    28/10/20
    Profil: https://www.blogger.com/profile/07217488345166490786
    Gak bisa muncul kenapa?
  • Triyatni A.
    22/8/20
    Profil: https://www.blogger.com/profile/06774455109021522162
    Terima kasih Kak. Berhasil masangnya
  • rippdunk_
    12/8/20
    Profil: https://www.blogger.com/profile/10096749583718869128
    kak, kalau mau merubah tampilannya bagaimana? saya tampilannya biasa aja. kurang menarik kak.
  • Cahyo
    16/7/20
    Profil: https://www.blogger.com/profile/16643578768206704243
    cara ganti backgroundnya gimana kak? soalnya pas di tengah background sama jadi kaya bacaan selanjutnya gitu.
  • HadeHana
    3/6/20
    Profil: https://www.blogger.com/profile/12362092345402432515
    kok ga keluar ya kak
    • HadeHana
      3/6/20
      Profil: https://www.blogger.com/profile/12362092345402432515
      hehe...udah bisa kak
  • Eka Awaludin
    28/5/20
    Profil: https://www.blogger.com/profile/03027218065021816904
    Ga ada demo nya? Pengen liat dulu contoh nya.
    • Igniel
      28/5/20
      Profil: https://www.blogger.com/profile/09199170379661896200
      Blog yang sedang kamu kunjungi ini demonya. Cek di tengah postingan.
    • Eka Awaludin
      11/6/20
      Profil: https://www.blogger.com/profile/03027218065021816904
      Teh kalo pengen di tambahin thumbnail gmn? Apa ada tutorialnya?
  • Yudistira  Bannepadang
    23/5/20
    Profil: https://www.blogger.com/profile/10582533170238404828
    saya sudah ikuti langkah" di atas, tapi tetap aja gak muncul di tengah postingan saya.
    padahal semua postinga sudah saya kasih label, dan sudah ada 4 postingan yang memiliki label yang sama. Tolong di bantu!!
  • Jamalludin
    19/5/20
    Profil: https://www.blogger.com/profile/01265445773272875627
    saya ko gak berhasil gan, mohon saran nya gan.

    https://uyuhanbae.blogspot.com
  • Abdullah bin Akmal
    4/5/20
    Profil: https://www.blogger.com/profile/03848318308211321377
    Saya ada 3 di template saya, jadi ditaruh dimananya ya?
  • Ade Arif
    3/5/20
    Profil: https://www.blogger.com/profile/18060022403880421854
    untuk blog amp gimana ya kak penerapannya....
  • Pegiat Literasi.com
    27/3/20
    Profil: https://www.blogger.com/profile/05275401473347868294
    rekomended banget nih.
    kalau buat BACA JUGA nya jadi banyak gimana?
    mislanya di dalam satu postingan itu ada 3 BACA JUGA (bukan tiga baris, tapi 3 bagian BACA JUGA) ? gmana gan?
    • Igniel
      27/3/20
      Profil: https://www.blogger.com/profile/09199170379661896200
      Multi related post.
      https://www.igniel.com/2019/01/multiple-artikel-terkait-dalam-post.html
  • SYBER
    1/3/20
    Profil: https://www.blogger.com/profile/16306120554651388837
    Mbak cara menghapus related di tengah postingan bagaimana ya mbak caranya
  • tokocctv.net
    22/1/20
    Profil: https://www.blogger.com/profile/16816654241359539657
    mantap bos. work https://barbarcheat.com
  • Bintang F
    22/11/19
    Profil: https://www.blogger.com/profile/18191951888130939653
    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.
    • Syarhabil Abdussalam
      7/12/20
      Profil: https://www.blogger.com/profile/06050168441204379291
      iya sama, gimana caranya mbak igniel?
  • Bintang F
    20/11/19
    Profil: https://www.blogger.com/profile/18191951888130939653
    Thankyou gan berhasil! Sekalian saya minta izin ya untuk share kode nya, credit tidak dihilangkan:)
  • FLORES IDN
    1/11/19
    Profil: https://www.blogger.com/profile/12805225115299480784
    saya sudah ikutin pak, tapi gagal pas klik save, padahal udah hapus semua wigdet yang ditata letak. mohon bimbingannya pak
  • Rania Marhana
    15/10/19
    Profil: https://www.blogger.com/profile/00851209717019944100
    Gimana caranya supaya saat postingan gk ada labelnya, related postya juga gk ditampilin?
  • HilmanFawwaz
    11/10/19
    Profil: https://www.blogger.com/profile/03791719059201783148
    terima kasih, saya ijin menggunakanya bang, salam kenal dari saya https://pengin-pintar.blogspot.com/
  • Haryo
    18/9/19
    Profil: https://www.blogger.com/profile/15894424116074324881
    mampir agan dan izin nyomot script, tpi kok setelah saya terapkan tidah muncul yah Baca juga, padahal tidak ada yg eror
    • Igniel
      18/9/19
      Profil: https://www.blogger.com/profile/09199170379661896200
      Postingannya udah dikasih label? Kalau udah, apa postingan dengan label tersebut udah lebih dari satu?
  • Syukma Groups
    8/9/19
    Profil: https://www.blogger.com/profile/00654438512234548260
    itu css nya kenapa tidak berfungsi di blog saya ya mbak https://www.syukmagroups.com
  • admin
    1/9/19
    Profil: https://www.blogger.com/profile/14351304471144750208
    ntap mantap
  • Assam Government Job
    31/8/19
    Profil: https://www.blogger.com/profile/12164223346743923064
    hay dear how can i remove bullet points. from related post script ??????
  • Admin
    20/8/19
    Profil: https://www.blogger.com/profile/13827475714419678233
    min kalo saya edit lagi css nya bolehkan?
    • Igniel
      21/8/19
      Profil: https://www.blogger.com/profile/09199170379661896200
      Boleh kok.
  • Gerhana Sangkala
    18/8/19
    Profil: https://www.blogger.com/profile/15977337664529435407
    untuk merubah warna tulisan related post mana yg harus dirubah?
  • The Julak
    5/8/19
    Profil: https://www.blogger.com/profile/14475568296585302055
    KAYANYA bentrok sm related post di bawah. thumbnail related post asli hilang.
  • SYBER
    22/7/19
    Profil: https://www.blogger.com/profile/16306120554651388837
    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
    • Igniel
      22/7/19
      Profil: https://www.blogger.com/profile/09199170379661896200
      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.
  • Dimas Wahyu
    30/6/19
    Profil: https://www.blogger.com/profile/14695418632804285623
    saya ada 3 itu yang mana hu?
  • GoSEO.id
    20/6/19
    Profil: https://www.blogger.com/profile/06140662608829657385
    Maaf kk mau nanya..
    Saya sudah memasukkan kodenya..
    artikel sudah ada 10, tetapi Baca Juga nya belum muncul..
    itu gimana yaa kk?
    • Igniel
      22/7/19
      Profil: https://www.blogger.com/profile/09199170379661896200
      Baca disini ya:
      https://www.igniel.com/2019/01/artikel-terkait-tengah-post.html?showComment=1563804970132#c5150579271522409251
  • Sem
    16/6/19
    Profil: https://www.blogger.com/profile/06500227141064544117
    kak, biar related pots nya bisa dinaikin dikit harus diubah apanya ya?
    terima kasih
    • Igniel
      17/6/19
      Profil: https://www.blogger.com/profile/09199170379661896200
      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
    • Sem
      17/6/19
      Profil: https://www.blogger.com/profile/06500227141064544117
      nah itu maksud saya kak,, wkwk
      terima kasih
  • Guru Vokasi
    14/6/19
    Profil: https://www.blogger.com/profile/13239911780861010847
    Membuat baca juiga seperti bloga anda bagaimana, bisa minta tutoriallnya
    • Igniel
      17/6/19
      Profil: https://www.blogger.com/profile/09199170379661896200
      Ada disini:
      https://www.igniel.com/2019/01/artikel-terkait-tengah-post.html
  • kandangFILE
    4/5/19
    Profil: https://www.blogger.com/profile/14356649186448449505
    kok punya gwe random ya gan.kadang diatas kadang dibawah ditengah jarang
  • Ridwan X
    6/4/19
    Profil: https://www.blogger.com/profile/14162168077100836709
    Request untuk amp
  • Bunga Indah
    17/3/19
    Profil: https://www.blogger.com/profile/11586697912105579583
    Hai kak igniel
  • Anonim
    Anonim 15/3/19
    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 ;)
  • Berbagi Tutorial Online
    19/1/19
    Profil: https://www.blogger.com/profile/04152661055432787556
    eror gan ada pesan
    Kesalahan saat mengurai XML, baris 4497, kolom 3: The element type "bodi" must be terminated by the matching end-tag ""
    • Igniel
      19/1/19
      Profil: https://www.blogger.com/profile/09199170379661896200
      Ada kode yang kehapus tuh. Cek lagi kodenya.