Cara Membuat Artikel Terkait (Baca Juga) Otomatis di Tengah Postingan

Banyak para blogger yang membuat artikel terkait (baca juga) di tengah postingan blognya. Ini memang sangat bermanfaat, salah satu nya yaitu untuk Menurunkan Nilai Bounce Rate Blog. jadi ketika pengunjung memasuki salah satu artikel blog kita. Mereka akan melihat artikel lainnya yang masih satu topik "relevan", dengan cara tersebut tentu pengunjung akan lebih mengeksplor isi blognya.

Contohnya seperti di blog ini, Saya membuat artikel terkait di tengah postingan blog, dengan judul Baca Juga, bisa Anda lihat ke bawah.

Ada beberapa template yang sudah mempunyai fitur seperti ini,namun jika template yang Anda gunakan tidak mempunyainya, jangan khawatir karena pada kali ini Saya akan memberikan cara membuat artikel terkait (baca juga) di tengah postingan blog yang keren.

Cara Membuat Artikel Terkait (Baca Juga) di Tengah Postingan Blog

1. Masuk ke Dashboard Blogger

2. Masuk ke Tema > Edit HTML

3. Letakkan kode dibawah ini, tepat diatas kode </head>

<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

4. Cari dan ganti kode <data:post.body/> dengan kode dibawah 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>

5. Biar tampilannya lebih ganteng seperti Admin, letakkan kode CSS dibawah ini tepat diatas 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}

6. Simpan templatenya

Untuk mengetahui hasilnya, silahkan masuk ke salah satu artikel dan lihat di tengah - tengah nya. Jika berhasil maka artikel terkait (baca juga) akan muncul. Namun jika masih belum muncul, coba Anda ulangi langkah ke 4, karena kode <data:post.body/> dalam setiap template itu terdapat banyak, coba ganti satu persatu sampai berhasil.

Mungkin itulah cara membuat artikel terkait seperti baca juga ditengah postingan blog. Semoga bermanfaat, salam blogger...

Bagikan Artikel ini

Berlangganan update artikel terbaru via email: