Menampilkan Artikel Terkait atau Related Post sekarang sudah menjadi hal yang umum ada di setiap Blog, sepertinya keberadaan Artikel Terkait ini sudah tidak bisa dipisahkan lagi dengan Blog.
Karena dengan salah satu cara inilah Page View blog akan meningkat (dampaknya akan kepada Alexa Ranking) lalu dengan cara ini pula (read: Artikel Terkait) para pengunjung Blog akan bisa menemukan artikel lainya yang masih dalam 1 kategori atau label.maka pada kesempatan kali ini saya ingin share kepada teman-teman semua tentang Cara Membuat Artikel Terkait (Related Post) di Sidebar Blog.
Sidebar blog merupakan salah satu tempat yang saya pikir sangat strategis apabila dipasang dengan Artikel Terkait ini karena akan terlihat terlebih dahulu ketimbang ditaruh di bawah postingan (tetapi dua cara itu sama baiknya, selera).
Ok, bagi teman-teman yang mau membuat Artikel Terkait di Sidebar Blog, silahkan ikuti langkah-langkah di bawah ini:
1. Login ke akun blogspot,
2. Klik Design/Rancangan >> Edit HTML >> Klik Expand Templates Widget,
3. Cari kode </head> dan copy kode di bawah ini lalu pastekan persis di atas kode tadi:
<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. Lanjutkan dengan mencari 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:loop>
</b:if>
5. Ganti kode tersebut dengan kode di bawah 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>
Ket: Sebelum di save kode max-results=10 (ini adalah kode untuk menampilkan berapa banyak artikel yang akan ditampilkan perlabel), bisa teman-teman ubah semisal hanya 5 atau 8.
6. Save Templates (belum selesai...)
7. Selanjutnya, masuk ke Page Element >> Add a Gadget >> HTML/JavaScript >> copy kode di bawah ini dan masukkan ke dalam konten HTML/Javascript:

<script type="text/javascript">
removeRelatedDuplicates();
printRelatedLabels();
</script>
8. Jika sudah klik Save dan lihat semua perubahannya.
Seperti itulah Cara Membuat Artikel Terkait (Related Post) di Sidebar Blog, semoga ini bisa bermanfaat dan selamat mencoba. Salam
Lihat juga artikel lainnya :)
- Cara Memasang Buku Tamu Di Blog
- Cara Membuat Banner Animasi di blog
- Membuat Tulisan dan Gambar (Float Image) Berjalan di Blog
- Buat+Pasang Tanda Tangan di Setiap Bawah Posting
- MouseOver (Efek Blur) Pada Semua Gambar
- Cara Menghilangkan Border pada Gambar
- Cara Mengganti Tulisan "Poskan Komentar"
- Merubah Lebar Kolom Kotak Komentar
- Cara Mudah Mencari Pengguna Blogger Satu Wilayah
- Membuat Artikel Terkait Disertai Thumbnails - Marquee (Berjalan)
- Membuat Artikel Terkait Disertai Gambar/Thumbnails
- Beberapa Cara Menambah Image Background
- Menempatkan Status YM Di Gadget Profile Blog
- Cara Menampilkan Status YM di Blog
- Membuat+Pasang Favicon di Address Bar Blog
- Membuat Judul Pada Adress Bar Makin Mantap
- Membuat Tulisan Judul Blog Berjalan Pada Adress Bar
- Menghilangkan Tulisan "Tampilkan Entri Lawas"
- Menggunakan Font Keren di Halaman Web Blog dengan Google WebFont
- Buku Tamu Bergaya Absolute Vertical Sliding Panel
- Cek Kecepatan Websitemu Disini
- Mengganti Tampilan Cursor (Mouse)