Menampilkan Related Post/Artikel Terkait

Cara menampilkan Related Post/Artikel terkait pada sidebar blog sangat mudah teman, tinggal ikuti saja petunjuk berikut dengan benar, tapi hati2 agar script blog kalian tidak berantakan. ingat simpan dulu scipt dengan cara copy-paste dulu di sutu tempat, Download template kalian sendiri, atau lebih mudahnya expand template widget.

Lagkah I :
1. Login ke blog kalian, kemudian cari edit HTML.
2. Centang Expand Template Widget / Download Template kalian sendiri, yg mana saja boleh.
3. Letakkan Kode berikut sebelum 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>





4. Kemudian cari Kode script seperti dibawah 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>

5. Kemudian sisipkan Kode Script yang berwarna Biru seperti berikut diantara Kode script diatas :

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

6. Simpan Template dulu, proses mengedit HTML yg pertama sampai disini.

7. Sekarang kalian menuju ke Tata Letak, kemudian klik Tambah Gadget pada sidebar. untuk menempatkan Related Post nanti.

8. Pilih HTML/Javascript, kemudian masukkan Kode dibawah ini :

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

9. Beri sebuah judul lalu Simpan.

Sampai disitu sudah selesai pembuatan Related Post di sidebar. Namun artikel terkait akan selalu muncul di halaman depan blog, untuk membuat artikel terkait hanya muncul pada halaman postingan saja, maka harus mengubah beberapa kode lagi.



Langkah II

1. Klik Edit HTML.

2. Centang Expand Template Widget.

3. Cari kode berikut, dan sisipkan kode yang berwarna merah :


<b:widget id='HTML38' 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>

4. Kemudian Simpan Template

5. Dan untuk HTML38 dan Related Post , saya mengambil dari template saya, silahkan kalian sesuaikan dengan template dan judul Related Post/artikel terkait yang tadi sudah kalian buat.


sangat mudah bukan, selamat mencoba