Cara Menciptakan Related Post (Baca Juga) Di Tengah Artikel

Cara Membuat Related Post (Baca Juga) Di Tengah Artikel - Dalam menciptakan 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 alasannya yaitu itu, didalam sebuah postingan kali ini aku akan membahas bagaimana cara menciptakan related posts secara otomatis menurut “TAG” tapi yang berada di dalam postingan, bukan di final postingan. Seperti ini misalnya di blog aku 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 aba-aba berikut ini sempurna di atas aba-aba </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 kau mem-backup template kau terlebih dahulu untuk menghindari hal - hal yang tidak diinginkan sehingga kau tetap memilikinya data cadangannya.

• Letakkan aba-aba tersebut sempurna diatas aba-aba </head>.

• Selanjutnya Cari aba-aba disamping ini <data:post.body/>

• Hapus aba-aba tersebut dan ganti dengan aba-aba 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 aba-aba CSS berikut ini, dan letakkan di atas aba-aba </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 ? gampang bukan, Cara Membuat Related Post (Baca Juga) Di Tengah Artikel ? Oke bro / sis cukup hingga disini ya pembahasan kita kali ini. Jika ada yang kurang di mengerti silakan kalian tanyakan pada kolom komentar dibawah.

Sumber https://carasatuku.blogspot.com/

Berbagi :