TẠO RECENT COMMENTS CÓ BO TRÒN GÓC AVATAR ĐẸP CHO BLOG

Tiếp tục series chia sẻ widget thì hôm nay mình sẽ chia sẻ cho các bạn 1 mẫu Recent comments (bình luận mới nhất) cho blog với hiệu ứng bo tròn góc avatar cực đẹp.

CÁCH THỰC HIỆN:Bước 1: Truy cập quản trị Blogger.
Bước 2: Bố cục - Thêm tiện ích - HTML/Javascript - Copy và paste đoạn code dưới vào khung nội dung.

<style type="text/css">ul.helploggercomments{list-style: none;margin: 0;padding: 0;} .helploggercomments li {background: none !important;margin: 0 0 6px !important;padding: 0 0 6px 0 !important;display: block;clear: both;overflow: hidden;list-style: none;word-break:break-all;} .helploggercomments 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;} .helploggercomments li img {padding: 0px;position: relative;overflow: hidden;display: block;} .helploggercomments 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  = 40, showMorelink = false, moreLinktext = "More »", defaultAvatar  = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHx_4vagyjurZPHtuIT6MohfAjtWPmGGSVn_JZnsAdz0YafWT6QxoDMsNceQkmfn6MHv2m8BZ1s9lrC-ep_dfhsqqQJFcTosvyMeIX3vSsvG7Wm-APYaUuP9PZEgUUHpaJh50YNqCP4pTz/s1600/default-avatar.jpg", hideCredits = true; //]]></script><script type="text/javascript">eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('7 E=E||5,8=8||12,o=o||13,k=k||"h://4.F.p.f/-14/15/16/17/G/18-19.1a",H=H||" 1b &1c;",q=(r q===\'u\')?j:q,v=(r v===\'u\')?Q:v,m=(r m===\'u\')?j:m,I=(r I===\'u\')?Q:m;1d R(w){7 9;9=\'<s J="R">\';K(7 i=0;i<E;i++){7 x,y,3,n;6(i==w.T.b.z)1e;9+="<u>";7 b=w.T.b[i];K(7 l=0;l<b.L.z;l++){6(b.L[l].1f==\'1g\'){x=b.L[l].A}}K(7 a=0;a<b.M.z;a++){y=b.M[a].1h.$t;3=b.M[a].1i$1j.V}6(3.g("/G/")!=-1){3=3.B("/G/","/s"+8+"-c/")}e 6(3.g("/W/")!=-1){3=3.B("/W/","/s"+8+"-c/")}e 6(3.g("/X-c/")!=-1&&3.g("h:")!=0){3="h:"+3.B("/X-c/","/s"+8+"-c/")}e 6(3.g("N.f/C/1k-Y.O")!=-1){3="h://1.F.p.f/-1l/1m/1n/1o/s"+8+"/1p.Z"}e 6(3.g("N.f/C/1q-Y.O")!=-1){3="h://2.F.p.f/-1r/1s/1t/1u/s"+8+"/1v.Z"}e 6(3.g("N.f/C/1w.O")!=-1){6(k.g("1x.f")!=-1){3=k+"&s="+8}e{3=k}}e{3=3}6(q==j){6(m==j){n="1y"}e{n=""}9+="<10 J=\\"1z "+n+"\\"><c J=\\""+n+"\\" V=\\""+3+"\\" 1A=\\""+y+"\\" 1B=\\""+8+"\\" 1C=\\""+8+"\\"/></10>"}9+="<a A=\\""+x+"\\">"+y+"</a>";7 11=b.1D.$t;7 d=11.B(/(<([^>]+)>)/1E,"");6(d!=""&&d.z>o){d=d.1F(0,o);d+="&1G;";6(v==j){d+="<a A=\\""+x+"\\">"+H+"</a>"}}e{d=d}9+="<d>"+d+"</D>";9+="</U>"}9+=\'</S>\';7 P="";6(I==j){P="1H:1I;"}9+="<d 1J=\\"1K-1L:1M;1N:1O;1P-1Q:1R;"+P+"\\">1S 1T<a A=\\"h://w.p.f/\\"> 1U</a></D>";1V.1W(9)}',62,121,'|||authorAvatar|||if|var|avatarSize|commentsHtml||entry||commBody|else|com|indexOf|http||true|defaultAvatar||roundAvatar|avatarClass|characters|blogspot|showAvatar|typeof|||undefined|showMorelink|helplogger|commentlink|authorName|length|href|replace|img|span|numComments|bp|s1600|moreLinktext|hideCredits|class|for|link|author|blogblog|gif|hideCSS|false|helploggercomments|ul|feed|li|src|s220|s512|rounded|png|div|commHTML|60|40|SRSVCXNxbAc|UrbxxXd06YI|AAAAAAAAFl4|332qncR9pD4|default|avatar|jpg|More|raquo|function|break|rel|alternate|name|gd|image|b16|7bkcAKdpGXI|UrbyQRqvSKI|AAAAAAAAFmI|oBv_yMeYnMQ|blogger|openid16|VgnInuIUKBU|UrbzyXTYWRI|AAAAAAAAFmU|3f_Vfj3TI6A|openid|blank|gravatar|avatarRound|avatarImage|alt|width|height|content|ig|substring|hellip|visibility|hidden|style|font|size|10px|display|block|text|align|right|Widget|by|Helplogger|document|write'.split('|'),0,{})) </script><script type="text/javascript" src="http://urlblog.blogspot.com/feeds/comments/default?alt=json&callback=helploggercomments&max-results=5"></script>

Bạn hãy sửa những chỗ sau sao cho phù hợp với blog bạn nhé.

var numComments  = 5, //số lượng bình luận
showAvatar  = true, //cho phép hiện avatar
avatarSize  = 60, //kích thước avatar
roundAvatar = true,
characters  = 40, //số lượng kí tự bình luận
showMorelink = false, //cho hiện chế độ read more (true=cho phép)
moreLinktext = "More »",
defaultAvatar  = "http:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHx_4vagyjurZPHtuIT6MohfAjtWPmGGSVn_JZnsAdz0YafWT6QxoDMsNceQkmfn6MHv2m8BZ1s9lrC-ep_dfhsqqQJFcTosvyMeIX3vSsvG7Wm-APYaUuP9PZEgUUHpaJh50YNqCP4pTz/s1600/default-avatar.jpg", //avatar mặc định (dùng cho nặc danh...)
http://urlblog.blogspot.com //địa chỉ blog bạn 
max-results=5 //số bình luận tối đa

Bước 3: Lưu widget lại và chiêm ngưỡng thành quả.