Memasang Artikel Terkait (Related Post) di Tengah Postingan Blogger

Cara membuat dan menyisipkan artikel terkait atau related post dengan label di tengah postingan Blogger tanpa merusak tampilan dan paragraf template.
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.

70
Memasang Artikel Terkait (Related Post) di Tengah Postingan Blogger
Memasang Artikel Terkait (Related Post) di Tengah Postingan Blogger
Cara membuat dan menyisipkan artikel terkait atau related post dengan label di tengah postingan Blogger tanpa merusak tampilan dan paragraf template.
Bagikan ke aplikasi lainnya:
  • WhatsApp
  • Telegram
  • Facebook
  • Twitter
  • Pinterest
  • LinkedIn

Artikel Terkait

70 komentar

  • Menulis kode gunakan <i>kode</i> (kode harus di-parse)
  • Menulis dalam syntax highlighter gunakan <em>kode panjang</em> (kode harus di-parse)
  • Menyisipkan gambar gunakan <strong>URL GAMBAR</strong> (ekstensi .jpg, .png, .gif, .webp, .ico)
  • Centang Beri Tahu Saya untuk mendapatkan notifikasi ke email saat ada yang membalas komentar.
  • Widodo Groho Triatmojo
    31 Juli, 2023
    Profil: https://www.blogger.com/profile/13333568819311578368
    Udah aku terapin kok gak muncul related post ya
  • sanmuranews.com
    18 Juli, 2023
    Profil: https://www.blogger.com/profile/15114456580188287013
    Siap coba
  • Ronald
    08 Mei, 2023
    Profil: https://www.blogger.com/profile/04282132247797547248
    Terima kasih... sesuai...
  • Eva
    19 April, 2023
    Profil: https://www.blogger.com/profile/08710122825565061932
    coba hu
  • deamerina
    25 September, 2022
    Profil: https://www.blogger.com/profile/04698298271331880417
    kok aku nggak ada script ya?
  • Redaksi
    27 Mei, 2022
    Profil: https://www.blogger.com/profile/16442421554731835177
    kok punyaku letaknya paling bawah? biar posisinya di tengah gimana?
  • Jendela Belajar Kita
    06 Maret, 2022
    Profil: https://www.blogger.com/profile/14027235972383757687
    Sukses bang.... bisa di cek di blog ku bang
  • Sutrisno
    08 Februari, 2022
    Profil: https://www.blogger.com/profile/09964536894786346035
    kok gambarnya gak muncul yah
  • dwy
    25 Januari, 2022
    Profil: https://www.blogger.com/profile/00017329317328752843
    Hi... klo mau yg gak ada label juga tampil di related post, gimana..?
    • Igniel
      28 Januari, 2022
      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 Desember, 2021
    Profil: https://www.blogger.com/profile/06938275360112925405
    terimakasihh pencerahannya mbak
  • Mohd Purwadi
    07 November, 2021
    Profil: https://www.blogger.com/profile/17696600477446226706
    Keren Mbak, thanks tutorialnya
  • Boy Paskand
    30 Agustus, 2021
    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 Agustus, 2021
      Profil: https://www.blogger.com/profile/09199170379661896200
      Template blog Igniel tidak dijual kak.
  • Mujib Maulana
    26 Juli, 2021
    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
    04 Juli, 2021
    Profil: https://www.blogger.com/profile/09610401324538176582
    Terima kasih. Sudah saya pasang dan berhasil
  • Cah Samin
    20 Maret, 2021
    Profil: https://www.blogger.com/profile/11116753106951062462
    gan, kalo diatas related dikasih iklan.. gimana caranya?? makasih
  • Dede Rudiansah
    14 Maret, 2021
    Profil: https://www.blogger.com/profile/08687263435710435736
    Biar iklan (tengah) gak ikut masuk di kolom 'Baca Juga' gimana itu om?
  • Djefi Febian
    18 Februari, 2021
    Profil: https://www.blogger.com/profile/01677557629330387247
    terima kasih
  • Muhammad syafaat
    11 Januari, 2021
    Profil: https://www.blogger.com/profile/14775036980406818308
    Cara agar kelihatan di Postingannya gimana kak
  • Yeinie
    03 Januari, 2021
    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 Desember, 2020
    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 Oktober, 2020
    Profil: https://www.blogger.com/profile/07217488345166490786
    Gak bisa muncul kenapa?
  • Triyatni A.
    22 Agustus, 2020
    Profil: https://www.blogger.com/profile/06774455109021522162
    Terima kasih Kak. Berhasil masangnya
  • rippdunk_
    12 Agustus, 2020
    Profil: https://www.blogger.com/profile/10096749583718869128
    kak, kalau mau merubah tampilannya bagaimana? saya tampilannya biasa aja. kurang menarik kak.
  • Cahyo
    16 Juli, 2020
    Profil: https://www.blogger.com/profile/16643578768206704243
    cara ganti backgroundnya gimana kak? soalnya pas di tengah background sama jadi kaya bacaan selanjutnya gitu.
  • HadeHana
    03 Juni, 2020
    Profil: https://www.blogger.com/profile/12362092345402432515
    kok ga keluar ya kak
  • Eka Awaludin
    28 Mei, 2020
    Profil: https://www.blogger.com/profile/03027218065021816904
    Ga ada demo nya? Pengen liat dulu contoh nya.
    • Igniel
      28 Mei, 2020
      Profil: https://www.blogger.com/profile/09199170379661896200
      Blog yang sedang kamu kunjungi ini demonya. Cek di tengah postingan.
    • Eka Awaludin
      11 Juni, 2020
      Profil: https://www.blogger.com/profile/03027218065021816904
      Teh kalo pengen di tambahin thumbnail gmn? Apa ada tutorialnya?
  • Yudhistira  Bannepadang S.Kom
    23 Mei, 2020
    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 Mei, 2020
    Profil: https://www.blogger.com/profile/01265445773272875627
    saya ko gak berhasil gan, mohon saran nya gan.

    https://uyuhanbae.blogspot.com
  • Abdullah bin Akmal
    04 Mei, 2020
    Profil: https://www.blogger.com/profile/03848318308211321377
    Saya ada 3 di template saya, jadi ditaruh dimananya ya?
  • Ade Arif
    03 Mei, 2020
    Profil: https://www.blogger.com/profile/18060022403880421854
    untuk blog amp gimana ya kak penerapannya....
  • Pegiat Literasi.com
    27 Maret, 2020
    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 Maret, 2020
      Profil: https://www.blogger.com/profile/09199170379661896200
      Multi related post.
      https://www.igniel.com/2019/01/multiple-artikel-terkait-dalam-post.html
  • GGNews
    01 Maret, 2020
    Profil: https://www.blogger.com/profile/16306120554651388837
    Mbak cara menghapus related di tengah postingan bagaimana ya mbak caranya
  • tokocctv.net
    22 Januari, 2020
    Profil: https://www.blogger.com/profile/16816654241359539657
    mantap bos. work https://barbarcheat.com
  • Bintang F
    22 November, 2019
    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
      07 Desember, 2020
      Profil: https://www.blogger.com/profile/06050168441204379291
      iya sama, gimana caranya mbak igniel?
  • Bintang F
    20 November, 2019
    Profil: https://www.blogger.com/profile/18191951888130939653
    Thankyou gan berhasil! Sekalian saya minta izin ya untuk share kode nya, credit tidak dihilangkan:)
  • FLORES IDN
    01 November, 2019
    Profil: https://www.blogger.com/profile/12805225115299480784
    Komentar ini telah dihapus oleh FLORES IDN selaku penulis.
  • Rania Marhana
    15 Oktober, 2019
    Profil: https://www.blogger.com/profile/00851209717019944100
    Gimana caranya supaya saat postingan gk ada labelnya, related postya juga gk ditampilin?
  • HilmanFawwaz
    11 Oktober, 2019
    Profil: https://www.blogger.com/profile/03791719059201783148
    terima kasih, saya ijin menggunakanya bang, salam kenal dari saya https://pengin-pintar.blogspot.com/
  • Haryo
    18 September, 2019
    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 September, 2019
      Profil: https://www.blogger.com/profile/09199170379661896200
      Postingannya udah dikasih label? Kalau udah, apa postingan dengan label tersebut udah lebih dari satu?
  • Syukma Groups
    08 September, 2019
    Profil: https://www.blogger.com/profile/00654438512234548260
    itu css nya kenapa tidak berfungsi di blog saya ya mbak https://www.syukmagroups.com
  • admin
    01 September, 2019
    Profil: https://www.blogger.com/profile/14351304471144750208
    ntap mantap
  • Assam Government Job
    31 Agustus, 2019
    Profil: https://www.blogger.com/profile/12164223346743923064
    hay dear how can i remove bullet points. from related post script ??????
  • Admin
    20 Agustus, 2019
    Profil: https://www.blogger.com/profile/13827475714419678233
    min kalo saya edit lagi css nya bolehkan?
  • Gerhana Sangkala
    18 Agustus, 2019
    Profil: https://www.blogger.com/profile/15977337664529435407
    untuk merubah warna tulisan related post mana yg harus dirubah?
  • The Julak
    05 Agustus, 2019
    Profil: https://www.blogger.com/profile/14475568296585302055
    KAYANYA bentrok sm related post di bawah. thumbnail related post asli hilang.
  • GGNews
    22 Juli, 2019
    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 Juli, 2019
      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 Juni, 2019
    Profil: https://www.blogger.com/profile/14695418632804285623
    saya ada 3 itu yang mana hu?
  • Usuluddin, S.Kom
    20 Juni, 2019
    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 Juli, 2019
      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 Juni, 2019
    Profil: https://www.blogger.com/profile/06500227141064544117
    kak, biar related pots nya bisa dinaikin dikit harus diubah apanya ya?
    terima kasih
    • Igniel
      17 Juni, 2019
      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 Juni, 2019
      Profil: https://www.blogger.com/profile/06500227141064544117
      nah itu maksud saya kak,, wkwk
      terima kasih
  • Guru Vokasi
    14 Juni, 2019
    Profil: https://www.blogger.com/profile/13239911780861010847
    Membuat baca juiga seperti bloga anda bagaimana, bisa minta tutoriallnya
    • Igniel
      17 Juni, 2019
      Profil: https://www.blogger.com/profile/09199170379661896200
      Ada disini:
      https://www.igniel.com/2019/01/artikel-terkait-tengah-post.html
  • kandangFILE
    04 Mei, 2019
    Profil: https://www.blogger.com/profile/14356649186448449505
    kok punya gwe random ya gan.kadang diatas kadang dibawah ditengah jarang
  • Ridwan X
    06 April, 2019
    Profil: https://www.blogger.com/profile/14162168077100836709
    Request untuk amp
  • Bunga Indah
    17 Maret, 2019
    Profil: https://www.blogger.com/profile/11586697912105579583
    Hai kak igniel
  • Anonim
    Anonim15 Maret, 2019
    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 Januari, 2019
    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 Januari, 2019
      Profil: https://www.blogger.com/profile/09199170379661896200
      Ada kode yang kehapus tuh. Cek lagi kodenya.