Hướng dẫn tạo bình luận cho blogger mới nhất với Avatar bo tròn

Bài viết hướng dẫn các bạn tạo Recent comment mới nhất với biểu tượng Avatar bo góc đẹp. Các bạn làm theo hướng dẫn bên dưới nhé

Bước 1: Đăng nhập vào Blogger - Bố cục thêm tiện ích  - HTML & Java Script

Bước 2: Copy đoạn code bên dưới dán vào và sửa nội dung tiêu đề cho phù hợp cũng như thay thế đường link thành đường link của Blog bạn nhé.

<h2>Bình luận mới nhất</h2>
<style>
ul.idbcomments{list-style:none;margin:0;padding:0}.idbcomments li{display:block;clear:both;overflow:hidden;list-style:none;border-bottom:0!important;word-break:break-all;padding:8px 0!important}.idbcomments li .avatarImage{float:left;margin-right:10px;position:relative;overflow:hidden}.idbcomments li img{border-radius:100%;position:relative;overflow:hidden;display:block;width:42px;height:42px}.idbcomments li a{font-weight:700}.idbcomments li span{margin-top:2px;color:#666;display:block;font-size:12px;line-height:1.4}
</style>
<script type="text/javascript">
//<![CDATA[
// Recent Comments by Pc8x
function idbcomments(a){var e;e='<ul class="idbcomments">';for(var t=0;numComments>t;t++){var r,o,n,i;if(t==a.feed.entry.length)break;e+="<li>";for(var d=a.feed.entry[t],s=0;s<d.link.length;s++)"alternate"==d.link[s].rel&&(r=d.link[s].href);for(var l=0;l<d.author.length;l++)o=d.author[l].name.$t,n=d.author[l].gd$image.src;n=-1!=n.indexOf("/s1600/")?n.replace("/s1600/","/s"+avatarSize+"-c/"):-1!=n.indexOf("/s220/")?n.replace("/s220/","/s"+avatarSize+"-c/"):-1!=n.indexOf("/s512-c/")&&0!=n.indexOf("http:")?"http:"+n.replace("/s512-c/","/s"+avatarSize+"-c/"):-1!=n.indexOf("blogblog.com/img/b16-rounded.gif")?"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8irQJOLWe3e0etN8VoBoP7k807CJSuHql3E_PKAgI1IuN2X-qJ0corcrXOu0gYqIcQ708oEI_nO3oopRLnzu02DP_phvEvepgTKTztAdMShxPPqA3BTXzVox6zSoLRGN_lx7DJTL2aj1l/"+avatarSize+"/blogger.png":-1!=n.indexOf("blogblog.com/img/openid16-rounded.gif")?"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgDRtyU38qlwGt_C9Xsc-eYkx6lIr-JCjAC_6O8rDTr8j0riBQnSqlA_ECVZ-kh3p_4io8OMrE81Nh3D46ERnytQKo9aY3nNEhIbH8GEEvCcYkILOaPxtbXfs5ewzjR52RTjZ1PfxhkRTC/"+avatarSize+"/openid.png":-1!=n.indexOf("blogblog.com/img/blank.gif")?-1!=defaultAvatar.indexOf("gravatar.com")?defaultAvatar+"&s="+avatarSize:defaultAvatar:n,1==showAvatar&&(i=1==roundAvatar?"avatarRound":"",e+='<div class="avatarImage '+i+'"><img class="'+i+'" src="'+n+'" alt="'+o+'" width="'+avatarSize+'" height="'+avatarSize+'"/></div>'),e+='<a href="'+r+'">'+o+"</a>";var A=d.content.$t,v=A.replace(/(<([^>]+)>)/gi,"");""!=v&&v.length>characters?(v=v.substring(0,characters),v+="&hellip;",1==showMorelink&&(v+='<a href="'+r+'">'+moreLinktext+"</a>")):v=v,e+="<span>"+v+"</span>",e+="</li>"}e+="</ul>";var c="";0==hideCredits&&(c="display:block;"),e+="",document.write(e)}var numComments=7,showAvatar=!0,avatarSize=42,roundAvatar=!0,characters=40,showMorelink=!1,defaultAvatar="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjX6bMs88YYstYz9Dq8tE9lXLcmYJ3gP9xPr2WQAhtYv5qY5yDnsLGIDPqIM3Ycb-1_OpVtNOT1OuqnjuxoV3JGCXwHsuKSSsN6dlYeCRU46kXLRh0EdtYHRu56LCiEvpFeNRPmpad61230/s1600/noimage.png",hideCredits=!0,numComments=numComments||5,avatarSize=avatarSize||60,characters=characters||40,defaultAvatar=defaultAvatar||"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjX6bMs88YYstYz9Dq8tE9lXLcmYJ3gP9xPr2WQAhtYv5qY5yDnsLGIDPqIM3Ycb-1_OpVtNOT1OuqnjuxoV3JGCXwHsuKSSsN6dlYeCRU46kXLRh0EdtYHRu56LCiEvpFeNRPmpad61230/s1600/noimage.png",moreLinktext=moreLinktext||" More &raquo;",showAvatar="undefined"==typeof showAvatar?!0:showAvatar,showMorelink="undefined"==typeof showMorelink?!1:showMorelink,roundAvatar="undefined"==typeof roundAvatar?!0:roundAvatar,hideCredits="undefined"==typeof hideCredits?!1:roundAvatar;
//]]>
</script>
<script type="text/javascript" src="https://vnbootstrap.blogspot.com/feeds/comments/default?alt=json&amp;callback=idbcomments&amp;max-results=7"></script>