Tạo Widget Comment mới nhất có avatar Cho blogspot Cực Chất

Tạo Widget Comment mới nhất có avatar Cho blogspot Cực Chất

Hello anh em, hôm nay mình sẽ hướng dẫn anh em cách tạo widget nhận xét mới nhất cho blogspot có avatar người dùng nhìn cực xịn.


tao widget binh luan gan day cho blogspot co avatar nguoi dung nhin  cuc xin

Tạo Widget Comment Gần Đây Cho Blogspot.

Bước 1: Đầu tiên các bạn vào Blogger -> Chọn Bố Cục -> Thêm tiện Ích -> Html/JavaScrip

Bước 2: Các bạn copy và dán đoạn code sau vào:

<h3 class='title'>
Comments
</h3>
<div class='widget-content'>
<script type="text/javascript">
//<![CDATA[
function CommentsUX(a){var e;e='<ul class="CommentsUX">';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("https://cdn0.iconfinder.com/data/icons/set-ui-app-android/32/8-512.png")?"http://1.bp.blogspot.com/-7bkcAKdpGXI/UrbyQRqvSKI/AAAAAAAAFmI/oBv_yMeYnMQ/s"+avatarSize+"/blogger.png":-1!=n.indexOf("https://cdn0.iconfinder.com/data/icons/set-ui-app-android/32/8-512.png")?"http://2.bp.blogspot.com/-VgnInuIUKBU/UrbzyXTYWRI/AAAAAAAAFmU/3f_Vfj3TI6A/s"+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"><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://cdn0.iconfinder.com/data/icons/set-ui-app-android/32/8-512.png",hideCredits=!0,numComments=numComments||5,avatarSize=avatarSize||60,characters=characters||40,defaultAvatar=defaultAvatar||"https://cdn0.iconfinder.com/data/icons/set-ui-app-android/32/8-512.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="/feeds/comments/default?alt=json&amp;callback=CommentsUX&amp;max-results=5"></script>
<style type="text/css">
.CommentsUX li{margin:15px 0 0;padding:5px 0 5px 5px;display:block;clear:both;overflow:hidden;list-style:none;border: 1px solid #eee;border-radius: 5px;}
.CommentsUX li .AvatarRound{float:left;margin-right:10px;position:relative;overflow:hidden}
.CommentsUX li img{border-radius:100%;position:relative;overflow:hidden;display:block;width:42px;height:42px}
.CommentsUX li a{font-weight:700;color: #2f353b;line-height: 1.3em;}
.CommentsUX span{margin-top:2px;color:#666;display:block;font-size:12px;line-height:1.4}
</style>
</div>

Bước 3: Lưu lại và xem kết quả!


Lời Kết

Bên trên là cách để tạo widget bình luận gần đây cho Blogspot. Nếu có thắc mắc gì hãy comment xuống phía dưới để được hỗ trợ.