Tutorial Letak Widget Top Komentator dengan Pelbagai Pilihan Hari, Mingguan Bulanan dan Tahunan

Sebelum ni Fiza ada up entry widget komentator bermasalah tapi masih belum ada penyelesaianya. Jenuh mengoogle tapi coding lebih kurang sama dengan Fiza guna dan takde pilihan mengikut bulanan yang Fiza nak. Secara kebetulan teringat yang Kak Mia juga ada buat list top komentator setiap bulan so terus tanya Kak Mia.

Alhamdulillah, akhirnya berjaya menyelesaikan masalah widget komentator ni. Kak Mia kongsikan tutorial yang blogger Dayang Deno buat. Terima kasih kak Mia!

So bagi yang mencari widget top komentator yang boleh dipilih mengikut hari, mingguan, bulanan ataupun tahunan boleh gunakan tutorial ni.

Tutorial Letak Widget Top Komentator dengan Pelbagai Pilihan Hari, Mingguan Bulanan dan Tahunan.

1. Login >>> dashboard >>> layout >>> add a gadget >>> HTML/javascript

2. Copy kod kat bawah ni paste di ruangan HTML/javascript (Klik sini untuk copy kod)

<style type="text/css">
.tcotp_tallyBox {
margin-top: 1em;
}
</style>
<div id="tcotp">
<div id="tcotpMsg">
</div>
<div class="tcotp_tallyBox">
<form name="tcotp_tallySpace">
<select id="tcotp_period" name="period"></select>
</form>
</div>
<div id="tcotpScriptBox">
</div>
<script type="text/javascript">
var tcotpUserPrefs = {
blogName: 'http://' + 'www.azhafizah.com',
period: 'month',
maxNumberToShow: 10,
excludeBlogAuthors: true,
excludeAnonymous: true,
excludeCommenters: []
};
</script>
<script>
var tcotp=function(){var x,k,q,y,z,s,n,t,A,o,m=[],r=[],i=[];x=tcotpUserPrefs.blogName;k=tcotpUserPrefs.period;q=tcotpUserPrefs.maxNumberToShow;z=tcotpUserPrefs.excludeBlogAuthors;y=tcotpUserPrefs.excludeAnonymous;s=tcotpUserPrefs.excludeCommenters;o=function(a){a=a.slice(0,23).split("T");a=a[0].split("-").concat(a[1].split(":"));a[1]=a[1]-1+"";a=a.concat(a.pop().split("."));return new Date(a[0],a[1],a[2],a[3],a[4],a[5],a[6])};t=function(){var a,g,b,f,d,l,j,c=new Date,e=new Date,h=[];d={};var u=document.getElementById("tcotpMsg");
e.setHours(0,0,0,0);c.setHours(23,59,59,999);k=document.tcotp_tallySpace.period.value;switch(k){case "day":e.setDate(e.getDate()-1);break;case "week":e.setDate(e.getDate()-7);break;case "month":e.setMonth(e.getMonth()-1);break;case "year":e.setMonth(e.getMonth()-6);break;case "halfyear":e.setFullYear(e.getFullYear()-1);break;case "alltime":e=0;break;default:if(/ /.test(k)){e=new Date(k.split(" ")[0]+" 1, "+k.split(" ")[1]);c=new Date(e);c.setMonth(c.getMonth()+1)}else{e=new Date("January 1, "+k);
c=new Date(e);c.setFullYear(c.getFullYear()+1)}c.setMilliseconds(c.getMilliseconds()-1)}f=function(){return e===0?true:j>=e};a=function(){return e===0?true:j<=c};g=function(v,w){var p=w.count-v.count;if(p===0){p=w.latest-v.latest;return p===0?w.name>v.name?1:-1:p}else return p};for(b=0;b<i.length;b++){j=o(i[b].published.$t);if(a())break}for(a=b;b<i.length;b++){j=o(i[b].published.$t);if(f()){a=i[b].author[0].name.$t;l=i[b].author[0].uri?i[b].author[0].uri.$t:"";if(d[a])d[a].count++;else{d[a]={};d[a].name=
a;d[a].uri=l;d[a].latest=new Date(j);d[a].count=1}}else break}for(b=0;b<m.length;b++)delete d[m[b]];for(b in d)if(d.hasOwnProperty(b))for(a=0;a<r.length;a++)if(d[b].uri===r[a]){delete d[b];break}for(b in d)if(d.hasOwnProperty(b))h[h.length]=d[b];if(h.length===0)u.innerHTML="<i>No comments were made during that period.</i>";else{h.sort(g);g=document.createElement("ul");a=q!==0?q<h.length?q:h.length:h.length;for(b=0;b<a;b++){f=document.createElement("li");if(h[b].uri!==""){d=document.createElement("a");
d.href=h[b].uri;d.target="_blank";d.appendChild(document.createTextNode(h[b].name));f.appendChild(d);f.appendChild(document.createTextNode(" ("+h[b].count+")"))}else f.appendChild(document.createTextNode(h[b].name+" ("+h[b].count+")"));g.appendChild(f)}u.innerHTML="";u.appendChild(g)}};A=function(a){var g,b,f,d,l,j,c;f=new Date;f.setDate(1);f.setHours(0,0,0,0);b=new Date(a[0],a[1]-1);d=["Since One Day Ago","Since One Week Ago","Since One Month Ago","Since Half a Year Ago","Since One Year Ago","Since Forever"];
l=["day","week","month","halfyear","year","alltime"];j=["January","February","March","April","May","June","July","August","September","October","November","December"];a=document.tcotp_tallySpace.period;for(c=0;c<d.length;c++){g=document.createElement("option");g.value=l[c];g.appendChild(document.createTextNode(d[c]));a.appendChild(g)}for(;f>=b;){c=j[f.getMonth()]+" "+f.getFullYear();g=document.createElement("option");g.value=c;g.appendChild(document.createTextNode(c));a.appendChild(g);if(f.getMonth()===
0){g=document.createElement("option");g.value=f.getFullYear()+"";g.appendChild(document.createTextNode(f.getFullYear()+""));a.appendChild(g)}f.setMonth(f.getMonth()-1)}if(f.getMonth()<11){g=document.createElement("option");g.value=f.getFullYear()+"";g.appendChild(document.createTextNode(f.getFullYear()+""));a.appendChild(g)}for(c=0;a.options[c].value!==k&&c<6;)c++;a.selectedIndex=c===6?2:c};n=function(){var a,g,b,f=0,d=false,l=true,j=false;g=function(c,e){return o(e[0].published.$t)-o(c[0].published.$t)};
b=function(c){for(var e=[];c.length!==0;)e=e.concat(c.shift());return e};a=function(){if(!d&&!l&&!j){j=true;t()}};return{lockGate:function(){d=true},unlockGate:function(){d=false;a()},addBlock:function(){f++},removeBlock:function(c){var e,h;c=c.feed.entry;h=i.length;i[h]=[];for(e=0;e<c.length;e++)i[h][i[h].length]={author:c[e].author,published:c[e].published};f--;if(f===0){i.sort(g);i=b(i);A(i[i.length-1].published.$t.slice(0,7).split("-"));l=false;a()}}}}();return{gateway:n,fetcher:function(a){var g,
b,f,d;g=x+"/feeds/comments/default?alt=json-in-script&callback=tcotp.gateway.removeBlock";b=document.getElementById("tcotpMsg");f=document.getElementById("tcotpScriptBox");if(!a||!a.feed)b.appendChild(document.createTextNode("This widget did not work. Please refresh the page you are viewing to try again."));else if(!a.feed.entry||a.feed.entry.length===0)b.appendChild(document.createTextNode("There are no comments available on this blog, or this blog is set to private which makes the comment feed inaccessible."));
else{document.tcotp_tallySpace.period.onchange=t;if(z)for(b=0;b<a.feed.author.length;b++)r[r.length]=a.feed.author[b].uri.$t;if(y)m[m.length]="Anonymous";for(b=0;b<s.length;b++)m[m.length]=s[b];b=parseInt(a.feed.openSearch$totalResults.$t,10);a=Math.ceil(b/200);n.lockGate();for(b=0;b<a;b++){n.addBlock();d=document.createElement("script");d.type="text/javascript";d.src=g+"&start-index="+(b*200+1)+"&max-results=200";f.appendChild(d)}n.unlockGate()}}}}();
</script>
<script type="text/javascript" src="http://www.azhafizah.com/feeds/comments/default?alt=json-in-script&callback=tcotp.fetcher&max-results=1">
</script>
</div>

3. Gantikan
merah : link blog sendiri. 

biru : jumlah bilangan komentator pilihan.

contoh link : azhafizah.blogspot.com @ www.azhafizah.com

4. Save

Jangan letak widget ni di sidebar sebab akan menyebabkan page blog lambat loading lagi² yang banyak komen tu. Fiza sarankan letak di pages dan menu bar yang macam Fiza buat sekarang. Takde dah kat sidebar.

Lagi satu widget ni ambil masa sikit untuk keluarkan senarai komentator tu. So kena tunggu dalam 5 minit. Kalau keluar, refresh balik dan tunggu dalam 10 minit. Untuk check senarai dalam pilihan combo box tu cuma perlu select mengikut pilihan mingguan ke bulanan ke dan sebagainya. Kena tunggu sampai habis keluar senarai dan mungkin ambil masa kurang dari 20 minit.

Kalau tak banyak komen mungkin cepat sikit keluar senarai tu. So rasanya widget ni lebih baik dari tutorial widget top komentator yang Fiza pernah buat sebelum ni. Cuma widget ni agak lambat loading tapi berhasil.

Terima kasih Kak Mia dan credit tutorial Dayang Deno