Sebelumnya pernah saya bahas mengenai membuat widget top komentator dan keuntungannya, (baca: Membuat widget top komentator) namun widget ini masih bergaya standart, berupa list daftar pengkomentar biasa. Kali ini saya akan memberikan tutorial pembuatan widget top komentator bergaya cloud seperti halnya label. Trik ini saya dapat dari bloggersentral.Langsung saja untuk membuatnya silahkan ikuti tutorial di bawah ini:
1. Login ke blogger
2. Tata Letak
3. Add Gadget, pilih HTML/Javascript
4. Masukkan script di bawah ini
<!-- Top Commentators Cloud Start
(c) 2010 Blogger Sentral. Original code by http://bloggersentral.blogspot.com/. Do not remove this credit and the Make your own link at the bottom of the code.-->
<div style="text-align:justify;line-height:1.2;">
<script type="text/javascript">
function cCloud(feed) {
max = 0;
min = 10000;
//finding highest and lowest count
for (i=0;i<feed.count;i++)
{
ccCount = feed.value.items[i].commentcount * 1;
if (ccCount > max)
{
max = ccCount;
}
if (ccCount < min)
{
min = ccCount;
}
}
ccCountD = "";
display = "";
for (j=0;j<feed.count;j++)
{
ccdiff = feed.value.items[j].commentcount - min;
ccFontsize = 80 + (ccdiff * 100) / (max - min) + "%";
ccUrl = "'" + feed.value.items[j].authorurl + "'";
ccCountD = "(" + feed.value.items[j].commentcount + ")";//comment count
ccName = feed.value.items[j].title + ccCountD;
ccLName = "<a style='text-decoration:none;font-size:" + ccFontsize + "' href=" + ccUrl + " target='_blank'>" + ccName + " </a>";//clickable commentator name
display = display + ccLName;
}
document.write(display);
}
</script>
<script src="http://pipes.yahoo.com/pipes/pipe.run?
YourBlogUrl=http://bloggersentral.blogspot.com
&Exclusions=Anonymous,Greenlava
&ShowHowMany=20
&Order=alphabet
&_callback=cCloud
&_id=cfa196644e1d6159c9183548c4b5e2f5
&_render=json"
type="text/javascript"></script>
<span style="font-size: 80%; float:right;;margin-top:10px;"><a href="http://bloggersentral.blogspot.com/2010/02/top-commentators-cloud-widget.html" target="_blank">Make your own</a></span>
</div>
<!-- Top Commentators Cloud End -->
(c) 2010 Blogger Sentral. Original code by http://bloggersentral.blogspot.com/. Do not remove this credit and the Make your own link at the bottom of the code.-->
<div style="text-align:justify;line-height:1.2;">
<script type="text/javascript">
function cCloud(feed) {
max = 0;
min = 10000;
//finding highest and lowest count
for (i=0;i<feed.count;i++)
{
ccCount = feed.value.items[i].commentcount * 1;
if (ccCount > max)
{
max = ccCount;
}
if (ccCount < min)
{
min = ccCount;
}
}
ccCountD = "";
display = "";
for (j=0;j<feed.count;j++)
{
ccdiff = feed.value.items[j].commentcount - min;
ccFontsize = 80 + (ccdiff * 100) / (max - min) + "%";
ccUrl = "'" + feed.value.items[j].authorurl + "'";
ccCountD = "(" + feed.value.items[j].commentcount + ")";//comment count
ccName = feed.value.items[j].title + ccCountD;
ccLName = "<a style='text-decoration:none;font-size:" + ccFontsize + "' href=" + ccUrl + " target='_blank'>" + ccName + " </a>";//clickable commentator name
display = display + ccLName;
}
document.write(display);
}
</script>
<script src="http://pipes.yahoo.com/pipes/pipe.run?
YourBlogUrl=http://bloggersentral.blogspot.com
&Exclusions=Anonymous,Greenlava
&ShowHowMany=20
&Order=alphabet
&_callback=cCloud
&_id=cfa196644e1d6159c9183548c4b5e2f5
&_render=json"
type="text/javascript"></script>
<span style="font-size: 80%; float:right;;margin-top:10px;"><a href="http://bloggersentral.blogspot.com/2010/02/top-commentators-cloud-widget.html" target="_blank">Make your own</a></span>
</div>
<!-- Top Commentators Cloud End -->
Keterangan:
- ganti http://bloggersentral.blogspot.com dengan alamat blog Anda. Jangan akhiri dengan backslash di belakang (/)
- ganti anonymous dan Greenlava dengan nama yang iungin difilter dan tidak ikut dikalkulasi. Biasanya nama Anda. Huruf besar dan kecil menentukan. Jika ada beberapa nama yang tidak ingin ikut dikalkulasi, pisahkan dengan koma.
- ganti angka 20 dengan jumlah nama yang ingin ditampilkan di widget
- ganti alphabet dengan frequency jika pengurutan nama pada widget akan diubah didasarkan pada yang paling banyak berkomentar
- jika tidak ingin menampilkan jumlah komentar silahkan hapus kode
ccCountD = "(" + feed.value.items[j].commentcount + ")";//comment count
Semoga bermanfaat dan semakin mempercantik blog Anda...
