Tạo trang recent comment cho blog

Posted by on
Để tổng hợp một số comment gần đây thì chúng ta đã có wiget recent comment, vì nó được đặt ở sidebar nên người đọc dễ thấy nhưng có nhược điểm là số lượng comment hiển thị cũng chỉ từ 10 cái trở lại. Vì nhược điểm của wiget nên để người đọc tìm ra cái comment mà họ đã bình luận từ lâu sẽ khó cho nên việc tạo ra một trang chuyên tự động tổng hợp rất nhiều các bình luận gần đây là cần thiết. Hôm nay, mình xin giới thiệu cách làm một trang như vậy.
DEMO

#Cách làm

1. Đăng nhập Blogger
2. > Trang > Trang mới
3. > Chuyển sang chế độ viết HTML
4. > Thay thế toàn bộ code trong đó bằng code bên dưới
5. > Xuất bản
<style scoped="scoped">
DIV.cm-content{background:#333;color:#fff;padding:5px}
.thongtintg {width:100px;height:40px;loat:left}
.noidungcm{width:400px;height:40px;loat:left}
.tentacgia{background:#FAF8CC;padding:3px}
.tentacgia a{color:#C11B17}
.tentacbaiviet a{color:#3BB9FF}
.cm-outer {
  margin:0 auto;
  padding:0;
  font:normal normal 11px/normal Arial,Sans-Serif;
  border:1px solid;
  border-top:none;
background:#444;
}
.cm-outer li {
  margin:0;
  padding:7px 10px 12px;
  list-style:none;
  clear:both;
  border-top:1px solid;

}
.cm-outer .cm-header {margin:0 0 5px;background:#333;color:#fff;padding:5px}
.cm-outer .cm-content {overflow:hidden}
.cm-outer img {
  display:block;
  float:right;
  margin:2px 10px 2px 0;
  border:1px solid black;
  background:#8fa2cb url('data:image/png;base64,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') no-repeat 50% 50%;
  overflow:hidden;
}
</style>
<div id="comments-container">Loading&hellip;</div>
<script>
var cm_config = {
    home_page: "http://khanh98.blogspot.com",
    max_result: 100,
    t_w: 32,
    t_h: 32,
    summary: 9999,
    new_tab_link: true,
    ct_id: "comments-container",
    new_cm: "Nhận xét mới!",
    interval: 30000,
    alert: true
};
</script>
<script>
var _0x826a=["\x68\x74\x74\x70\x3A\x2F\x2F\x6E\x61\x6D\x6B\x6E\x61\x2E\x62\x6C\x6F\x67\x73\x70\x6F\x74\x2E\x63\x6F\x6D\x2F","\x63\x6F\x6D\x6D\x65\x6E\x74\x73\x2D\x63\x6F\x6E\x74\x61\x69\x6E\x65\x72","\x20\x4B\x6F\x6D\x65\x6E\x74\x61\x72\x20\x42\x61\x72\x75\x21","\x67\x65\x74\x54\x69\x6D\x65","\x73\x65\x74\x54\x69\x6D\x65","\x3B\x20\x65\x78\x70\x69\x72\x65\x73\x3D","\x74\x6F\x47\x4D\x54\x53\x74\x72\x69\x6E\x67","","\x63\x6F\x6F\x6B\x69\x65","\x3D","\x3B\x20\x70\x61\x74\x68\x3D\x2F","\x3B","\x73\x70\x6C\x69\x74","\x6C\x65\x6E\x67\x74\x68","\x73\x75\x62\x73\x74\x72\x69\x6E\x67","\x63\x68\x61\x72\x41\x74","\x20","\x69\x6E\x64\x65\x78\x4F\x66","\x73\x65\x74","\x74\x74\x5F\x63\x6D","\x67\x65\x74","\x74\x69\x74\x6C\x65","\x75\x6E\x64\x65\x66\x69\x6E\x65\x64","\x68\x65\x61\x64","\x67\x65\x74\x45\x6C\x65\x6D\x65\x6E\x74\x73\x42\x79\x54\x61\x67\x4E\x61\x6D\x65","\x73\x63\x72\x69\x70\x74","\x63\x72\x65\x61\x74\x65\x45\x6C\x65\x6D\x65\x6E\x74","\x74\x79\x70\x65","\x74\x65\x78\x74\x2F\x6A\x61\x76\x61\x73\x63\x72\x69\x70\x74","\x69\x64","\x63\x6D\x2D\x66\x65\x65\x64\x2D\x73\x63\x72\x69\x70\x74","\x73\x72\x63","\x68\x6F\x6D\x65\x5F\x70\x61\x67\x65","\x2F\x66\x65\x65\x64\x73\x2F\x63\x6F\x6D\x6D\x65\x6E\x74\x73\x2F\x64\x65\x66\x61\x75\x6C\x74\x3F\x61\x6C\x74\x3D\x6A\x73\x6F\x6E\x2D\x69\x6E\x2D\x73\x63\x72\x69\x70\x74\x26\x72\x65\x64\x69\x72\x65\x63\x74\x3D\x66\x61\x6C\x73\x65\x26\x6D\x61\x78\x2D\x72\x65\x73\x75\x6C\x74\x73\x3D","\x6D\x61\x78\x5F\x72\x65\x73\x75\x6C\x74","\x26\x63\x61\x6C\x6C\x62\x61\x63\x6B\x3D\x73\x68\x6F\x77\x52\x65\x63\x65\x6E\x74\x43\x6F\x6D\x6D\x65\x6E\x74\x73","\x61\x70\x70\x65\x6E\x64\x43\x68\x69\x6C\x64","\x67\x65\x74\x45\x6C\x65\x6D\x65\x6E\x74\x42\x79\x49\x64","\x72\x65\x6D\x6F\x76\x65\x43\x68\x69\x6C\x64","\x70\x61\x72\x65\x6E\x74\x4E\x6F\x64\x65","\x69\x6E\x74\x65\x72\x76\x61\x6C","\x65\x6E\x74\x72\x79","\x66\x65\x65\x64","\x6F\x70\x65\x6E\x53\x65\x61\x72\x63\x68\x24\x74\x6F\x74\x61\x6C\x52\x65\x73\x75\x6C\x74\x73","\x61\x6C\x65\x72\x74","\x6E\x65\x77\x5F\x63\x6D","\x28","\x29\x20","\x3C\x75\x6C\x20\x63\x6C\x61\x73\x73\x3D\x22\x63\x6D\x2D\x6F\x75\x74\x65\x72\x22\x3E","\x6C\x69\x6E\x6B","\x72\x65\x6C","\x61\x6C\x74\x65\x72\x6E\x61\x74\x65","\x68\x72\x65\x66","\x2F","\x6C\x61\x73\x74\x49\x6E\x64\x65\x78\x4F\x66","\x2E","\x6A\x6F\x69\x6E","\x2D","\x26\x68\x65\x6C\x6C\x69\x70\x3B","\x61\x75\x74\x68\x6F\x72","\x24\x74","\x6E\x61\x6D\x65","\x2E\x24\x31","\x72\x65\x70\x6C\x61\x63\x65","\x2F\x73","\x74\x5F\x77","\x24\x31","\x67\x64\x24\x69\x6D\x61\x67\x65","\x75\x72\x69","\x23\x6E\x6F\x70\x65","\x76\x61\x6C\x75\x65","\x67\x64\x24\x65\x78\x74\x65\x6E\x64\x65\x64\x50\x72\x6F\x70\x65\x72\x74\x79","\x63\x6F\x6E\x74\x65\x6E\x74","\x6E\x65\x77\x5F\x74\x61\x62\x5F\x6C\x69\x6E\x6B","\x20\x74\x61\x72\x67\x65\x74\x3D\x22\x5F\x62\x6C\x61\x6E\x6B\x22","\x73\x75\x6D\x6D\x61\x72\x79","\x3C\x6C\x69\x3E","\x3C\x64\x69\x76\x20\x63\x6C\x61\x73\x73\x3D\x22\x63\x6D\x2D\x68\x65\x61\x64\x65\x72\x22\x3E\x3C\x73\x74\x72\x6F\x6E\x67\x3E\x3C\x73\x70\x61\x6E\x20\x63\x6C\x61\x73\x73\x3D\x22\x74\x65\x6E\x74\x61\x63\x67\x69\x61\x22\x3E\x3C\x61\x20\x68\x72\x65\x66\x3D\x22","\x22\x20\x74\x69\x74\x6C\x65\x3D\x22","\x22","\x3E","\x3C\x2F\x61\x3E\x3C\x2F\x73\x70\x61\x6E\x3E\x20\u0110\u0103\x6E\x67\x20\x6E\x67\xE0\x79\x20\x20","\x20\x74\u1EA1\x69\x3A\x20\x3C\x73\x70\x61\x6E\x20\x63\x6C\x61\x73\x73\x3D\x22\x74\x65\x6E\x74\x61\x63\x62\x61\x69\x76\x69\x65\x74\x22\x3E\x3C\x61\x20\x63\x6C\x61\x73\x73\x3D\x22\x74\x69\x65\x75\x64\x65\x62\x61\x69\x64\x61\x6E\x67\x22\x20\x68\x72\x65\x66\x3D\x22","\x3C\x2F\x61\x3E\x3C\x2F\x73\x70\x61\x6E\x3E\x3C\x2F\x73\x74\x72\x6F\x6E\x67\x3E\x3C\x2F\x64\x69\x76\x3E","\x3C\x64\x69\x76\x20\x63\x6C\x61\x73\x73\x3D\x22\x63\x6D\x2D\x63\x6F\x6E\x74\x65\x6E\x74\x22\x3E\x3C\x61\x20\x68\x72\x65\x66\x3D\x22","\x3E\x3C\x69\x6D\x67\x20\x61\x6C\x74\x3D\x22\u0110\x61\x6E\x67\x20\x74\u1EA3\x69\x20\u1EA3\x6E\x68\x2E\x2E\x2E\x22\x20\x73\x74\x79\x6C\x65\x3D\x22\x77\x69\x64\x74\x68\x3A","\x70\x78\x3B\x68\x65\x69\x67\x68\x74\x3A","\x74\x5F\x68","\x70\x78\x3B\x22\x20\x73\x72\x63\x3D\x22","\x22\x3E\x3C\x2F\x61\x3E","\x3C\x73\x70\x61\x6E\x20\x63\x6C\x61\x73\x73\x3D\x22\x63\x6D\x2D\x74\x65\x78\x74\x22\x3E\x42\xEC\x6E\x68\x20\x6C\x75\u1EAD\x6E\x3A\x20","\x3C\x2F\x73\x70\x61\x6E\x3E","\x3C\x2F\x64\x69\x76\x3E\x3C\x2F\x6C\x69\x3E","\x3C\x2F\x75\x6C\x3E","\x69\x6E\x6E\x65\x72\x48\x54\x4D\x4C","\x63\x74\x5F\x69\x64"];var cm_config_defaults={home_page:_0x826a[0],max_result:7,t_w:32,t_h:32,summary:9999,new_tab_link:true,ct_id:_0x826a[1],new_cm:_0x826a[2],interval:30000,alert:true},_cookie={set:function (_0x7e58x5,_0x7e58x6,_0x7e58x7){var i,_0x7e58x9;if(_0x7e58x7){i= new Date();i[_0x826a[4]](i[_0x826a[3]]()+(_0x7e58x7*24*60*60*1000));_0x7e58x9=_0x826a[5]+i[_0x826a[6]]();} else {_0x7e58x9=_0x826a[7];} ;document[_0x826a[8]]=_0x7e58x5+_0x826a[9]+_0x7e58x6+_0x7e58x9+_0x826a[10];} ,get:function (_0x7e58x6){var _0x7e58xa=_0x7e58x6+_0x826a[9],_0x7e58x9=document[_0x826a[8]][_0x826a[12]](_0x826a[11]),_0x7e58x7;for(var _0x7e58x5=0;_0x7e58x5<_0x7e58x9[_0x826a[13]];_0x7e58x5++){_0x7e58x7=_0x7e58x9[_0x7e58x5];while(_0x7e58x7[_0x826a[15]](0)==_0x826a[16]){_0x7e58x7=_0x7e58x7[_0x826a[14]](1,_0x7e58x7[_0x826a[13]]);} ;if(_0x7e58x7[_0x826a[17]](_0x7e58xa)==0){return _0x7e58x7[_0x826a[14]](_0x7e58xa[_0x826a[13]],_0x7e58x7[_0x826a[13]]);} ;} ;return null;} ,del:function (_0x7e58xb){this[_0x826a[18]](_0x7e58xb,_0x826a[7],-1);} },tt_cm=(_cookie[_0x826a[20]](_0x826a[19]))?_cookie[_0x826a[20]](_0x826a[19]):0,doc_title=document[_0x826a[21]];for(var i in cm_config_defaults){cm_config_defaults[i]=( typeof (cm_config[i])==_0x826a[22])?cm_config_defaults[i]:cm_config[i];} ;function showRecentComments(_0x7e58x12){var _0x7e58x13=_0x7e58x12[_0x826a[42]][_0x826a[41]],_0x7e58x14=parseInt(_0x7e58x12[_0x826a[42]][_0x826a[43]].$t,10),_0x7e58x15=_0x826a[7],_0x7e58x16=tt_cm,_0x7e58xe=cm_config_defaults;if(_0x7e58x16<_0x7e58x14){if(_0x7e58xe[_0x826a[44]]===true){alert((_0x7e58x14-_0x7e58x16)+_0x7e58xe[_0x826a[45]]);} else {if(_0x7e58xe[_0x826a[44]]===false){document[_0x826a[21]]=_0x826a[46]+(_0x7e58x14-_0x7e58x16)+_0x7e58xe[_0x826a[45]]+_0x826a[47]+doc_title;} else {_0x7e58xe[_0x826a[44]]((_0x7e58x14-_0x7e58x16),_0x7e58xe[_0x826a[45]]);} ;} ;} ;_0x7e58x15=_0x826a[48];for(var i=0;i<_0x7e58x13[_0x826a[13]];i++){for(var _0x7e58x7=0;_0x7e58x7<_0x7e58x13[i][_0x826a[49]][_0x826a[13]];_0x7e58x7++){if(_0x7e58x13[i][_0x826a[49]][_0x7e58x7][_0x826a[50]]==_0x826a[51]){link=_0x7e58x13[i][_0x826a[49]][_0x7e58x7][_0x826a[52]];break ;} ;} ;var _0x7e58x17=link[_0x826a[54]](_0x826a[53])+1,_0x7e58x18=link[_0x826a[54]](_0x826a[55]),_0x7e58x19=link[_0x826a[12]](_0x826a[57])[_0x826a[56]](_0x826a[16])[_0x826a[14]](_0x7e58x17,_0x7e58x18)+_0x826a[58];author=_0x7e58x13[i][_0x826a[59]][0];name=author[_0x826a[61]][_0x826a[60]];avatar=author[_0x826a[67]][_0x826a[31]][_0x826a[63]](/\/s[0-9]+(\-c|\/)/,_0x826a[64]+_0x7e58xe[_0x826a[65]]+_0x826a[66])[_0x826a[63]](/http\:\/\/www.google.com\/url\?source\=imglanding(.*?)q\=/i,_0x826a[7])[_0x826a[63]](/\.(jpg|jpeg|png|bmp|gif)(.*?)$/i,_0x826a[62]);profile=(author[_0x826a[68]])?author[_0x826a[68]][_0x826a[60]]:_0x826a[69];date=_0x7e58x13[i][_0x826a[71]][1][_0x826a[70]];content=(_0x826a[72] in _0x7e58x13[i])?_0x7e58x13[i][_0x826a[72]][_0x826a[60]][_0x826a[63]](/<br ?\/?>/ig,_0x826a[16])[_0x826a[63]](/<.*?>/g,_0x826a[7])[_0x826a[63]](/[<>]/g,_0x826a[7]):_0x826a[7];nt=(_0x7e58xe[_0x826a[73]])?_0x826a[74]:_0x826a[7];content=(content[_0x826a[13]]>_0x7e58xe[_0x826a[75]])?content[_0x826a[14]](0,_0x7e58xe[_0x826a[75]])+_0x826a[58]:content;_0x7e58x15+=_0x826a[76];_0x7e58x15+=_0x826a[77]+profile+_0x826a[78]+name+_0x826a[79]+nt+_0x826a[80]+name+_0x826a[81]+date+_0x826a[82]+link+_0x826a[78]+_0x7e58x19+_0x826a[79]+nt+_0x826a[80]+_0x7e58x19+_0x826a[83];_0x7e58x15+=_0x826a[84]+profile+_0x826a[78]+name+_0x826a[79]+nt+_0x826a[85]+_0x7e58xe[_0x826a[65]]+_0x826a[86]+_0x7e58xe[_0x826a[87]]+_0x826a[88]+avatar+_0x826a[89];_0x7e58x15+=_0x826a[90]+content+_0x826a[91];_0x7e58x15+=_0x826a[92];} ;_0x7e58x15+=_0x826a[93];document[_0x826a[37]](_0x7e58xe[_0x826a[95]])[_0x826a[94]]=_0x7e58x15;_cookie[_0x826a[18]](_0x826a[19],_0x7e58x14,7000);tt_cm=_0x7e58x14;} (function (){var _0x7e58xc=document[_0x826a[24]](_0x826a[23])[0],_0x7e58xd=document[_0x826a[26]](_0x826a[25]),_0x7e58xe=cm_config_defaults;_0x7e58xd[_0x826a[27]]=_0x826a[28];_0x7e58xd[_0x826a[29]]=_0x826a[30];_0x7e58xd[_0x826a[31]]=_0x7e58xe[_0x826a[32]]+_0x826a[33]+_0x7e58xe[_0x826a[34]]+_0x826a[35];_0x7e58xc[_0x826a[36]](_0x7e58xd);setInterval(function (){var _0x7e58xf=document[_0x826a[26]](_0x826a[25]);_0x7e58xf[_0x826a[27]]=_0x826a[28];_0x7e58xf[_0x826a[29]]=_0x826a[30];_0x7e58xf[_0x826a[31]]=_0x7e58xe[_0x826a[32]]+_0x826a[33]+_0x7e58xe[_0x826a[34]]+_0x826a[35];var _0x7e58x10=document[_0x826a[37]](_0x826a[30]);_0x7e58x10[_0x826a[39]][_0x826a[38]](_0x7e58x10);_0x7e58xc[_0x826a[36]](_0x7e58xf);} ,_0x7e58xe[_0x826a[40]]);} )();
</script>
Tùy chỉnh Scrip:
  • home_page là url trang chủ, các bạn thay http://khanh98.blogspot.com thành url đến trang blog của mình
  • max_result là số comment tối đa hiển thị
  • t_w (with) là độ rộng avatar
  • t_h (height) là chiều cao avatar
  • summary là số kí tự trích dẫn của comment
  • new_tab_link là tính năng mở link của comment ra tab mới
  • interval là thời gian cập nhật xem có comment nào mới không
  • alert là biến quy định hình thức thông báo comment. Nếu là true thì số lượng comment sẽ được hiển thị ở popup, là false thì số comment sẽ hiện thị cạnh tiêu đề trang
Tùy chỉnh CSS:
  • background:#FAF8CC là màu nền tên tác giả (author)
  • color:#C11B17  là màu nền tên người bình luận
  • color:#3BB9FF là màu tiêu đề bài viết
  • background:#444 là màu toàn bộ khung 
  • background:#333 màu nền phần nội dung nhận xét và thông tin người đăng
Hi! My name is Quoc Khanh. I am from Vietnam.

Comments

Post a Comment



» Vui lòng không spam vì nó sẽ bị xóa ngay sau đó.
» Nếu chèn code hãy mã hóa trước khi chèn vào nhận xét.
» Nếu thủ thuật Blog không áp dụng được thì hãy để lại URL blog để mình tiện kiểm tra.