[Blogspot] 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.

Xem thêm: Widget recent comments có thanh cuộn
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/AVvXsEgelxYjs9F55XTCHGXSW_XMke99TAGAyQOz_GVC_dOl3Llv6jL-II7JpKzHvazAPgHy2bgvuZJQJ_z9EcQa_yoZ6iQ-TbLB7YnHy61htXpB5k6LIbOFHDla9lWkyy6YQCVnAIQ15C_Bmu5Y/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  = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgelxYjs9F55XTCHGXSW_XMke99TAGAyQOz_GVC_dOl3Llv6jL-II7JpKzHvazAPgHy2bgvuZJQJ_z9EcQa_yoZ6iQ-TbLB7YnHy61htXpB5k6LIbOFHDla9lWkyy6YQCVnAIQ15C_Bmu5Y/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ả.
Chúc các bạn thành công.

Nguồn: helplogger

TSM Blogger

Chào mừng các bạn đến với TSM. Blog chia sẻ thủ thuật blogspot, tin tức công nghệ, thể thao, kho template blogspot và nhiều thứ khác. Mong các bạn luôn ủng hộ để blog luôn vững mạnh!