Cara Membuat Popular Post Widget

Artikel ini akan membahas cara pemasangan widget yang akan menampilkan tulisan-tulisan teratas dan terpopuler yang ada di blog kita. Widget yang dimaksud biasa disebut dengan Popular Post Widget, Tulisan Teratas, atau Tulisan Terpopuler. Jadi, bagi teman-teman yang berminat memasang dan mempercantik blog anda dengan Widget ini, silakan ikuti langkah-langkah berikut ini :

1. Login ke account blogger anda


2. Masuklah ke Tata Letak-->Elemen Halaman-->Tambah Gadget


3. Pilih HTML/Javascript dan copy kode berikut :
   
   <script type="text/javascript">
function pipeCallback(obj) {
document.write('<ol style="text-transform: capitalize;">');
var i;
for (i = 0; i < obj.count ; i++)
{
var href = "'" + obj.value.items[i].link + "'";
var item = "<li>" + "<a href=" + href + ">" + obj.value.items[i].title + "</a> </li>";
document.write(item);
}
document.write('</ol>');
}
</script>
<script src="http://pipes.yahoo.com/pipes/pipe.run?_render=json&_callback=pipeCallback&_id=1cf38ae68efbe859c4ba1ee239cec099&url=http%3A%2F%2Fnama_blog.blogspot.com&num=5" type="text/javascript"></script>
<a href="http://ilalangpagi.blogspot.com" target="_blank"><span style="font-size: xx-small;">Popular Posts Widget</span></a>
   
   Keterangan :
   Ganti tulisan berwarna merah dengan link blog anda tanpa http:// (Misal link blog anda adalah http://ilalangpagi.blogspot.com, ganti tulisan berwarna merah dengan ilalangpagi).


4. Simpan dan lihat hasilnya.

Kode di atas akan menampilkan link/judul posting anda dengan format :
Posting Pertama (16 comments)
Posting Kedua (11 comments)

Jika anda ingin menampilkannya dengan format :
Posting Pertama (16)
Posting Kedua (11)

Ganti kode di atas dengan Kode berikut :

<script type="text/javascript">
function pipeCallback(obj) {
document.write('<ol style="text-transform: capitalize;">');
var i;
for (i = 0; i < obj.count ; i++)
{
var href = "'" + obj.value.items[i].link + "'";
var item = "<li>" + "<a href=" + href + ">" + obj.value.items[i].title + "</a> </li>";
document.write(item);
}
document.write('</ol>');
}
</script>
<script src="http://pipes.yahoo.com/pipes/pipe.run?_render=json&_callback=pipeCallback&_id=a7d3195528df5e96181a3d2712266226&url=http%3A%2F%2Fnama_blog.blogspot.com&num=5" type="text/javascript"></script>
<a href="http://ilalangpagi.blogspot.com" target="_blank"><span style="font-size: xx-small;">Popular Posts Widget</span></a>

Dan jika anda ingin menampilkan tanpa jumlah komentar, gantilah dengan kode berikut :

<script type="text/javascript">
function pipeCallback(obj) {
document.write('<ol style="text-transform: capitalize;">');
var i;
for (i = 0; i < obj.count ; i++)
{
var href = "'" + obj.value.items[i].link + "'";
var item = "<li>" + "<a href=" + href + ">" + obj.value.items[i].title + "</a> </li>";
document.write(item);
}
document.write('</ol>');
}
</script>
<script src="http://pipes.yahoo.com/pipes/pipe.run?_render=json&_callback=pipeCallback&_id=1a1c6e4e6d4f148e3650fda46910e15f&url=http%3A%2F%2Fnama_blog.blogspot.com&num=5" type="text/javascript"></script>
<a href="http://ilalangpagi.blogspot.com" target="_blank"><span style="font-size: xx-small;">Popular Posts Widget</span></a>

Selamat Mencoba...