Iklan Bawah Header

Cara Membuat Related Post (Baca Juga) Di Tengah Artikel

Cara Membuat Related Post (Baca Juga) Di Tengah Artikel - Dalam membuat related posts didalam sebuah artikel terkait pada blog memang sering dianggap sebagai cara yang paling terbaik untuk menurunkan score dalam bounce rates dari blog. Karena pengunjung biasanya  terpancing untuk tidak segera meninggalkan blog anda, dengan cara menampilkan artikel yang terkait dengan artikel yang sedang dibaca.


Oleh karena itu, didalam sebuah postingan kali ini saya akan membahas bagaimana cara membuat related posts secara otomatis berdasarkan “TAG” tapi yang berada di dalam postingan, bukan di akhir postingan. Seperti ini contohnya di blog saya ini yang ada sebuah kotak bertulisan "Baca Juga".

Nah, bagaimana sih cara membuatnya Cara Membuat Related Post (Baca Juga) Di Tengah Artikel, simak artikel berikut :

  • kamu harus meletakkan kode berikut ini tepat di atas kode </head>.

<div expr:id='"post1" + data:post.id'/>
<div class='post-terkait'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=3"' type='text/javascript'/>
</b:if>
</b:loop>
</b:if>
<h4>Baca Juga</h4>
<script type='text/javascript'>
removeRelatedDuplicates();
printRelatedLabels();
</script>
</div>
<div expr:id='"post2" + data:post.id' class='artbody' itemprop='articleBody description'><data:post.body/></div>
<script type='text/javascript'>
var obj0=document.getElementById("post1<data:post.id/>");
var obj1=document.getElementById("post2<data:post.id/>");
var s=obj1.innerHTML;
var t=s.substr(0,s.length/3);
var r=t.lastIndexOf("<br>");
if(r>0) {obj0.innerHTML=s.substr(0,r);obj1.innerHTML=s.substr(r+4);}
</script>
/blockquote>

  • Tapi sebelumnya itu, sebaiknya kamu mem-backup template kamu terlebih dahulu untuk menghindari hal - hal yang tidak diinginkan sehingga kamu tetap memilikinya data cadangannya.
  • Letakkan kode tersebut tepat diatas kode </head>.
  • Selanjutnya Cari kode disamping ini <data:post.body/>
  • Hapus kode tersebut dan ganti dengan kode berikut ini :


<div expr:id='"post1" + data:post.id'/>
<div class='post-terkait'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=3"' type='text/javascript'/>
</b:if>
</b:loop>
</b:if>
<h4>Baca Juga</h4>
<script type='text/javascript'>
removeRelatedDuplicates();
printRelatedLabels();
</script>
</div>
<div expr:id='"post2" + data:post.id' class='artbody' itemprop='articleBody description'><data:post.body/></div>
<script type='text/javascript'>
var obj0=document.getElementById("post1<data:post.id/>");
var obj1=document.getElementById("post2<data:post.id/>");
var s=obj1.innerHTML;
var t=s.substr(0,s.length/3);
var r=t.lastIndexOf("<br>");
if(r>0) {obj0.innerHTML=s.substr(0,r);obj1.innerHTML=s.substr(r+4);}
</script>

  • Untuk mempercantik tampilan, sisipkan kode CSS berikut ini, dan letakkan di atas kode </style> atau ]]></b:skin>


.post-terkait {position:relative;background:#fff;padding:0;margin:10px 15px 0 0;float:left;width:165px;border:1px solid #1b71bc}
.post-terkait h4{background:#1b71bc !important;padding:5px 0 !important;margin:0;text-align:center !important;font-size:15px !important;font-weight:400;text-transform:uppercase;color:#fff !important}
.post-terkait ul {margin:0;padding:0}
.post-terkait ul li {list-style:none !important;padding:7px 0;margin:0 7px;border-bottom:2px dotted #ddd;line-height:1.4em !important;text-align:left !important}
.post-terkait ul li:last-child{border:none !important}
.post-terkait a {color:#1b71bc;font-size:13px !important}
.post-terkait a:hover {text-decoration:underline}

  • Jika sudah, silahkan simpan template tersebut dan lihat hasilnya.
Bagaimana Artikelnya ? mudah bukan, Cara Membuat Related Post (Baca Juga) Di Tengah Artikel ? Oke bro / sis cukup sampai disini ya pembahasan kita kali ini. Jika ada yang kurang di mengerti silakan kalian tanyakan pada kolom komentar dibawah.

1 Response to "Cara Membuat Related Post (Baca Juga) Di Tengah Artikel"

  1. Kamu yang katanya Suka Hoki & Hobi Bermain kartu? Buktikan Dirimu di Anapoker, Situs Penyedia permainan Kartu Secara Online di Seluruh Indonesia, dengan taruhan Chips Uang Rupiah Asli

    Mainkan - Menangkan - dan Raih Jackpot mencapai Puluhan Juta Rupiah, Bukan yang lain hanya di Anapoker

    Ingin daftar tanpa Biaya? Daftar Contact
    Whatsapp : 0852 2255 5128
    Line ID : agenS1288
    Telegram : agenS128

    Kunjungi Situs Games Online Uang Asli Terpercaya Lainnya :
    link alternatif sbobet

    sbobet alternatif

    login sbobet

    link sbobet

    sabung ayam online

    adu ayam

    casino online

    sabung ayam bangkok

    ayam laga birma

    poker deposit pulsa

    deposit pulsa poker

    deposit pulsa

    deposit pulsa

    deposit pulsa

    ReplyDelete

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel