Cara Menampilkan Related Post ( Post yang berkaitan )

Sebagian besar blog atau website sudah malah wajib memasang widget ini, yaitu widget post yang berkaitan, yaitu sebuah bagian diblog yang menampilkan post lain yang masih dalam satu kategori yang sama. Jadi dapat mempermudah pembaca untuk mencari post yang diinginkan.

Untuk mempermudahnya, letakkan dibawah posting atau kotak komentar dibawah post. Jadi selesai membaca, komentar, baca lagi. Dan bisa memanjakan pengunjung blog anda.

Tidak lupa dengan tutorialnya kan ? OK, daripada membuat anda penasaran, langsung saja ke TKP :

Langkah 1
Widget ini membutuhkan pengeditan template, jadi langsung saja ke Edit HTML di tab layout. Jangan lupa beri tanda cek pada expand my template widget. Lalu cari kode </head> dan pasang kode dibawah ini diatas kode </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>

Jangan lupa disimpan.

Langkah 2
Eitz .... :p jangan beranjak dari sini, masih di Edit HTML anda, lalu cari kode ini :

<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&amp;callback=related_results_labels&amp;max-results=10"' type='text/javascript'/>
</b:if>
</b:loop>
</b:if>

Nah cari yang tidak dicetak tebal, lalu tambahkan kode yang dicetak tebal, cari kode yang semirip mungkin ya .... :D dan disimpan lagi ....


Langkah 3
Nah sekarang membuat teks HTML untuk menempatkan link - link post yang berkaitan tersebut. Tambah elemen halaman - HTML, dan beri judul misal 'Artikel yang berkaitan' lalu isi dengan teks berikut ini :

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

Langkah 4
Balik lagi di EDIT HTML kali ini untuk mencari widget 'Artikel yang berkaitan'. Jangan lupa beri tanda cek pada expand my template widget. Lalu cari kode berikut : ( kalau bingung cari titlenya saja pasti ketemu ! )

<b:widget id='HTML...' locked='false' title='Artikel yang berkaitan' 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>

Tambahkan kode yang dicetak tebal, persis seperti teks diatas. Ini berguna agar widgetnya tidak muncul dihalaman utama. dan disimpan

Langkah 5
Berdoalah semoga berhasil .... :D dan happy blogging !


Tidak lupa saya ucapkan terima kasih buat om Agus yang sudah menulis terlebih dahulu tutorial ini.