Tạo trang nhận xét mới với thông báo cho blogspot

Nhận xét mới với thông báo cho blogspot

Cũng như những tiện ích thống kê nhận xét mới nhất cho blog khác nhưng đặc biệt hơn tiện ích này tự động cập nhật số lượng comment mới mỗi khi có ai đó comment

Thêm tiện ích vào blog

Bạn có thể sử dụng đoạn code bên dưới bằng cách tạo một widget HTML/Javascript mới hoặc tạo một trang tĩnh, bài viết mới và soạn thảo dưới chế độ HTML
Giao diện ban đầu tác giả của tiện ích này đưa ra khá đơn giản nên mình có thay đổi một chút trong CSS và đoạn JS. Chọn một trong hai giao diện để phù hợp hơn  với blog của bạn nhé, xem demo bên dưới trước khi quyết định

Demo TrollVL Style DTE Style

• TrollVL Style
• DTE Style

<style scoped="scoped" type="text/css">
.cm-outer {
  margin:0 auto;
  padding:0 0;
  font:normal normal 11px Arial,Sans-Serif;
  border:1px solid;
color: #fff;
  border-top:none;
}
.cm-outer li {
margin: 10px 0 0 0;
padding: 1.26em;
border: 1px solid #3c3c3c;
background-color: #333;
-webkit-box-shadow: 0 1px 2px black;
-moz-box-shadow: 0 1px 2px black;
box-shadow: 0 1px 2px black;
overflow: hidden;
position: relative;
-webkit-transition: all 1s ease-out;
-moz-transition: all 1s ease-out;
-ms-transition: all 1s ease-out;
-o-transition: all 1s ease-out;
transition: all 1s ease-out;
}
.cm-name{border: 1px solid #555;padding:2px 10px;
background-color: #333;}
.cm-outer .cm-header {border: 1px solid #555;
background-color: #444;
padding: .5em .8em;}
.cm-outer .cm-content {overflow:hidden;border: 1px solid #555;
background-color: #444;
padding: .5em .8em;
margin-top: 3px;}
.cm-outer img {
  display:block;
  float:left;
  margin:2px 10px 2px 0;
  border:4px solid black;
  background:#8fa2cb url('http://img1.blogblog.com/img/anon36.png') no-repeat 50% 50%;
  overflow:hidden;
}
.comment_service {
font-size: 84%;
font-style: italic;
line-height: 1.8;
color: #888;
float: right;
}
</style> <div id="comments-container">Loading&hellip;</div><script type="text/javascript">
var cm_config = {
    home_page: "http://www.trollvl.com",
    max_result: 20,
    t_w: 32,
    t_h: 32,
    summary: 9999,
    new_tab_link: false,
    ct_id: "comments-container",
    new_cm: " Nhận xét mới!",
    interval: 30000,
    alert: true
};
</script> <script type="text/javascript">
var _0x81ca=["\x68\x74\x74\x70\x3A\x2F\x2F\x77\x77\x77\x2E\x64\x74\x65\x2E\x77\x65\x62\x2E\x69\x64","\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\x61\x20\x63\x6C\x61\x73\x73\x3D\x22\x63\x6D\x2D\x6E\x61\x6D\x65\x22\x20\x68\x72\x65\x66\x3D\x22","\x22","\x3E","\x3C\x2F\x61\x3E\x3C\x61\x20\x68\x72\x65\x66\x3D\x22","\x22\x20\x74\x69\x74\x6C\x65\x3D\x22","\x3E\x4C\x69\x6E\x6B\x20\x6E\x68\u1EAD\x6E\x20\x78\xE9\x74\x3C\x2F\x61\x3E\x3C\x64\x69\x76\x20\x63\x6C\x61\x73\x73\x3D\x22\x63\x6F\x6D\x6D\x65\x6E\x74\x5F\x73\x65\x72\x76\x69\x63\x65\x22\x3E\x20","\x3C\x2F\x64\x69\x76\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\x4C\x6F\x61\x64\x69\x6E\x67\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","\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 _0x57a6=[_0x81ca[0],_0x81ca[1],_0x81ca[2],_0x81ca[3],_0x81ca[4],_0x81ca[5],_0x81ca[6],_0x81ca[7],_0x81ca[8],_0x81ca[9],_0x81ca[10],_0x81ca[11],_0x81ca[12],_0x81ca[13],_0x81ca[14],_0x81ca[15],_0x81ca[16],_0x81ca[17],_0x81ca[18],_0x81ca[19],_0x81ca[20],_0x81ca[21],_0x81ca[22],_0x81ca[23],_0x81ca[24],_0x81ca[25],_0x81ca[26],_0x81ca[27],_0x81ca[28],_0x81ca[29],_0x81ca[30],_0x81ca[31],_0x81ca[32],_0x81ca[33],_0x81ca[34],_0x81ca[35],_0x81ca[36],_0x81ca[37],_0x81ca[38],_0x81ca[39],_0x81ca[40],_0x81ca[41],_0x81ca[42],_0x81ca[43],_0x81ca[44],_0x81ca[45],_0x81ca[46],_0x81ca[47],_0x81ca[48],_0x81ca[49],_0x81ca[50],_0x81ca[51],_0x81ca[52],_0x81ca[53],_0x81ca[54],_0x81ca[55],_0x81ca[56],_0x81ca[57],_0x81ca[58],_0x81ca[59],_0x81ca[60],_0x81ca[61],_0x81ca[62],_0x81ca[63],_0x81ca[64],_0x81ca[65],_0x81ca[66],_0x81ca[67],_0x81ca[68],_0x81ca[69],_0x81ca[70],_0x81ca[71],_0x81ca[72],_0x81ca[73],_0x81ca[74],_0x81ca[75],_0x81ca[76],_0x81ca[77],_0x81ca[78],_0x81ca[79],_0x81ca[80],_0x81ca[81],_0x81ca[82],_0x81ca[83],_0x81ca[84],_0x81ca[85],_0x81ca[86],_0x81ca[87],_0x81ca[88],_0x81ca[89],_0x81ca[90],_0x81ca[91],_0x81ca[92],_0x81ca[93],_0x81ca[94],_0x81ca[95]];var cm_config_defaults={home_page:_0x57a6[0],max_result:7,t_w:32,t_h:32,summary:9999,new_tab_link:true,ct_id:_0x57a6[1],new_cm:_0x57a6[2],interval:30000,alert:true},_cookie={set:function (_0xc316x6,_0xc316x7,_0xc316x8){var i,_0xc316xa;if(_0xc316x8){i= new Date();i[_0x57a6[4]](i[_0x57a6[3]]()+(_0xc316x8*24*60*60*1000));_0xc316xa=_0x57a6[5]+i[_0x57a6[6]]();} else {_0xc316xa=_0x57a6[7];} ;document[_0x57a6[8]]=_0xc316x6+_0x57a6[9]+_0xc316x7+_0xc316xa+_0x57a6[10];} ,get:function (_0xc316x7){var _0xc316xb=_0xc316x7+_0x57a6[9],_0xc316xa=document[_0x57a6[8]][_0x57a6[12]](_0x57a6[11]),_0xc316x8;for(var _0xc316x6=0;_0xc316x6<_0xc316xa[_0x57a6[13]];_0xc316x6++){_0xc316x8=_0xc316xa[_0xc316x6];while(_0xc316x8[_0x57a6[15]](0)==_0x57a6[16]){_0xc316x8=_0xc316x8[_0x57a6[14]](1,_0xc316x8[_0x57a6[13]]);} ;if(_0xc316x8[_0x57a6[17]](_0xc316xb)==0){return _0xc316x8[_0x57a6[14]](_0xc316xb[_0x57a6[13]],_0xc316x8[_0x57a6[13]]);} ;} ;return null;} ,del:function (_0xc316xc){this[_0x57a6[18]](_0xc316xc,_0x57a6[7],-1);} },tt_cm=(_cookie[_0x57a6[20]](_0x57a6[19]))?_cookie[_0x57a6[20]](_0x57a6[19]):0,doc_title=document[_0x57a6[21]];for(var i in cm_config_defaults){cm_config_defaults[i]=( typeof (cm_config[i])==_0x57a6[22])?cm_config_defaults[i]:cm_config[i];} ;function showRecentComments(_0xc316x13){var _0xc316x14=_0xc316x13[_0x57a6[42]][_0x57a6[41]],_0xc316x15=parseInt(_0xc316x13[_0x57a6[42]][_0x57a6[43]].$t,10),_0xc316x16=_0x57a6[7],_0xc316x17=tt_cm,_0xc316xf=cm_config_defaults;if(_0xc316x17<_0xc316x15){if(_0xc316xf[_0x57a6[44]]===true){alert((_0xc316x15-_0xc316x17)+_0xc316xf[_0x57a6[45]]);} else {if(_0xc316xf[_0x57a6[44]]===false){document[_0x57a6[21]]=_0x57a6[46]+(_0xc316x15-_0xc316x17)+_0xc316xf[_0x57a6[45]]+_0x57a6[47]+doc_title;} else {_0xc316xf[_0x57a6[44]]((_0xc316x15-_0xc316x17),_0xc316xf[_0x57a6[45]]);} ;} ;} ;_0xc316x16=_0x57a6[48];for(var i=0;i<_0xc316x14[_0x57a6[13]];i++){for(var _0xc316x8=0;_0xc316x8<_0xc316x14[i][_0x57a6[49]][_0x57a6[13]];_0xc316x8++){if(_0xc316x14[i][_0x57a6[49]][_0xc316x8][_0x57a6[50]]==_0x57a6[51]){link=_0xc316x14[i][_0x57a6[49]][_0xc316x8][_0x57a6[52]];break ;} ;} ;var _0xc316x18=link[_0x57a6[54]](_0x57a6[53])+1,_0xc316x19=link[_0x57a6[54]](_0x57a6[55]),_0xc316x1a=link[_0x57a6[12]](_0x57a6[57])[_0x57a6[56]](_0x57a6[16])[_0x57a6[14]](_0xc316x18,_0xc316x19)+_0x57a6[58];author=_0xc316x14[i][_0x57a6[59]][0];name=author[_0x57a6[61]][_0x57a6[60]];avatar=author[_0x57a6[67]][_0x57a6[31]][_0x57a6[63]](/\/s[0-9]+(\-c|\/)/,_0x57a6[64]+_0xc316xf[_0x57a6[65]]+_0x57a6[66])[_0x57a6[63]](/http\:\/\/www.google.com\/url\?source\=imglanding(.*?)q\=/i,_0x57a6[7])[_0x57a6[63]](/\.(jpg|jpeg|png|bmp|gif)(.*?)$/i,_0x57a6[62]);profile=(author[_0x57a6[68]])?author[_0x57a6[68]][_0x57a6[60]]:_0x57a6[69];date=_0xc316x14[i][_0x57a6[71]][1][_0x57a6[70]];content=(_0x57a6[72] in _0xc316x14[i])?_0xc316x14[i][_0x57a6[72]][_0x57a6[60]][_0x57a6[63]](/<br ?\/?>/ig,_0x57a6[16])[_0x57a6[63]](/<.*?>/g,_0x57a6[7])[_0x57a6[63]](/[<>]/g,_0x57a6[7]):_0x57a6[7];nt=(_0xc316xf[_0x57a6[73]])?_0x57a6[74]:_0x57a6[7];content=(content[_0x57a6[13]]>_0xc316xf[_0x57a6[75]])?content[_0x57a6[14]](0,_0xc316xf[_0x57a6[75]])+_0x57a6[58]:content;_0xc316x16+=_0x57a6[76];_0xc316x16+=_0x57a6[77]+profile+_0x57a6[78]+nt+_0x57a6[79]+name+_0x57a6[80]+link+_0x57a6[81]+_0xc316x1a+_0x57a6[78]+nt+_0x57a6[82]+date+_0x57a6[83];_0xc316x16+=_0x57a6[84]+profile+_0x57a6[81]+name+_0x57a6[78]+nt+_0x57a6[85]+_0xc316xf[_0x57a6[65]]+_0x57a6[86]+_0xc316xf[_0x57a6[87]]+_0x57a6[88]+avatar+_0x57a6[89];_0xc316x16+=_0x57a6[90]+content+_0x57a6[91];_0xc316x16+=_0x57a6[92];} ;_0xc316x16+=_0x57a6[93];document[_0x57a6[37]](_0xc316xf[_0x57a6[95]])[_0x57a6[94]]=_0xc316x16;_cookie[_0x57a6[18]](_0x57a6[19],_0xc316x15,7000);tt_cm=_0xc316x15;} (function (){var _0xc316xd=document[_0x57a6[24]](_0x57a6[23])[0],_0xc316xe=document[_0x57a6[26]](_0x57a6[25]),_0xc316xf=cm_config_defaults;_0xc316xe[_0x57a6[27]]=_0x57a6[28];_0xc316xe[_0x57a6[29]]=_0x57a6[30];_0xc316xe[_0x57a6[31]]=_0xc316xf[_0x57a6[32]]+_0x57a6[33]+_0xc316xf[_0x57a6[34]]+_0x57a6[35];_0xc316xd[_0x57a6[36]](_0xc316xe);setInterval(function (){var _0xc316x10=document[_0x57a6[26]](_0x57a6[25]);_0xc316x10[_0x57a6[27]]=_0x57a6[28];_0xc316x10[_0x57a6[29]]=_0x57a6[30];_0xc316x10[_0x57a6[31]]=_0xc316xf[_0x57a6[32]]+_0x57a6[33]+_0xc316xf[_0x57a6[34]]+_0x57a6[35];var _0xc316x11=document[_0x57a6[37]](_0x57a6[30]);_0xc316x11[_0x57a6[39]][_0x57a6[38]](_0xc316x11);_0xc316xd[_0x57a6[36]](_0xc316x10);} ,_0xc316xf[_0x57a6[40]]);} )();
</script>

<style scoped="scoped">
.cm-outer {
  margin:0 auto;
  padding:0;
  font:normal normal 11px/normal Arial,Sans-Serif;
  border:1px solid;
  border-top:none;
}
.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}
.cm-outer .cm-content {overflow:hidden}
.cm-outer img {
  display:block;
  float:left;
  margin:2px 10px 2px 0;
  border:4px solid black;
  background:#8fa2cb url('http://img1.blogblog.com/img/anon36.png') no-repeat 50% 50%;
  overflow:hidden;
}
</style>
<div id="comments-container">Loading&hellip;</div>
<script>
var cm_config = {
    home_page: "http://www.trollvl.com",
    max_result: 7,
    t_w: 32,
    t_h: 32,
    summary: 9999,
    new_tab_link: true,
    ct_id: "comments-container",
    new_cm: " Komentar Baru!",
    interval: 30000,
    alert: true
};
</script>
<script src="http://dte-project.googlecode.com/svn/trunk/recent-comments-script-with-notification.js"></script>

Tùy chỉnh nâng cao:

Tùy Chọn

Thông tin

home_page

Thay đổi http://www.trollvl.com thành URL blog của bạn

max_result

Số lượng nhận xét tối đa được phép hiển thị

t_w

Xác định chiều rộng của avatar

t_h

Xác định chiều cao của avatar

summary

Số lượng ký tự tóm tắt tối đa của nội dung nhận xét

new_tab_link

Nếu để như mặc định là true, khi click vào liên kết sẽ mở ra cửa sổ mới. Nếu không muốn mở ra cửa sổ mới hãy thay đổi giá trị thành false

tt_id

Tổng số nhận xét  (Bỏ qua )

ct_id

Danh sách nhận xét (Bỏ qua)

new_cm

Nội dung thông báo khi có nhận xét mới (Ví dụ: 2 Nhận xét mới!)

interval

Thời gian để hệ thống kiểm tra xem có nhận xét mới không để cập nhật. Giá trị 30000 tương ứng với 30 giây

alert

Nếu bạn để giá trị là false, khi có nhận xét mới thông báo chỉ hiển thị trên thanh tiêu đề của trình duyệt

Nếu bạn để giá trị là true, khi có nhận xét mới sẽ thông báo bằng một hộp cảnh báo

Tham khảo từ DTE