Memasang Artikel Terkait Otomatis di dalam Postingan Blog

Tutorial kali ini yaitu seperti judul di atas. Anda tidak perlu lagi repot-repot untuk menulis kan artikel lainnya pada postingan anda secara manual, karena cara ini akan secara otomatis menampilkan artikel acak. Sering juga saya melihat hal seperti ini di pakai oleh website-website ternama seperti jalantikus.com dan lain-lain.

Dengan memasang Artikel Terkait ini pada postingan anda akan memudahkan para pengunjung untuk membaca artikel selanjutnya atau artikel lainnya. Cocok juga digunakan untuk publisher GA (Google Adsense).

Simak caranya sebagai berikut

1. Login Blogger

2. Template - Edit HTML

3. Simpan kode di bawah ini sebelum kode ]]></b:skin> atau </style>

/*RelatedPost*/
.post-terkait{display:block;position:relative;background:#fff;padding:0;margin:15px auto 20px;width:100%}.post-terkait h4{background:#07ACEC;padding:7px 10px;display:inline-block;font-size:12px;text-transform:uppercase;color:#fff;border-radius:3px;line-height:normal;border:0}.post-terkait h4:before{display:none}.post-terkait ul{margin:0;padding:0}.post-terkait ul li{list-style:none;padding:1px 0;line-height:1.5em}.post-terkait a{color:#07ACEC;font-size:13px}.post-terkait a:hover{color:#000;text-decoration:underline}

4. Taruh kode di bawah ini sebelum 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>

5. Cari kode  <data:post.body/> kemudian hapus dan ganti dengan kode di bawah 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>

Perhatikan <data:post.body/> pada blog anda. Biasanya kode ini terdapat lebih dari 1, maka anda coba satu per satu untuk melihat hasilnya.

6. Simpan template dan lihat hasilnya

Terimakasih telah membaca artikel ini semoga bermanfaat.