Tổng hợp các kiểu Recent Comments cho blogger

Ai chơi blog thì cũng đều biết sự quan trọng của tiện ích Recent Commments (Nhận xét mới) bởi nó giúp tác giả / người đọc theo dõi một cách trực quan, tiếp diễn những thảo luận trên blog. Thời gian vừa rồi hệ thống blog của Opera bị trục trặc, 2ku blog có "gạ" blogger Thiếu Long Texas sang chơi Blogger nhưng Thiếu Long nói thích Opera hơn vì ở đó có tiện ích Recent Comment (lúc này anh ấy chưa biết Blogger cũng có tiện ích này và hàng hà sa số tiện ích khác so với Opera). Thời gian gần đây, 2ku sang nhà các blogger thân hữu chơi thì thấy tiện ích này trên các blog đó bị lỗi, không hiển thị nữa. Sau khi tìm hiểu thì 2ku thấy rằng tiện ích Recent Comment hỗ trợ trong blogger được cung cấp bởi Blogger Buster và đang bị lỗi gì đó.

Thật ra, tiện ích mặc định trên Blogger này cũng đã xưa hơn Diễm lâu rồi. Trong giới Blogger từ lâu đã và đang cho ra đời những tiện ích Nhận xét mới được "độ" và nâng cấp, tuyệt vời hơn cái phiên bản mặc định kia nhiều. Để giúp các bác blogger chưa có thời gian tìm hiểu kỹ về vấn đề này, 2ku blog xin tổng hợp 1 số kiểu tiện ích "Recent comments" như dưới đây.

Bước 1:
Trước hết, chúng ta xác định vị trí để chèn tiện ích này trên blog của mình (thường là các sidebar trái hoặc phải). Từ Blogger Dashboard → Layout → Xác định vị trí đặt tiện ích và "Add a Gadget" → chọn "HTML/JavaScript" trong danh sách Gadget hiện ra.
Bước 2:
Một cửa sổ nhập liệu hiện ra. Các bạn đặt tên cho nó và dán các đoạn mã của tiện ích vào rồi lưu lại (Save). Đoạn mã cho tiện ích thì các bạn có thể chọn 1 trong số 3 kiểu mà 2ku sẽ trình bày ngay sau đây.

Bước 3:
Như đã trình bày ở trên, hiện có khá nhiều kiểu "Recent comments". 2ku blog lựa chọn giới thiệu 3 đại diện của các "trường phái" phổ biến nhất để các bạn tùy nghi áp dụng vào blog mình sao cho phù hợp.

1. Kiểu đơn giản: không có avatar người bình luận.
Các bạn tham khảo hình ảnh dưới đây. Tiện ích sẽ thể hiện tên người nhận xét, tên bài viết có nhận xét và trích dẫn nhận xét.
Đoạn mã cho kiểu tiện ích này như sau:
<script style=text/javascript 
src="http://helplogger.googlecode.com/svn/trunk/recent comments 
widget.js"></script><script style=text/javascript >var 
a_rc=5;var m_rc=false;var n_rc=true;var 
o_rc=100;</script><script src=http://cuAnhcuEm.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments
 ></script><style type=text/css> 
.rcw-comments a {text-transform: capitalize;} .rcw-comments 
{border-bottom: 1px dotted; padding-top: 7px!important; padding-bottom: 
7px!important;} #rcw-cr {font-family: 
Arial,Tahoma;font-size:9px;padding-top:7px;display:block;} 
</style>

Bạn chỉ cần thay đoạn http://cuAnhcuEm.blogspot.com bằng đường link của blog mình. Số 5 quy định số nhận xét được hiện thị.

2. Kiểu có avatar hình vuông, bo góc.
Đây là mẫu tiện ích được giới thiệu bởi Duy Phạm. Các bạn tham khảo hình ảnh dưới đây để biết "dung nhan" em nó.
Đoạn trích của nhận xét sẽ hiển thị khi di chuyển con trỏ lên trên đường link của bài viết. Đoạn mã của kiểu tiện ích này như sau:
<div id='recent-comments-avatar'>
<script type='text/javascript'>
var copyright_by_duypham_dot_info='Recent Comments free version 2.4 by http://duypham.info';
nc=5;
length_name=30;
length_content=150;
no_avatar='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0_MENMwyUW3th9oXYt8eLTGNUZZlcBp3zUxCBXWUDt0IuqCdFFauSfWmF3SB-Rj4qEMndqx63kYR2_erxC6DRxotVuVcHyKW84rpEsOPnakTUtVNlmfdkolPzyqK012kxoMg1PrtDVF8/s44/no-avatar.png';
on='on';
profile='View the profile of';
admin_style='<span style="background:#F00;color:#FFF">Admin</span>';
home_page='';
admin_uri='';
admin_avatar='';
avatar_show='yes';
var dp=['5c(3a(p,a,c,k,e,d){e=3a(c){3b(c<a?\'\':e(3f(c/a)))+((c=c%a)>35?3d.5b(c+29):c.4P(36))};3c(!\'\'.3e(/^/,3d)){3h(c--){d[e(c)]=k[c]||e(c)}k=[3a(e){3b d[e]}];e=3a(){3b\'\\\\w+\'};c=1};3h(c--){3c(k[c]){p=p.3e(4D 4E(\'\\\\b\'+e(c)+\'\\\\b\',\'g\'),k[c])}}3b p}(\'O b=["\\\\I\\\\J\\\\R\\\\B\\\\M\\\\h\\\\v","\\\\M\\\\e\\\\e\\\\B\\\\1q\\\\w\\\\w","\\\\1b","\\\\q\\\\m\\\\G\\\\r","\\\\M\\\\j\\\\f\\\\G","\\\\1e\\\\v\\\\A\\\\1H","\\\\q\\\\m\\\\I\\\\f\\\\Y\\\\1L\\\\G","\\\\w\\\\B\\\\w","\\\\l\\\\B\\\\k\\\\q\\\\e","\\\\x","\\\\j\\\\f\\\\B\\\\k\\\\h\\\\n\\\\f","","\\\\l\\\\J\\\\S\\\\l\\\\e\\\\j\\\\q\\\\m\\\\H","\\\\e\\\\r\\\\2y\\\\B\\\\B\\\\f\\\\j\\\\1B\\\\h\\\\l\\\\f","\\\\1j\\\\e","\\\\e\\\\q\\\\e\\\\k\\\\f","\\\\G\\\\f\\\\f\\\\I","\\\\r\\\\B\\\\f\\\\m\\\\2z\\\\f\\\\h\\\\j\\\\n\\\\M\\\\1j\\\\e\\\\r\\\\e\\\\h\\\\k\\\\1J\\\\f\\\\l\\\\J\\\\k\\\\e\\\\l","\\\\J\\\\j\\\\q","\\\\h\\\\J\\\\e\\\\M\\\\r\\\\j","\\\\l\\\\j\\\\n","\\\\H\\\\I\\\\1j\\\\q\\\\v\\\\h\\\\H\\\\f","\\\\f\\\\m\\\\e\\\\j\\\\R","\\\\k\\\\f\\\\m\\\\H\\\\e\\\\M","\\\\k\\\\q\\\\m\\\\Z","\\\\w","\\\\e\\\\M\\\\j\\\\1j\\\\q\\\\m\\\\K\\\\j\\\\f\\\\B\\\\k\\\\R\\\\K\\\\e\\\\r","\\\\n\\\\r\\\\m\\\\e\\\\f\\\\m\\\\e","\\\\l\\\\J\\\\v\\\\v\\\\h\\\\j\\\\R","\\\\U\\\\1p\\\\2B\\\\2x\\\\2w\\\\1i\\\\1y","\\\\k\\\\h\\\\l\\\\e\\\\1G\\\\m\\\\I\\\\f\\\\Y\\\\1L\\\\G","\\\\U\\\\1p\\\\1s\\\\1K\\\\1K\\\\1y","\\\\m\\\\h\\\\v\\\\f","\\\\D\\\\h\\\\x\\\\M\\\\j\\\\f\\\\G\\\\A\\\\s","\\\\s\\\\x\\\\j\\\\f\\\\k\\\\A\\\\s\\\\m\\\\r\\\\G\\\\r\\\\k\\\\k\\\\r\\\\1r\\\\s\\\\x\\\\e\\\\h\\\\j\\\\H\\\\f\\\\e\\\\A\\\\s\\\\1n\\\\S\\\\k\\\\h\\\\m\\\\Z\\\\s\\\\x\\\\e\\\\q\\\\e\\\\k\\\\f\\\\A\\\\s","\\\\s\\\\F","\\\\D\\\\w\\\\h\\\\F","\\\\M\\\\e\\\\e\\\\B\\\\1q\\\\w\\\\w\\\\q\\\\v\\\\H\\\\1s\\\\1b\\\\S\\\\k\\\\r\\\\H\\\\S\\\\k\\\\r\\\\H\\\\1b\\\\n\\\\r\\\\v\\\\w\\\\q\\\\v\\\\H\\\\w\\\\S\\\\k\\\\h\\\\m\\\\Z\\\\1b\\\\H\\\\q\\\\G","\\\\m\\\\r\\\\x\\\\h\\\\L\\\\h\\\\e\\\\h\\\\j","\\\\D\\\\l\\\\n\\\\j\\\\q\\\\B\\\\e\\\\x\\\\e\\\\R\\\\B\\\\f\\\\A\\\\s\\\\e\\\\f\\\\Y\\\\e\\\\w\\\\1m\\\\h\\\\L\\\\h\\\\l\\\\n\\\\j\\\\q\\\\B\\\\e\\\\s\\\\F\\\\j\\\\n\\\\1n\\\\h\\\\L\\\\h\\\\e\\\\h\\\\j\\\\1i\\\\2t\\\\2u\\\\1y\\\\D\\\\w\\\\l\\\\n\\\\j\\\\q\\\\B\\\\e\\\\F","\\\\1r\\\\j\\\\q\\\\e\\\\f","\\\\D\\\\l\\\\n\\\\j\\\\q\\\\B\\\\e\\\\x\\\\e\\\\R\\\\B\\\\f\\\\A\\\\s\\\\e\\\\f\\\\Y\\\\e\\\\w\\\\1m\\\\h\\\\L\\\\h\\\\l\\\\n\\\\j\\\\q\\\\B\\\\e\\\\s\\\\x\\\\l\\\\j\\\\n\\\\A\\\\s","\\\\w\\\\G\\\\f\\\\f\\\\I\\\\l\\\\w","\\\\w\\\\n\\\\r\\\\v\\\\v\\\\f\\\\m\\\\e\\\\l\\\\w\\\\I\\\\f\\\\G\\\\h\\\\J\\\\k\\\\e\\\\1e\\\\h\\\\k\\\\e\\\\A\\\\1m\\\\l\\\\r\\\\m\\\\K\\\\q\\\\m\\\\K\\\\l\\\\n\\\\j\\\\q\\\\B\\\\e\\\\U\\\\v\\\\h\\\\Y\\\\K\\\\j\\\\f\\\\l\\\\J\\\\k\\\\e\\\\l\\\\A\\\\1H\\\\U\\\\n\\\\h\\\\k\\\\k\\\\S\\\\h\\\\n\\\\Z\\\\A\\\\j\\\\n\\\\1n\\\\h\\\\L\\\\h\\\\e\\\\h\\\\j\\\\1i\\\\s\\\\F\\\\D\\\\w\\\\l\\\\n\\\\j\\\\q\\\\B\\\\e\\\\F","\\\\1J\\\\f\\\\n\\\\f\\\\m\\\\e\\\\x\\\\1B\\\\r\\\\v\\\\v\\\\f\\\\m\\\\e\\\\l\\\\x\\\\G\\\\j\\\\f\\\\f\\\\x\\\\L\\\\f\\\\j\\\\l\\\\q\\\\r\\\\m\\\\x\\\\1i\\\\1b\\\\2D\\\\x\\\\S\\\\R\\\\x","\\\\w\\\\G\\\\f\\\\f\\\\I\\\\l\\\\w\\\\n\\\\r\\\\v\\\\v\\\\f\\\\m\\\\e\\\\l\\\\w\\\\I\\\\f\\\\G\\\\h\\\\J\\\\k\\\\e\\\\1e\\\\h\\\\k\\\\e\\\\A\\\\1m\\\\l\\\\r\\\\m\\\\K\\\\q\\\\m\\\\K\\\\l\\\\n\\\\j\\\\q\\\\B\\\\e\\\\U\\\\v\\\\h\\\\Y\\\\K\\\\j\\\\f\\\\l\\\\J\\\\k\\\\e\\\\l\\\\A","\\\\U\\\\n\\\\h\\\\k\\\\k\\\\S\\\\h\\\\n\\\\Z\\\\A\\\\j\\\\n\\\\1n\\\\h\\\\L\\\\h\\\\e\\\\h\\\\j\\\\1s\\\\s\\\\F\\\\D\\\\w\\\\l\\\\n\\\\j\\\\q\\\\B\\\\e\\\\F","\\\\D\\\\J\\\\k\\\\F","\\\\1B\\\\r\\\\v\\\\v\\\\f\\\\m\\\\e\\\\l\\\\x\\\\r\\\\m\\\\x","\\\\1q\\\\x","\\\\1p\\\\n","\\\\U\\\\n\\\\r\\\\v\\\\v\\\\f\\\\m\\\\e\\\\1I\\\\h\\\\H\\\\f\\\\A","\\\\1e\\\\n\\\\r\\\\v\\\\v\\\\f\\\\m\\\\e\\\\1I\\\\h\\\\H\\\\f\\\\A","\\\\D\\\\k\\\\q\\\\F","\\\\R\\\\f\\\\l","\\\\D\\\\q\\\\v\\\\H\\\\x\\\\h\\\\k\\\\e\\\\A\\\\s","\\\\s\\\\x\\\\n\\\\k\\\\h\\\\l\\\\l\\\\A\\\\s\\\\j\\\\n\\\\K\\\\h\\\\L\\\\h\\\\e\\\\h\\\\j\\\\s\\\\x\\\\l\\\\j\\\\n\\\\A\\\\s","\\\\s\\\\w\\\\F","\\\\x\\\\D\\\\h\\\\x\\\\M\\\\j\\\\f\\\\G\\\\A\\\\s","\\\\s\\\\x\\\\j\\\\f\\\\k\\\\A\\\\s\\\\m\\\\r\\\\G\\\\r\\\\k\\\\k\\\\r\\\\1r\\\\s\\\\x\\\\e\\\\q\\\\e\\\\k\\\\f\\\\A\\\\s","\\\\D\\\\w\\\\h\\\\F\\\\D\\\\I\\\\q\\\\L\\\\x\\\\n\\\\k\\\\h\\\\l\\\\l\\\\A\\\\s\\\\n\\\\k\\\\f\\\\h\\\\j\\\\s\\\\F\\\\D\\\\w\\\\I\\\\q\\\\L\\\\F\\\\D\\\\w\\\\k\\\\q\\\\F","\\\\D\\\\w\\\\J\\\\k\\\\F","\\\\q\\\\m\\\\m\\\\f\\\\j\\\\2c\\\\1Z\\\\2a\\\\2b","\\\\j\\\\f\\\\n\\\\f\\\\m\\\\e\\\\K\\\\n\\\\r\\\\v\\\\v\\\\f\\\\m\\\\e\\\\l\\\\K\\\\h\\\\L\\\\h\\\\e\\\\h\\\\j","\\\\H\\\\f\\\\e\\\\2l\\\\k\\\\f\\\\v\\\\f\\\\m\\\\e\\\\2j\\\\R\\\\1G\\\\I"];1o=0;u=0;X=[];d=[];p=[];W=[];1l=[];1x=[];t=[];a=[];V=[];1k=[];1c=[];1u=[];1w=[];1g=[];1V=b[0];1X=b[1];1W=b[2];1S=b[3];1O=2Z[b[4]];y=1O[b[6]](b[5]);1z 2X(1t){E(d[u][b[6]](b[7])!=-1){W[u]=1;i=d[u][b[8]](b[7]);i=i[1];i=i[b[10]](/-/g,b[9]);i=i[b[10]](/.2Y/,b[11]);1N=i[b[12]](0,1);1M=i[b[12]](1);i=1N[b[13]]()+1M;t[u]=i}N{o=1t[b[16]][b[15]][b[14]];t[u]=o;1P=1t[b[16]][b[17]][b[14]];i=2R((1P-1)/2Q)+1;W[u]=i};u++};1z 2S(T){1o=T[b[16]][b[17]][b[14]];1x=T[b[16]][b[15]][b[14]];E(b[18]1f T[b[16]][b[19]][0]){1u=T[b[16]][b[19]][0][b[18]][b[14]]};1w=T[b[16]][b[19]][0][b[21]][b[20]];1R(g=0;(g<1C)&&(g<1o);g++){c=T[b[16]][b[22]][g];E(g==T[b[16]][b[22]][b[23]]){2W};X=c[b[24]][0][b[4]];X=X[b[8]](b[25]);1Y=X[5];1F=X[8];O 1E=c[b[26]][b[4]];d[g]=1E;E(y!=-1){d[g]=d[g]+b[5]};p[g]=1F;E(b[27]1f c){O C=c[b[27]][b[14]]}N{E(b[28]1f c){O C=c[b[28]][b[14]]}N{O C=b[29]}};C=C[b[10]](/<2U \\\\/>/g,b[9]);C=C[b[10]](/@<a.*?a>/g,b[11]);C=C[b[10]](/<[^>]*>/g,b[11]);E(C[b[23]]<1Q){1l[g]=C}N{C=C[b[12]](0,1Q);O 1h=C[b[30]](b[9]);C=C[b[12]](0,1h);1l[g]=C+b[31]};Q=c[b[19]][0][b[32]][b[14]];E(Q[b[23]]<1D){a[g]=Q}N{Q=Q[b[12]](0,1D);O 1h=Q[b[30]](b[11]);Q=Q[b[12]](0,1h);a[g]=Q+b[31]};E(b[18]1f c[b[19]][0]){1c[g]=c[b[19]][0][b[18]][b[14]];1g[g]=b[33]+1c[g]+b[34]+2V+b[9]+a[g]+b[35]+a[g]+b[36]}N{1g[g]=a[g]};E(c[b[19]][0][b[21]][b[20]]==b[37]){V[g]=2T;1k[g]=b[38]}N{V[g]=c[b[19]][0][b[21]][b[20]];1k[g]=a[g]};E(d[g][b[6]](b[7])!=-1){1d[b[1A]](b[39])}N{1d[b[1A]](b[1T]+1U+b[2O]+1Y+b[2k])}}};E(2i==b[2P]+1X+1V+1W+1S){1d[b[1A]](b[1T]+1U+b[2h]+1C+b[2o])};1z 2n(){O P=b[11];P+=b[2p];1R(z=0;(z<1C)&&(z<1o);z++){t[z]=t[z][b[10]](b[2f]+1x+b[2e],b[11]);O 1a=b[11];E(W[z]==1){1a=b[1v]}N{E(y!=-1){1a=b[2g]+W[z]+b[1v]}N{1a=b[2d]+W[z]+b[1v]}};P+=b[2m];E(2q==b[2H]){P+=b[2G]+1k[z]+b[2F]+V[z]+b[2E]};P+=1g[z];E(((1c[z]==1u)&&(V[z]==1w))||((1c[z]==2I)&&(V[z]==2J))){P+=b[9]+2N};P+=b[9]+2M+b[2L]+d[z]+1a+p[z]+b[2K]+1l[z]+b[35]+t[z]+b[2C]};P+=b[2v];1d[b[2r]](b[2s])[b[2A]]=P};\',3g,4a,\'|||||||||||3Z|||4b|4c||4e||4d|3Y|3X|3S|3R|||3Q|3T|3U|||3W|3V|4f|||4g|4r|4q|4s|3c|4t|4v|4u|4p|4o|4j|4i|4x|4h|4k|4l|3P|4m|4w|3L|3s|3r|3u|3w|3v|3q|||||||||||3p|3k|3j|3i|3l|3m|3n|3y|3J|3I|3N|3M|3G|3B|3A|3z|3C|3D|3E|3O|3F|50|3H|3K|3x|3a|40|3o|3t|4n|4V|5r|5q|5s|5t|5v|5u|5p|5o|5j|5i|5h|5x|5k|5l|41|5n|5m|5w|5A|5F|5E|||||||||||5C|5y|5z|52|49|48|51|45|5D|5B|43|5f|53|4J|46|47|4I|4H|4K|4L|4N|4M|4G|4F|4A|4z|3g|4y|4B|4C|57|56|55|54|5g|4O|59|58|5a|4Z|42|44|5e|3f|5d|4Y|4X|4S|4R|4Q|4T|4U||||||||||\'.4W(\'|\'),0,{}))',"|","split","||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||function|return|if|String|replace|parseInt|62|while|document|ur|x2E|x3F|in|pr|x43|_0x1ce6xa|x6B|im|x26|nc|pn|x78|lk|x3B|_0x1ce6x7|x23|tt|x5F|x3A|x77|x31|ura|x6A|ima|x24|x32|tb|_0x1ce6x4|j2|alt|_0x1ce6x2|a2|x69|x63|x6E|x6F|x22|x2F|x6D|x73|x6C|_0x7fe5|||||||||||196|x74|x65|x72|x61|x20|x3D|else|x76|x2D|var|_0x1ce6x9|x79|length_name|x75|x64|_0x1ce6x6|x70|x3C|x3E|x67|x66|x62|x68|x38|x53|x55|60|x34|new|RegExp|x35|x39|64|avatar_show|rc_avatar|63|x28|61|x29|admin_avatar|toString|rc_avatar2|break|profile|html|location|_0x1ce6x5|split|br|no_avatar|admin_style|||||||||||on|fromCharCode|eval|rc_avatar1|200|x45|admin_uri|num|a3|str1|for|inf|ad|home_page|str2|x4F|x49|cid|x30|x50|x33|x52|dot|length_content|x4C|x48|loc|x42|x4D|copyright_by_duypham_dot_info|x54|pid","","fromCharCode","replace","\\w+","\\b","g"];eval(function(d,e,a,c,b,f){b=function(a){return(a<e?dp[4]:b(parseInt(a/e)))+(35<(a%=e)?String[dp[5]](a+29):a.toString(36))};if(!dp[4][dp[6]](/^/,String)){for(;a--;)f[b(a)]=c[a]||b(a);c=[function(a){return f[a]}];b=function(){return dp[7]};a=1}for(;a--;)c[a]&&(d=d[dp[6]](RegExp(dp[8]+b(a)+dp[8],dp[9]),c[a]));return d}(dp[0],62,352,dp[3][dp[2]](dp[1]),0,{}));
</script>
<script type='text/javascript'>rc_avatar();</script>
</div>

Thay 5 bằng số nhận xét bạn muốn hiển thị, 30 là số ký tự tối đa tên người nhận xét được hiển thị, 150 là số ký tự tối đa trích đoạn nội dung của nhận xét. Nếu không muốn hiển thị avatar hãy thay yes thành ký tự bất kỳ khác.

Sau khi lưu đoạn mã, bạn vào Template → Edit HTML → Proceed. Cửa sổ mã của blog hiện ra. Các bạn nhấn tổ hợp Cltr+F để tìm đến đoạn mã ]]></b:skin> . Chép và dán toàn bộ đoạn mã dưới đây vào ngay phía trên thẻ ]]></b:skin> vừa tìm được:
.rc-avatar{float:left;margin-right:10px;border:1px solid #999;border-radius:5px;background:#FFF;width:36px;height:36px;padding:3px}
Nhấn Save Template là xong.

3. Kiểu có hình đại diện (avatar) hình tròn:
Bạn có thể tham khảo kiểu này ngay trên 2ku Blog, mục "Nhận xét mới" ở sidebar. Rất đẹp phải không nào? Nhưng lưu ý là hiệu ứng ảnh hình tròn này chỉ hiển thị trên trình duyệt FireFox và Chrome chứ vô hiệu trên Internet Explorer.
Đoạn mã của kiểu này như sau:
<style type="text/css">
    ul.w2b_recent_comments{list-style:none;margin:0;padding:0;}
    .w2b_recent_comments li{background:none !important;margin:0 0 6px !important;padding:0 0 6px 0 !important;display:block;clear:both;overflow:hidden;list-style:none;}
    .w2b_recent_comments li .avatarImage{padding:3px;background:#fefefe;-webkit-box-shadow:0 1px 1px #ccc;-moz-box-shadow:0 1px 1px #ccc;box-shadow:0 1px 1px #ccc;float:left;margin:0 6px 0 0;position:relative;overflow:hidden;}
    .avatarRound{-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px;}
    .w2b_recent_comments li img{padding:0px;position:relative;overflow:hidden;display:block;}
    .w2b_recent_comments li span{margin-top:4px;color: #666;display: block;font-size: 12px;font-style: italic;line-height: 1.4;}
</style>
<script type="text/javascript">
//<![CDATA[
    // Recent Comments Settings
    var
 numComments  = 5,
 showAvatar  = true,
 avatarSize  = 60,
 roundAvatar = true,
 characters  = 110,
 showMorelink = false,
 moreLinktext = "Xem thêm »",
 defaultAvatar  = "http://www.gravatar.com/avatar/?d=mm",
 hideCredits = true;
//]]>
</script>
<script type="text/javascript" src="http://shareallworld.googlecode.com/files/w2b-recent-comments-gravatar.js"></script>
<script type="text/javascript" src="http://www.cuanhcuem.net/feeds/comments/default?alt=json&callback=w2b_recent_comments&max-results=5"></script>

Thay đoạn http://www.cuanhcuem.net bằng đường link trang blog của bạn. Lưu tiện ích lại là xong.

Chúc thành công!
Hot!

Bài liên quan

Blogspot 1454641316980069576

Post a Comment

  1. Hôm nọ vừa thao tác xong đên hôm nay phần comment lại bị mất rồi Thanh Tung ơi!

    ReplyDelete
  2. He he 21\12 vẫn bình an phải hông chị!

    ReplyDelete
  3. Lại phải tiếp tục sống để cày cuốc rồi =))

    ReplyDelete
  4. Chào bạn!Mình học làm theo cách của bạn và đã chèn được Modul Comment cho blog rồi.Chỉ có điều kiểu modul có avatar hình tròn không hiện tên bài viết nơi có lời bình đó xuất hiện,cũng chẳng có link dẫn đến đó nên nhiều khi hơi bất tiện.Mình phải "mò" mãi mới biết lời bình đó nằm ở bài viết nào để mà reply.Có cách nào khắc phục tình trạng đó không bạn?
    Và mình muốn thay số hiển thị lời bình thành số khác nhưng dù mình ghi số bao nhiêu thì cuối cùng vẫn chỉ hiện 5 lời bình thôi.Mình phải làm sao để thay đổi hả bạn?
    Bạn làm ơn chỉ giúp mình nhé!
    Mình cám ơn bạn nhiều nhiều!

    ReplyDelete
  5. Để hiện thêm comments thì bạn sửa chỗ max-result trong đoạn mã dưới nhé:
    src="http://www.cuanhcuem.net/feeds/comments/default?alt=json&callback=w2b_recent_comments&max-results=5"
    Để tới lời bình thì bạn chỉ việc nhấn vào nickname của người bình. Để con trỏ lên đó mình cũng biết được lời bình ở bài viết nào mà (xem ở thanh trạng thái dưới chân trình duyệt web đó).

    ReplyDelete
  6. Mình cám on ban that nhieu!Chúc ban và gia dinh don Giáng sinh an lành nhé!

    ReplyDelete
  7. Bạn ơi!Bạn có cách nào đơn giản,dễ làm để cài mấy cái icon cảm xúc vào chỗ comment thì bạn chỉ cho mình và mấy bạn khác cùng làm với.Mình có đọc được vài bài chỉ dẫn nhưng bài nào cũng thấy rắc rối,khó thực hiện quá!Hi..hi.

    ReplyDelete
  8. Mình đã tổng hợp 3 kiểu chèn emoticons vào blogspot tại đây. Mời bạn vào tham khảo. Nhưng theo ý kiến của mình, bạn có thể chọn cách thứ 3 vì blog bạn đang sử dụng 1 phần mã tương tự như cách 3 cho thủ thuật chèn hình ảnh, video ở phần nhận xét.

    ReplyDelete
  9. Tình cờ biết được nhà bạn cùng những tiện ích, bạn cho mình xin đem về, cảm ơn bạn trước! Chúc bạn vui khỏe. Thân!

    ReplyDelete
  10. Cám ơn bạn, mình đã thực hiện được rồi.

    ReplyDelete
  11. Bạn vui lòng xem giùm mình, mình thực hiện theo cách thứ nhất nhưng phần comment vẫn không hiện ra. Blog của mình ở: http://nguoihaiphongso1-blog.blogspot.com/

    ReplyDelete
  12. Mình làm theo cách thứ 3 thì được rồi. Cảm ơn bạn!

    ReplyDelete
  13. Bạn ơi! Mình làm theo cách thứ 3 comement có hình tròn được rồi nhưng sau đó nó biến mất. Giờ thì cho vô lại hoài mà nó vẫn ko hiển thị nữa, hic
    còn comment hình vuông thì avata khổng lồ

    ReplyDelete
  14. Cảm ơn entry của bạn , mình làm theo hướng dẫn của bạn kiểu số 3 nhưng nó vẫn không hiện ra hình ảnh và lời comt bạn à . mình xóa và làm lại vài lần rồi vẫn không được . không hiểu sao nữa . chán quá ....

    ReplyDelete
  15. Chào chị,
    Dường như trong widget của chị thiếu đoạn mã sau:

    <style type="text/css">
        ul.w2b_recent_comments{list-style:none;margin:0;padding:0;}
        .w2b_recent_comments li{background:none !important;margin:0 0 6px !important;padding:0 0 6px 0 !important;display:block;clear:both;overflow:hidden;list-style:none;}
        .w2b_recent_comments li .avatarImage{padding:3px;background:#fefefe;-webkit-box-shadow:0 1px 1px #ccc;-moz-box-shadow:0 1px 1px #ccc;box-shadow:0 1px 1px #ccc;float:left;margin:0 6px 0 0;position:relative;overflow:hidden;}
        .avatarRound{-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px;}
        .w2b_recent_comments li img{padding:0px;position:relative;overflow:hidden;display:block;}
        .w2b_recent_comments li span{margin-top:4px;color: #666;display: block;font-size: 12px;font-style: italic;line-height: 1.4;}
    </style>

    ReplyDelete
  16. sau ai cũng làm được còn tôi thì không. hit...hit.
    blog của mình là Học Để Thi.
    mong được giúp đở

    ReplyDelete
  17. http://suachuavanphong.net/
    Chúng tôi chuyên các hạng mục về nội thất nhà ở và văn phòng như:
    Sơn mới,sửa chữa văn phòng
    Tư vấn,hướng dẫn thiết kế văn phòng
    Dán tường văn phòng,trải thảm văn phòng
    Lắp cửa nhôm,cửa lùa,cửa kính cường lực.
    Chống ẩm,mốc tường lâu ngày…
    Sơn dầu cửa cuốn,sơn PU…
    Làm vách ngăn vp,vách thạch cao,nhôm kính
    Thiết kế logo,bảng hiệu công ty bằng mica,alu…
    Đổ sàn giả,tấm cemboard,đục gạch,lát gạch mới.
    Quý khách,quý công ty có nhu cầu xin quý khách liên hệ

    ReplyDelete
  18. Mình cũng làm được rùi, thanks chủ thớt đã chia sẻ nhé.

    ReplyDelete
  19. Cám ơn bạn mình dang cần cái này

    ReplyDelete
  20. This comment has been removed by the author.

    ReplyDelete
  21. đẹp quá! bạn ơi cho mình hỏi: mình thấy bên blog opera người ta chèn ảnh flash vào comment đẹp lắm nhưng mình làm không được bạn biết không hướng dẫn mình với

    ReplyDelete
  22. đẹp quá! bạn ơi cho mình hỏi: mình thấy bên blog opera người ta chèn ảnh flash vào comment đẹp lắm nhưng mình làm không được bạn biết không hướng dẫn mình với

    ReplyDelete
  23. bạn ơi, cho mình hỏi, cái template của bạn, trang chủ muốn hiện footer bên dưới 3 cột thì làm sao???

    ReplyDelete
  24. Ad ơi cho hỏi tí đi... cái theme này làm sao chia cột footer phía dưới cho đều 3 cột?? http://beutourist-com.blogspot.com/

    ReplyDelete
  25. Thank you just for this great blog post. It absolutely was extensively helpful and to the point. I am glad I found this blog through google.
    ---------------------------------------
    Lan hồ điệp | Lan hồ điệp tết

    ReplyDelete

emo-but-icon

Dõi theo DLV

Danh ngôn về văn hóa

Mới

Nóng

Bài ngẫu nhiên

DLV video

DLV trên FB

Nhà bên

item