Cara membuat "Baca Juga" dalam postingan Blog

Oleh:   tulisanndeso tulisanndeso   |   10/12/2017 01:00:00 PM
Cara membuat Related Post - Membuat artikel terkait atau lebih populernya related post pada blog memang bisa dianggap sebagai cara terbaik untuk menurunkan score bounce rates dari blog. Hal ini membuat pengunjung dipancing untuk tidak segera meninggalkan blog dengan cara menampilkan artikel yang terkait dengan artikel yang sedang mereka baca.
Maka dari itu, pada tulisan artikel kali ini akan membahas mengenai cara membuat related posts secara otomatis berdasarkan “tag”, related post ini letaknya berada di dalam postingan, bukan di akhir artikel. Biasanya banyak juga yang menuliskan dengan kata “Baca Juga”.

Pasti anda juga sering melihat “Baca Juga” ini pada blog, seperti yang ada di blog ini juga. Sebaiknya, sebelum anda memulai membuat related post ini, backup terlebih dahulu template anda guna menghindari hal-hal yang tidak diinginkan (seperti error misalnya), sehingga anda tetap memiliki data cadangan untuk digunakan kembali.

Contohnya seperti dibawah ini :

Baca Juga JalanTikus

Langkah pertama, letakkan kode dibawah ini diatas </head> atau &lt;/head&gt;

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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>

Setelah anda selesai dengan langkah diatas, selanjutnya adalah cari kode <data:post.body/> atau &lt;data:post.body/&gt;

Hapus kode tersebut dan ganti dengan kode berikut ini :

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

Agar tampilannya lebih oke, sisipkan kode CSS berikut ini 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}

Simpan Template anda. Bagaimana? Cukup mudah bukan? Selamat mencoba dan semoga bermanfaat :)
Loading
Love This Article?

Tampilkan Komentar