TẠO WIDGET TOP BÌNH LUẬN CỰC ĐẸP CHO BLOGSPOT

Chào các bạn, hôm nay rảnh rỗi nên ngồi mò tý về widget top bình luận cho blogspot, nó khá giống với cái hiện tại của blog anh Phú Cường nhưng khác cái chỗ là có avatar nhé :"<
Để thấy rõ hơn thì mời các bạn xem hình demo dưới đây nhé!

Widget Top Bình Luận

CÁC BƯỚC THỰC HIỆN

Bước 1: Chèn CSS này vào trước thẻ ]]></b:skin>

/* Topcommentators */

#bcd-140504-widget-top-commentator .avatar{float:left;margin:0 8px 0 0;display:block;position:absolute;left:24px;bottom:-12px}

#bcd-140504-widget-top-commentator .avatar img{width:15px;height:15px;border:2px solid white;border-radius:100%}

#bcd-140504-widget-top-commentator .avatar a{z-index:100;display:block;position:relative}

#bcd-140504-widget-top-commentator .content a{font-weight:500;font-size:16px}

#bcd-140504-widget-top-commentator .content span{display:block;color:#777;font-size:12px}

#bcd-140504-widget-top-commentator .item{margin:0 0 20px;padding:0 0 0 50px;position:relative}

#bcd-140504-widget-top-commentator .item-0{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizadbeS4KlXGoLm6YI-yzIh5BKadjXR4gCmvEVyCqX3F9174v1bv5QkiDukcujkFqDqcKEtJ2Svufj98uYwE3EA7LuDQu__Yzo0_rXj2-eEYvTRTpUyAqrAkt7q-xKddQcSoLVgYNP90dU/s1600/TOP-1-Commentators-----------BacSiWindows-Com.png) no-repeat center center;background-size: auto; background-position: -2%}

#bcd-140504-widget-top-commentator .item-1{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiX9rOB4_VWEz8NNcLqth7PcnSYQ2hUlDuHCzozrhlDoSt2W2dfoMpEPRRSRsqGyvi3T_Re2i5AX1D7Ly4Ihs9fdMzxBNuOJonXilv60fd1igtUTKaVqe6XjaK4RJK-8Jky-SUX7p-k02yI/s1600/TOP2-Commentators--------------BacSiWindows-Com.png) no-repeat center center;background-size: auto; background-position: -2%}

#bcd-140504-widget-top-commentator .item-2{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRy-G07X_w84N5U8Z1tsdyJN5-1OeJGKegNYTnt5iGui3sHNEe236KVfWD_iCKIYCR8KrGe6Bj-1kVeWSzWV9Oj3EF0FhthfbAORtynfHPXFeKxTN_G0RuXwHNYCdCAQZXEnV5-ju2JvKE/s1600/TOP-3-Commentators------------BacSiWindows-Com.png) no-repeat center center;background-size: auto; background-position: -2%}

#bcd-140504-widget-top-commentator .info{text-align:right;height:1.2em!important;overflow:hidden;line-height:1em!important}

#bcd-140504-widget-top-commentator .info a{font-weight:bold;font-size:11px;color:#AAA}

#bcd-140504-widget-top-commentator .item-last{margin:10px 0 0 0}

#bcd-140504-widget-top-commentator .order-number{display:none;font-size:18px;color:#fff;float:left;margin:0 10px 0 0;background:#ff6262;padding:6px 10px;border-radius:4px;font-weight:300}

#bcd-140504-widget-top-commentator .order-wrap{margin:0 0 15px 0}

Bước 2: Vào bố cục thêm tiện ích HTML/Javascript

<script type="text/JavaScript">

/*

Widget: simple Top Commentators for Blogger

Author: Huynh Hoai Bao

Website: http://www.baoshady.tk

GNU licenese

*/

/*User setting*/

var _140504_Day_Number = 300;/*_140504_Day_Number*/

var _140504_Name_Number = 3;/*_140504_Name_Number*/

var _140504_Lang_comments = 'Bình Luận';/*_140504_Lang_comments*/

var _140504_Hide_Copyright_Link = false;/*_140504_Hide_Copyright_Link*/

var _140504_Show_Thumbnail = true;/*_140504_Show_Thumbnail*/

var _140504_Show_Order_Number = true;/*_140504_Show_Order_Number*/

var _140504_Exclude_Users = 'Hater names here';/*_140504_Exclude_Users*/

var _140504_Exclude_Uri = '';/*_140504_Exclude_Uri*/

var host = '';/*host*/

_s7EaE = ['undefined','bcd-140504-widget-top-commentator',',',',','<script type="text/JavaScript" src="','"><\/script>','blog-','.comments','','category','','title','','subtitle','Anonymous','','http://img1.blogblog.com/img/anon36.png','name','uri','gd$image','http://img1.blogblog.com/img/blank.gif','entry','post-','','published','category','','title','','content','','summary','','comments','link','alternate','replies','Anonymous','','http://img1.blogblog.com/img/anon36.png','name','uri','gd$image','http://img1.blogblog.com/img/blank.gif','','media$thumbnail','thr$total',' ','','','thr$in-reply-to','thr$in-reply-to','','gd$extendedProperty','blogger.itemClass','pid-','','-','-','<div id="','">','<div class="order-number">','.</div><div class="order-wrap">','<div class="item item-',' ','','">','<div class="avatar"> <a href="','" target="_blank"><img src="','"/></a> </div>','<div class="content"> <a href="','" target="_blank">','</a> <span>',' ','</span> </div> <div class="clear"></div> </div>','</div>','<div class="clear"></div>','<div class="info"><a target="_blank" href="http://www.baoshady.tk" title="Huỳnh Hoài Bảo">Bảo Shady Blog</a></div></div>','Anonymous','','/feeds/comments/summary?alt=json-in-script&max-results=200&start-index=','&callback=_fKlD','/feeds/comments/summary?alt=json-in-script&max-results=200&callback=_fKlD'];if(typeof(_vIsL)==_s7EaE[0]){var _vIsL=false;}if(!_vIsL){_vIsL=true;var _vRyL=_s7EaE[1];var _vWtJ=_140504_Exclude_Users.split(_s7EaE[2]);var _vQvT=_140504_Exclude_Uri.split(_s7EaE[3]);function _fMeZ(url){document.write(_s7EaE[4]+url+_s7EaE[5]);}function _fNhE(json){var _vWcG=new Object();_vWcG.id=json.feed.id.$t;key=_s7EaE[6];_vRcB=_vWcG.id.indexOf(key);_vWcG.id=_vWcG.id.substring(_vRcB+key.length);_vWcG.id=_vWcG.id.replace(_s7EaE[7],_s7EaE[8]);_vWcG.cate=new Array();if(_s7EaE[9] in json.feed){for(_vXaN=0;_vXaN<json.feed.category.length;_vXaN++){_vWcG.cate[_vXaN]=json.feed.category[_vXaN].term;}}_vWcG.title=_s7EaE[10];if(_s7EaE[11] in json.feed){_vWcG.title=json.feed.title.$t;}_vWcG.subtitle=_s7EaE[12];if(_s7EaE[13] in json.feed){_vWcG.subtitle=json.feed.subtitle.$t;}_vWcG.admin=new Object();_vWcG.admin.name=_s7EaE[14];_vWcG.admin.uri=_s7EaE[15];_vWcG.admin.avatar=_s7EaE[16];if(_s7EaE[17] in json.feed.author[0]){_vWcG.admin.name=json.feed.author[0].name.$t;}if(_s7EaE[18] in json.feed.author[0]){_vWcG.admin.uri=json.feed.author[0].uri.$t;}if(_s7EaE[19] in json.feed.author[0]){if(json.feed.author[0].gd$image.src!=_s7EaE[20]){_vWcG.admin.avatar=json.feed.author[0].gd$image.src;}}_vWcG.total_entry=Number(json.feed.openSearch$totalResults.$t);_vWcG.start_index=Number(json.feed.openSearch$startIndex.$t);_vWcG.item_per_page=Number(json.feed.openSearch$itemsPerPage.$t);_vWcG.entry_number=0;if(_s7EaE[21] in json.feed){_vWcG.entry_number=json.feed.entry.length;}_vWcG.entry=new Array();for(_vXaN=0;_vXaN<_vWcG.entry_number;_vXaN++){_vWcG.entry[_vXaN]=new Object();temp=new Object();entry=json.feed.entry[_vXaN];temp.id=entry.id.$t;key=_s7EaE[22];_vRcB=temp.id.indexOf(key);temp.id=temp.id.substring(_vRcB+key.length);temp.published=_s7EaE[23];if(_s7EaE[24] in entry){temp.published=entry.published.$t;}temp.cate=new Array();if(_s7EaE[25] in entry){for(j=0;j<entry.category.length;j++){temp.cate[j]=entry.category[j].term;}}temp.title=_s7EaE[26];if(_s7EaE[27] in entry){temp.title=entry.title.$t;}temp.content=_s7EaE[28];if(_s7EaE[29] in entry){temp.content=entry.content.$t;}temp.summary=_s7EaE[30];if(_s7EaE[31] in entry){temp.summary=entry.summary.$t;}temp.link=_s7EaE[32];temp.reply_label=_s7EaE[33];if(_s7EaE[34] in entry){for(j=0;j<entry.link.length;j++){if(entry.link[j].rel==_s7EaE[35]){temp.link=entry.link[j].href;}if(entry.link[j].rel==_s7EaE[36]){temp.reply_label=entry.link[j].title;}}}temp.author=new Object();temp.author.name=_s7EaE[37];temp.author.uri=_s7EaE[38];temp.author.avatar=_s7EaE[39];a0=entry.author[0];if(_s7EaE[40] in a0){temp.author.name=a0.name.$t;}if(_s7EaE[41] in a0){temp.author.uri=a0.uri.$t;}if(_s7EaE[42] in a0){if(a0.gd$image.src!=_s7EaE[43]){temp.author.avatar=a0.gd$image.src;}}temp.thumb=_s7EaE[44];if(_s7EaE[45] in entry){temp.thumb=entry.media$thumbnail.url;}temp.reply_number=0;if(_s7EaE[46] in entry){temp.reply_number=Number(entry.thr$total.$t);}temp.reply_label=temp.reply_label.replace(temp.reply_number+_s7EaE[47],_s7EaE[48]);temp.reply_to=_s7EaE[49];if(_s7EaE[50] in entry){temp.reply_to=entry[_s7EaE[51]].href;}temp.pid=_s7EaE[52];if(_s7EaE[53] in entry){for(j=0;j<entry.gd$extendedProperty.length;j++){if(entry.gd$extendedProperty[j].name==_s7EaE[54]){temp.pid=entry.gd$extendedProperty[j].value;}}}temp.pid=temp.pid.replace(_s7EaE[55],_s7EaE[56]);_vWcG.entry[_vXaN]=temp;}return _vWcG;}function _fNaQ(jshort1,jshort2){for(_vXaN=0;_vXaN<jshort2.entry_number;_vXaN++){jshort1.entry[_vXaN+jshort1.entry_number]=jshort2.entry[_vXaN];}jshort1.entry_number+=jshort2.entry_number;return jshort1;}function _fTrY(date1,date2){date1=date1.split(_s7EaE[57]);date2=date2.split(_s7EaE[58]);date1=parseInt((new Date(date1[0],date1[1]-1,date1[2].substring(0,2)).getTime())/1000);date2=parseInt((new Date(date2[0],date2[1]-1,date2[2].substring(0,2)).getTime())/1000);var _vCaZ=date1-date2;if(_vCaZ<0) _vCaZ=-_vCaZ;return Math.floor(_vCaZ/86400);}var _vBwK=null;var _vPtM=[];function _fZhQ(){if(_vPtM.length>0){h=_s7EaE[59]+_vRyL+_s7EaE[60];min=Math.min(_vPtM.length,_140504_Name_Number);for(_vXaN=0;_vXaN<min;_vXaN++){if(_140504_Show_Order_Number){h+=_s7EaE[61]+(_vXaN+1)+_s7EaE[62];}h+=_s7EaE[63]+_vXaN+_s7EaE[64]+(((_vXaN+1)==min)?'item-last':_s7EaE[65])+_s7EaE[66];if(_140504_Show_Thumbnail){h+=_s7EaE[67]+_vPtM[_vXaN].uri+_s7EaE[68]+_vPtM[_vXaN].avatar+_s7EaE[69];}h+=_s7EaE[70]+_vPtM[_vXaN].uri+_s7EaE[71]+_vPtM[_vXaN].name+_s7EaE[72]+_vPtM[_vXaN].count+_s7EaE[73]+_140504_Lang_comments+_s7EaE[74];if(_140504_Show_Order_Number){h+=_s7EaE[75];}}h+=_s7EaE[76];if(!_140504_Hide_Copyright_Link){h+=_s7EaE[77];}document.write(h);}}function _fTmI(){Day0=_vBwK.entry[0].published;var _vRcB=0;admin=_vBwK.admin;for(_vXaN=0;_vXaN<_vBwK.entry_number;_vXaN++){author=_vBwK.entry[_vXaN].author;for(j=0;j<_vRcB;j++){if((_vPtM[j].name==author.name)&&(_vPtM[j].uri==author.uri)&&(_vPtM[j].avatar==author.avatar)){break;}}if(j<_vRcB){_vPtM[j].count++;}else{var _vHmR=true;if(_vWtJ.length){for(var _vLgR=0;_vLgR<_vWtJ.length;_vLgR++){if(_vWtJ[_vLgR]==author.name){_vHmR=false;break;}}}if(_vQvT.length){for(var _vLgR=0;_vLgR<_vQvT.length;_vLgR++){if(_vQvT[_vLgR]==author.uri){_vHmR=false;break;}}}if(_vHmR&&(admin.name!=author.name)&&(admin.uri!=author.uri)&&(admin.avatar!=author.avatar)&&(author.name!=_s7EaE[78])&&(author.uri!=_s7EaE[79])){_vPtM[_vRcB]=new Object;_vPtM[_vRcB].name=_vBwK.entry[_vXaN].author.name;_vPtM[_vRcB].uri=_vBwK.entry[_vXaN].author.uri;_vPtM[_vRcB].avatar=_vBwK.entry[_vXaN].author.avatar;_vPtM[_vRcB].count=1;_vRcB++;continue;}}day=_vBwK.entry[_vXaN].published;_vCaZ=_fTrY(Day0,day);if(_vCaZ>=_140504_Day_Number) break;}for(_vXaN=0;_vXaN<_vRcB-1;_vXaN++){for(j=_vXaN+1;j<_vRcB;j++){if(_vPtM[_vXaN].count<_vPtM[j].count){temp=_vPtM[_vXaN];_vPtM[_vXaN]=_vPtM[j];_vPtM[j]=temp;}}}_fZhQ();}function _fKlD(json){if(_vBwK==null){_vBwK=_fNhE(json);}else{_vWcG=_fNhE(json);_vBwK=_fNaQ(_vBwK,_vWcG);}Day0=_vBwK.entry[0].published;for(var _vXaN=0;_vXaN<_vBwK.entry_number;_vXaN++){day=_vBwK.entry[_vXaN].published;_vCaZ=_fTrY(Day0,day);if(_vCaZ>=_140504_Day_Number) break;}if(_vXaN==_vBwK.entry_number&&_vBwK.entry_number<_vBwK.total_entry){_fMeZ(host+_s7EaE[80]+(_vBwK.entry_number+1)+_s7EaE[81]);return;}_fTmI();}_fMeZ(host+_s7EaE[82]);}

</script>

HƯỚNG DẪN EDIT TOP BÌNH LUẬN 

Để thay đổi số bình luận name_number : 3 4 gì đó nha cái mình bôi đen là thay đổi được !

LỜI KẾT

Chỉ vài bước đơn giản bạn đã có một widget top bình luận cực đẹp và hot rồi !

Chúc các bạn thành công!

Thiết kế bởi: Bác Sĩ Windows