Cara Membuat Related Post / Artikel Berada di Sidebar

Pada tutorial blog sebelumnya, saya memberikan tutorial mengenai Cara Buat Related Post atau Artikel Terkait, sekarang saya akan memberikan tutorial blog tentang Cara Buat Related Post atau Artikel Terkait juga akan tetapi antara Related Post pertama dengan yang Related Post yang sekarang beda. Dimana Letak bedanya? Related post sebelumnya tampil di bawah postingan atau artikel, Related Post sekarang tampil di Sidebar sebagai widget. Tanpa banyak basa basi, kita langsung praktik saja.

Cara buat Related Post di Sidebar:

• Login ke http://www.blogger.com/
• Pilih Rancangan dan klik Edit HTML
• Download template lengkap dulu untuk jaga-jaga kalau ada kesalahan.
• Beri tanda centang pada Expand Widget Template.
• Copy kode berikut di atas kode </head>

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

• Langkah selanjutnya, cari kode berikut :

<br /> <b:if cond='data:post.labels'><br /> <data:postLabelsLabel/><br /> <b:loop values='data:post.labels' var='label'><br /> <a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if><br /> </b:loop><br /> </b:if><br />

• Kalau sobat blogger sudah menemukan kode tersebut, HAPUS lalu ganti dengan kode di bawah ini

<br /> <b:if cond='data:post.labels'><br /> <data:postLabelsLabel/><br /> <b:loop values='data:post.labels' var='label'><br /> <a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if><br /> <b:if cond='data:blog.pageType == "item"'><br /> <script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=20"' type='text/javascript'/> </b:if> </b:loop> </b:if>

• Save template sobat.

Praktik belum selesai, masih ada proses yang harus kita lakukan lagi, yaitu kita menambahkan kode Java Script di dalam kolom widget : Untuk menambahkan kode tersebut di kolom widget, tentunya sobat blogger harus berada di layout - Klik Add a Gadget - HTML java Script dan paste kode di bawah ini di kolom yang tersedia

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

• Terakhir klik Simpan

Tidak menutup kemungkinan, proses yang terlalu panjang membuat sobat blogger kesulitan. Jadi mamfaatkan kolom di bawah ini untuk bertanya.

Baca tutorial menarik lainnya di bawah ini :

Widget Blog

• Recent Post Widget No Thumbnail
• Membuat Google Translate Bendera Berbayang
• Cara Membuat Salam Pembuka Blog
• Cara Buat Tulisan Berjalan / Effect Marquee di Blog
• Cara Memasang Facebook Like Badge
• Membuat Google Translate Sederhana Untuk Blog
• Kelopak Bunga Berguguran pada Blog
• Cara Memasang Burung Twitter Terbang
• Cara Buat Widget Berlangganan FeedBurner
• Menghitung Jumlah Kata/Karakter Teks
• Cara Membuat Recent Post Animasi
• Cara Buat Daftar Isi
• Cara Pasang Alexa Traffic Widget
• Menghubungkan Blog Dengan Halaman Google +
• Membuat Google Translate Pin Bendera
• Social Bookmarking Widget Yang Keren dan Terbaru
• Siapa dan Dari Mana Pengunjung Blog sobat?
• Cara Buat Search Box atau Kotak Pencarian di Blog
• Cara Memasang Floating Spoiler Menu di Blog
• Cara Memasang Hewan Piaraan di Blog
• Cara Memasang Widget Kalkulator Cinta di Blog
• Widget Follower Jejaring Sosial Keren
• Cara Pasang Widget Al-Qur'an pada Blog
• Membuat Google Translate Bendera Bergerak