Cara Memasang Related Post Di Sidebar

Minggu, September 13, 2009

Ketika kita membaca artikel di sebuah blog, kadang kita akan mencari topik yang berkaitan dengan artikel yang sedang kita baca. Nah untuk itu, kita sebagai blogger sebaiknya memasang topik yang berkaitan dengan artikel yang kita tulis, agar pembaca tidak kebingungan mencari topik yang berhubungan dengan artikel yang sedang dibacanya.

Biasanya topik yang berkaitan ini disebut sebagai related post. Banyak blog memasang related post ini di akhir artikel. Pada tutorial kali ini kita akan mencoba memasang related post di sidebar blog.

Cukup mudah memasangnya, yang sulit adalah membuat scriptnya. Script ini saya ambil dari o-om.com.

Berikut ini langkah-langkah untuk memasang related post di sidebar blog.

Langkah Pertama.
Masuk ke dasboard blog anda > Layout > Edit HTML.
Anda tidak perlu mencentang Expand Widget Template.

Letakan kode berikut 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>

Kemudian simpan.

Langkah Kedua.
Masih di edit HTML, sekarang anda centang Expand Widget Template, dan temukan 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:loop>
</b:if>

Jika sudah ketemu, ganti kode diatas dengan 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: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>

Kemudian simpan.

Langkah Ketiga.
Masuk ke Template > Elemen Halaman > Tambah Elemen > Pilih elemen HTML dan berilah judul Related Post.
Anda bisa memilih tempat dimana related post ini akan diletakan. Jika sudah, letakan kode berikut :

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

Lalu simpan.

Langkah Keempat.
Agar related post ini tidak muncul di halaman utama dan label, anda perlu sedikit memodifikasi widget ini.

Masuk kembali ke edit HTML. Centang expand widget template, dan temukan kode ini :
(agar mudah menemukannya tekan ctrl+f lalu ketikan related post)

<b:widget id='HTML4' locked='false' title='Related Post' type='HTML'>
<b:includable id='main'>
<!-- 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:includable>
</b:widget>

Setelah ketemu, ganti kode tersebut dengan kode dibawah ini :

<b:widget id='HTML4' locked='false' title='Related Post' 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>

Simpan dan selesai. Selamat mencoba.