Membuat Artikel Terkait/Related Post di Sidebar blog

Membuat Artikel Terkait/Related Post di sidebar - Seringkali kita menjumpai tutorial cara membuat artikel terkait atau related post,tetapi biasanya artikel terkait itu berada di atas kolom komentar seperti artikel saya yang satu ini.
Tetapi yang akan saya bahas saat ini adalah cara memasang artikel terkait/Related Post di sidebar .


Penasaran ... Langsung aja ke TKP

1. Pertama Login ke blog - Rancangan - Edit HTML
2. Centang Expand Widget dan cari kode </head>
3. Letakan kode dibawah ini tepat di atas 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. Setelah itu silahkan anda cari kode

<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. lalu anda sisipkan kode berikut tepat setelah </b:if> dan sebelum </b:loop> 

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

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

6. Save 

Sabar dulu sob,belum selesai ...

Masih ada satu langkah lagi untuk menampilkan widget artikel terkait ini di sidebar

Cara Pemasangannya

1. Masuk ke edit Laman

2. Pilih Tambah Gadget - HTML/JavaScript

3. Copy kode di bawah dan masukan kedalamnya

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

4. Beri judul Artikel Terkait dan Save

Nah agar widget ini tidak tampil di di halaman Home blog anda perlu menambahkan sedikit kode

1. Masuk ke Rancangan - Edit HTML - Centang Expand Widget

2. Cari kode widget anda tadi

Kodenya mirip seperti ini

<b:widget id='HTML3' locked='false' title='Artikel Terkait' 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>

3. Setelah itu anda sisipkan kode <b:if cond='data:blog.pageType == "item"'> tepat dibawah kode <b:includable id='main'>

dan kode if </b:if> tepat diatas </b:includable>

Jadinya akan seperti ini

<b:widget id='HTML3 locked='false' title='Artikel Terkait' 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. Save

Selamat sekarang anda sudah mempunyai Artikel Terkait/Related Post di sidebar anda

Semoga bermanfaat ...