Cara Membuat Related Posts Di Sidebar Blog - Fitur atau gadget related posts atau artikel terkait pada sebuah blog bisa dikatakan sebaagai fitur atau widget wajib. Banyaak sekali yang menyaraankan 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 diletakkaan di sidebar blog.
Apa sih related posts?
Seperti namanya, related posts atau related articles berarti adalaah daftar posting atau artikel yang masih berkaaitan dengan artikel yang sedang dibaca oleh pengunjung.
sama seperti membuaat breadcrumbs navigation, related posts atau related articles bisa memudahkaan pengunjung untuk mencari informasi yang dibutuhkaan, selain itu fitur yang juga disebut sebagai artikel terkaait ini juga bisa membuat pengunjung betah berlama-laama untuk membaca postingaan 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 != "true"'>,</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 != "true"'>,</b:if>
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=10"' 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 tinggaal nambahin widget atau gadget HTML ajah. Klik page elements dan add a new HTML/Javascript widget pada posisi yaang sobat suka. Beri judul Related Posts / Articles pada Tiltle . kemudian copy paste script di bawah ini paada 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..
.gif)
.gif)
