Panduan Cara Membuat Baca Juga (Related Post) Di Tengah Posting Blog Secara Otomatis
Tutorial.web.id – Cara Mudah Membuat Baca Juga (Related Post) Di Tengah Postingan Blog Secara Otomatis. Adanya related posts atau artikel terkait pada blog memang dianggap sebagai cara terbaik untuk menurunkan score bounce rates dari blog. Karena pengunjung dipancing untuk tidak segera meninggalkan blog dengan cara menampilkan artikel yang terkait dengan artikel yang sedang dibaca.
Oleh karena itu, pada postingan kali ini, saya akan membahas tentang cara membuat related posts secara otomatis berdasarkan “tag” tapi yang berada di dalam postingan, bukan di akhir artikel. Biasanya diawali dengan kata “Baca Juga”.
Seperti ini contohnya.
Sebaiknya sebelum mempraktekkan cara ini, backup terlebih dahulu template kamu untuk menghindari hal-hal yang tidak diinginkan sehingga kamu tetap memilikinya data cadangan Kalau sampai anda Salah Menempatkan kode.
Langkah selanjutnya...
Cari kode <data:post.body/>
Biasanya anda akan menemukan 2 atau 3 Kode tersebut, Pastekan Ke nomor 2, kalo belum berubah coba ke nomor 3, Hapus kode tersebut dan ganti dengan kode berikut ini.
Kemudian salin Kode dibawah ini dan Letakkan di atas kode </head>
Sedangkan untuk mempercantik tampilan, silakan sisipkan kode CSS berikut ini, dan letakkan di atas kode ]]></b:skin>
Jika sudah, langsung simpan template..
Dan lihat hasilnya. Selamat mencoba dan semoga berhasil.
Oleh karena itu, pada postingan kali ini, saya akan membahas tentang cara membuat related posts secara otomatis berdasarkan “tag” tapi yang berada di dalam postingan, bukan di akhir artikel. Biasanya diawali dengan kata “Baca Juga”.
Seperti ini contohnya.
Sebaiknya sebelum mempraktekkan cara ini, backup terlebih dahulu template kamu untuk menghindari hal-hal yang tidak diinginkan sehingga kamu tetap memilikinya data cadangan Kalau sampai anda Salah Menempatkan kode.
Langkah selanjutnya...
Cari kode <data:post.body/>
Biasanya anda akan menemukan 2 atau 3 Kode tersebut, Pastekan Ke nomor 2, kalo belum berubah coba ke nomor 3, Hapus kode tersebut dan ganti dengan kode berikut ini.
<!-- Baca Juga -->
<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>
<!-- Baca juga end -->
Kemudian salin Kode dibawah ini dan Letakkan di atas kode </head>
<!-- Baca juga -->
<b:if cond='data:blog.pageType == "item"'>
<script type='text/javascript'>
//<![CDATA[
var relatedTitles = new Array(); var relatedTitlesNum = 0; var relatedUrls = new Array(); function related_results_labels(json) { for (var i = 0; i < json.feed.entry.length; i++) { var entry = json.feed.entry[i]; relatedTitles[relatedTitlesNum] = entry.title.$t; for (var k = 0; k < entry.link.length; k++) { if (entry.link[k].rel == 'alternate') {relatedUrls[relatedTitlesNum] = entry.link[k].href; relatedTitlesNum++; break;}}}} function removeRelatedDuplicates() { var tmp = new Array(0); var tmp2 = new Array(0); for(var i = 0; i < relatedUrls.length; i++) { if(!contains(tmp, relatedUrls[i])) { tmp.length += 1; tmp[tmp.length - 1] = relatedUrls[i]; tmp2.length += 1; tmp2[tmp2.length - 1] = relatedTitles[i];}} relatedTitles = tmp2; relatedUrls = tmp;} function contains(a, e) { for(var j = 0; j < a.length; j++) if (a[j]==e) return true; return false;} function printRelatedLabels() { var r = Math.floor((relatedTitles.length - 1) * Math.random()); var i = 0; document.write('<ul>'); while (i < relatedTitles.length && i < 20) { document.write('<li><a href="' + relatedUrls[r] + '">' + relatedTitles[r] + '</a></li>'); if (r < relatedTitles.length - 1) { r++; } else { r = 0;} i++;} document.write('</ul>');}
//]]>
</script>
</b:if>
<!-- Baca Juga end -->
Sedangkan untuk mempercantik tampilan, silakan sisipkan kode CSS berikut ini, dan letakkan di atas kode ]]></b:skin>
/*Baca Juga Tengah Postingan herry*/
.post-terkait{position:relative;display:inline-block;border:1px solid #DDD;margin:20px 0}
.post-terkait h4{background-color:#FFF;position:absolute;margin-left:30px;margin-top:-14px;padding:0 15px;border:1px solid #DDD font-size: 17px;}
.post-terkait ul{padding:7px;list-style:none}
.post-terkait ul{font-family:fontawesome;content:"\f105";padding-right:10px}
.post-terkait li{border-radius:5px;border-bottom:1px solid rgbaundefined227,227,227,0.33);line-height:1.7em}
Jika sudah, langsung simpan template..
Dan lihat hasilnya. Selamat mencoba dan semoga berhasil.
Test Sebarkan Berita
BalasHapus