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.

Berbagi :