Huỳnh Hoài Bảo - Bảo Shady Blog
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://4.bp.blogspot.com/-mf-rtY0GBT8/WhGj1PNiKII/AAAAAAAAAMI/yh8IqcQ4r8gmXWlOnfzPKITlSmP8BYy8ACLcBGAs/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://1.bp.blogspot.com/-N5a7lI1nD-k/WhGj1FFnITI/AAAAAAAAAME/HQx9Wra_tIUgpRbxlWUxBrurrf0U5-_cgCLcBGAs/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://1.bp.blogspot.com/-F0gn8Jw-1ts/WhGj00y8iII/AAAAAAAAAMA/k4CSQSvnWPUK7QO5ujm7o90MVh8LT3-mwCLcBGAs/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
    56 nhận xét:
    1. bác chặn chuột trái sao copy code đc

      Trả lờiXóa
      Trả lời
      1. Xin lỗi bác em tháo ra rồi :v

        Xóa
      2. phải vậy chứ

        Xóa
      3. Hehe cảm ơn Bác Hưng ghé thăm blog thường xuyên nhen (3)

        Xóa
      4. Ủa mà thấy trên facebook tin nhắn gửi bằng mess mà :v đang on pc hay iphone mà rep nhanh vậy :v

        Xóa
      5. em onl pc bác ạ

        Xóa
      6. Hèn gì rep nhanh ghê

        Xóa
    2. Chặn luôn chuột trái rồi e :v

      Trả lờiXóa
    3. Tháo code chống chuột trái rồi nha :v

      Trả lờiXóa
    4. . Tháo code chống chuột rr à :v

      Trả lờiXóa
      Trả lời
      1. Chống chuột trái sao người ta coppy code :V

        Xóa
    5. Trả lời
      1. Cảm ơn Huy, đẹp là chuyện đương nhiên rồi :v

        Xóa
    6. Trả lời
      1. Bác lỗi sao chứ em xài bth có lỗi đâu nhỉ ??

        Xóa
      2. Đâu phải là lỗi chưa thêm #hover vào mà -,-

        Xóa
    7. hay quá anh ơi share template này cho em được không ?

      Trả lờiXóa
      Trả lời
      1. Teamplate anh đang dùng không share được nha em, nhưng mà anh có template gốc kia tí nữa anh sẽ up bài

        Xóa
      2. Thế bao giờ up bài đó lên vậy ạ

        Xóa
    8. - 1 Từ Thôi :)))
      - Hay !!!

      Trả lờiXóa
      Trả lời
      1. Cảm ơn ông nha :v

        Xóa
      2. NTĐ ông học buổi sáng + chiều à

        Xóa
      3. - Tui Học Chính Buổi Sáng Ông À

        Xóa
      4. Hèn gì sáng ghé blog thăm mà k thấy :"<

        Xóa
    9. Không click được :v troll nhau

      Trả lờiXóa
      Trả lời
      1. Ủa mình tháo click chuột trái

        Xóa
      2. rồi nha bạn coppy được rồi đó

        Xóa
      3. Không hiện híc híc

        Xóa
      4. Bạn đã làm đúng các bước mìh hd chưa ?

        Xóa
    10. Template copy FULL thanh widget bên phải thế mà vẫn để là THIẾT KẾ VÀ PHÁT TRIỂN BỞI HUỲNH HOÀI BẢO là sao ???

      Trả lờiXóa
    11. cái này bác nên để là Thiết kế bởi: Bác Sĩ Windows

      Trả lờiXóa
      Trả lời
      1. Cảm ơn đã góp ý, sẽ chỉnh sữa lại

        Xóa
    12. Mà hướng dẫn chứ nhỉ? Sao lại hướng "dẩn" hả e?

      Trả lờiXóa
      Trả lời
      1. đi học em cũng ghi vậy ._. kiểu như thích dấu hỏi :v

        Xóa
      2. buồn cho một thế hệ trẻ bây giờ

        Xóa
      3. Chỉ là quen tay thôi mà :(

        Xóa
    13. Trả lời
      1. Muốn đạt mốc 500 comments cơ

        Xóa
    14. qua tương tác với bác đây. bác onl vui vẻ

      Trả lờiXóa
      Trả lời
      1. Cảm ơn Hưng nha hihi

        Xóa
      2. hihi. không có gì

        Xóa
      3. Hưng top comments rồi ai đuổi kịp :v

        Xóa
      4. tương tác châts thế cơ mà

        Xóa
      5. Chất chơi người dơi :v

        Xóa
    15. . blog lổi rr kìa e ơi :v

      Trả lờiXóa
      Trả lời
      1. Đang edit có tí vấn đề lỗi thôi mà :v

        Xóa
    16. - Ui :v Đc Đứng Top Luôn Kìa

      Trả lờiXóa
    1. Chèn ảnh: [img]Link ảnh[/img]
    2. Chèn video: [youtube]ID Video[/youtube]
    Hướng dẫn lấy ID Video từ Youtube

    Ví dụ video có link trực tiếp: https://www.youtube.com/watch?v=BUaLnDL3f-M, ta sẽ lấy BUaLnDL3f-M và thay vào vị trí ID Video ở cú pháp trên.

    Nội quy chung Bảo Shady Blog

    1. Bài viết đều tự tay tác giả viết nên nếu có ý định copy xin hãy ghi nguồn bài viết đó.
    2. Template được lên ý tưởng và thiết kế bởi Phú Cường Blogger vì vậy tuyệt đối không tự ý RIP Template hoặc lấy và dùng từ những nguồn ăn cắp khác khi tác giả chưa share công khai. Nếu tôn trọng mình thì bạn có thể trao đổi mua template tại fb Nguyễn Phú Cường.
    3. Không được spam dưới mọi hình thức và đưa ra những bình luận xúc phạm đến danh dự và nhân phẩm của người khác (những bình luận vi phạm sẽ bị xóa).

    Đang cập nhật thêm nội quy...

    - Blog: Bảo Shady Blog - Life Is Share
    - Thành lập: 01/08/2017
    - Nội dung: Blog chủ yếu viết về những thủ thuật blog, và các thủ thuật khác. Ngoài ra, blog thi thoảng còn chia sẻ một vài bài viết về đời sống, share ảnh đẹp, tin tức về đời sống...
    - Tác giả blog: Huỳnh Hoài Bảo hiện đang là học sinh cấp 2 THCS Lê Thị Cẩm Lệ, Bạc Liêu.
    - Template: Twitter Template Version 1.0 By Phú Cường Blogger.

    Lời cuối chúc các bạn có những phút giây thật vui vẻ và ý nghĩa tại blog nhé!