Widget Top Komentator dengan Efek Cloud

Hai sobat, sebelumnya Andi-Techno telah memposting trik blogger yang berjudul Tiga Situs Terbaik Untuk Cek dan Optimasi Kecepatan Blog, nah kali ini saya akan share tutorial seputar widget blogger, yaitu Cara Membuat Widget Top Komentator dengan Efek Cloud. Untuk script top komentator ini saya menggunakan script dari bloggersentral.com ditambah yahoo pipes.

Penampakan Top Komentator:

                       Sebelah Kiri diurut berdasarkan Alpabet - Sebelah Kanan diurut berdasarkan Jumlah Komentar

Demo

Tutorial Widget Top Komentator Cloud:

1. Masuk Dashboard Blogger

2. Pilih Template, Lalu klik Edit HTML

3. Cari kode ]]></b:skin> gunakan ctrl+f untuk mencari kode tersebut, setelah ketemu letakkan kode css dibawah ini tepat diatas kode ]]></b:skin>

#xgentopcomment{text-align:justify;line-height:1.5;border:2px dotted #000;border-left:4px solid #ff7e00;padding:10px;border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;}

4. Klik simpan Template

5. Pilih Tata Letak / Layout, tambah widget HTML/Javascript, lalu masukkan kode dibawah ini di dalamnya

<!-- Top Commentators Cloud Start -->
<scrit type="text/javascript" src="https://x-genity.googlecode.com/svn/trunk/forshare/js/topcomentator.js">
<div id="xgentopcomment">
<script src="http://pipes.yahoo.com/pipes/pipe.run?
YourBlogUrl=http://andi-techno.blogspot.com
&Exclusions=Anonymous,Andi X-Gen
&ShowHowMany=20
&Order=frequency
&_callback=cCloud
&_id=cfa196644e1d6159c9183548c4b5e2f5
&_render=json"
type="text/javascript"></script>
</div>
<span style="font-size: 80%; float:right;margin-top:5px;"> <a href="http://andi-techno.blogspot.com/2013/03/widget-top-komentator-efek-cloud.html" target="_blank" title="pasang widget ini">Top Commentators</a> <a href="http://andi-techno.blogspot.com/" target="_blank">Widget</a></span><span style="font-style:italic;"></span>
<!-- Top Commentators Cloud End -->

6. Klik save / simpan dan lihat hasilnya :)

#Penting!

Pengaturan:

1. YourBlogUrl adalah url blog yang akan dimunculkan top komentatornya, ubah http://andi-techno.blogspot.com dengan link blog kamu

2. Exclusions adalah nama komentator yang tidak akan ditampilakan pada daftar top komentator, diatas saya memasukan Anonymous agar pengguna yang tidak terdaftar tidak akan ditampilkan dalam top komentator. Kamu dapat menambahkan nama pengguna lain yang tidak akan ditampilkan, pisahkan nama dengan koma tanpa spasi!

3. ShowHowMany adalah jumlah komentator yang akan ditampilkan dalam daftar top komentator, ubah angka 20 untuk mengatur value nya

4. Order adalah cara pengurutan daftar top komentator, terdapat dua pilihan yaitu frequency (berdasarkan jumlah komentar) dan alphabet (berdasarkan abjad)

Baiklah sobat, mungkin segini dulu bahasan kita tentang Cara Membuat Top Komentator dengan Efek Cloud ini.

Jika ada yang masih bingung silahkan komentar dan berikan masukkan untuk trik selanjutnya :)