Cara Membuat Related Posts Di Sidebar Blog

Cara Membuat Related Posts Di Sidebar Blog - Fitur atau gadget related posts atau artikel terkait pada sebuah blog bisa dikatakan sebagai fitur atau widget wajib. Banyak sekali yang menyarankan untuk menambahkan related posts atau related articles, baik itu related posts dengan fungsi scroll, related posts yang simple, atau related posts dengan widget yang bisa diletakkan di sidebar blog.

Apa sih related posts?

Seperti namanya, related posts atau related articles berarti adalah daftar posting atau artikel yang masih berkaitan dengan artikel yang sedang dibaca oleh pengunjung.

sama seperti membuat breadcrumbs navigation, related posts atau related articles bisa memudahkan pengunjung untuk mencari informasi yang dibutuhkan, selain itu fitur yang juga disebut sebagai artikel terkait ini juga bisa membuat pengunjung betah berlama-lama untuk membaca postingan sobat. Dan yang lebih penting lagi, terkadang artikel terkait ini terekam lho oleh mbah google hehehe...

Cara membuat related posts di sidebar

Langkah2 untuk membuat related posts atau artikel terkait pada widget sidebar:

• Seperti biasa login pada blogger atau blogspot
• Pada halaman dashboard klik Design atau Rancangan
• Pilih Edit HTML dan centang Expand Template Widget (biasakan backup template dulu)
• Copy kode di bawah ini dan letakkan setelah tag </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>

• Cari kode berikut ini (Ctrl + F) biar cepat:


  <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 != &quot;true&quot;'>,</b:if>
</b:loop>
</b:if>

  Kalau sudah ketemu, ganti dengan kode berikut 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 != &quot;true&quot;'>,</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=10&quot;' type='text/javascript'/>
</b:if>
</b:loop>
</b:if>

• Save template. Yang berwarna merah itu adalah maximal related posts yang ditampilkan, bisa sobat ganti sesuka hati
• Kalau sudah, sekarang tinggal nambahin widget atau gadget HTML ajah. Klik page elements dan add a new HTML/Javascript widget pada posisi yang sobat suka. Beri judul Related Posts / Articles pada Tiltle . kemudian copy paste script di bawah ini pada kotak yg disediakan:

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

Selesai deh cara membuat related posts atau terkait pada sidebar :D Selamat mencoba dan semoga visitor selalu betah di blog sobat..

Title : Cara Membuat Related Posts Di Sidebar Blog
URL : http://blogedek.blogspot.com/2012/01/related-posts-artikel-terkait-sidebar.html
Jangan lupa untuk membagikan artikel Cara Membuat Related Posts Di Sidebar Blog ini jika bermanfaat bagi sobat.