Znipers Blog: Membuat Related Posts ala Purplemoggy

Related post adalah salah satu cara supaya posting-posting lama kita yang memiliki kemiripan dengan posting terbaru kita ikut terpanggil disaat pengunjung membaca posting terbaru kita tersebut. Walau teknik ini sudah sering dibahas namun saya yakin masih ada yang mencari-cari script ini ( Seperti saya.. ^_^! ). Maka dari itu saya merasa wajib untuk berbagi dengan para pengunjung blog ini maka jadilah posting ini. ( he3... padahal cuma untuk koleksi ).

Pertama-tama sebelum kita memulai tutorial ini, ada baiknya anda membuat backup template anda dulu, untuk menghindari apabila ada kesalahan yang tidak disengaja nantinya atau Merried Made By Accident ( MBA ).

1. Buka Template > Edit HTML, dan pastekan kode berikut diantara tag <head> dan </head>

<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>

Simpan !

2. Kemudian centang “Expand Widget”, dan temukan kode berikut:

<b:if cond='data:post.labels'>
      <data:postLabelsLabel/>
      <b:loop values='data:post.labels' var='label'>
        <a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
      </b:loop>
    </b:if>

Sisipkan dengan kode yang ber-Warna Biru berikut ini, sehingga menjadi....

<b:if cond='data:post.labels'>
      <data:postLabelsLabel/>
      <b:loop values='data:post.labels' var='label'>
        <a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
<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=10"' type='text/javascript'/>
</b:if>
      </b:loop>
    </b:if>

max-results, disini anda dapat mengatur berapa related post yang akan ditampilkan nantinya. Jangan lupa Simpan,

3. Sekarang masuk ke menu ”Page Element”, dan tambahkan widget baru ”HTML/Javascript” dengan title Related Post, isikan dengan kode berikut ini:

<script type="text/javascript">
removeRelatedDuplicates();
printRelatedLabels();
</script>

4. Kembali lagi ke Template > Edit HTML, centang lagi ”Expand widget”, dan temukan kode widget yang telah kita tambahkan tadi. Setelah ketemu, sisipkan kode berikut. Perhatikan kode dibawah ini, kode Warna Biru adalah kode yang disisipkan.

<b:widget id='HTML13' locked='false' title='Related Posts' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == "item"'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>