Tình hình là mới tìm được một widget Recent Comment (bình luận gần đây) trên mạng, và mang về chỉnh CSS để xài trong blog này. Thấy nhiều bạn chắc cũng thích, chưa gì đã "ăn trộm" về xài rồi, thôi thì viết bài chia sẻ luôn cho ai muốn xài thì xài. Chán, mỗi lần làm ra cái gì mới là cứ bị auto copy :v

Không linh tinh nữa, cùng xem cách thực hiện nhé.
Các bước thực hiện
Bước 1. Vào phần Bố cục, tạo một widget HTML/Javascript.Bước 2. Dán toàn bộ code này vào:
<style>
.comment-info2_BSW {clear: both; width: 100%; float: left; margin: 0 0 15px; }
.comment-info2_BSW .left {background: #dedede; padding: 3px 15px; border-radius: 100px; display: block; text-transform: uppercase; font: 400 12px Roboto;}
.comment-info2_BSW .right a {font: 500 12px Roboto,sans-serif; text-transform: uppercase; background: #dedede; padding: 3px 15px; box-sizing: border-box; display: block; border-radius: 100px;}
.comment-info2_BSW .right a:hover {opacity: .8}
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:0 0 7px!important}.idbcomments li .avatarImage{float:left;margin-right:12px;position:relative;overflow:hidden}.idbcomments li img{border-radius:100%;position:relative;overflow:hidden;display:block;width:45px;height:45px}.idbcomments li a{font-weight:700}.idbcomments li span{color: #666; display: block; background: #dedede; padding: 10px; border-radius: 100px}
</style>
<script type="text/javascript">
//<![CDATA[
// Recent Comments
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") ? "http://1.bp.blogspot.com/-7bkcAKdpGXI/UrbyQRqvSKI/AAAAAAAAFmI/oBv_yMeYnMQ/s" + avatarSize + "/blogger.png" : -1 != n.indexOf("blogblog.com/img/openid16-rounded.gif") ? "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 ' + i + '"><a title="Truy cập đến bình luận đó" href="' + r + '"><img class="' + i + '" src="' + n + '" alt="' + o + '" width="' + avatarSize + '" height="' + avatarSize + '"/></a></div>'), e += '<a style="display:none" href="' + r + '">' + o + "</a>";
var A = d.content.$t,
v = A.replace(/(<([^>]+)>)/gi, "");
"" != v && v.length > characters ? (v = v.substring(0, characters), v += "…", 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 = 5,
showAvatar = !0,
avatarSize = 42,
roundAvatar = !0,
characters = 30,
showMorelink = !1,
defaultAvatar = "https://4.bp.blogspot.com/-jmA-qIOJIFU/WfgKSYnhm5I/AAAAAAAAABQ/ElEIBlHd31gISODb3GlA9Z_JPRKiSzvYQCLcBGAs/s35/Logo-Bac-Si-Windows.png",
hideCredits = !0,
numComments = numComments || 5,
avatarSize = avatarSize || 60,
characters = characters || 25,
defaultAvatar = defaultAvatar || "https://4.bp.blogspot.com/-jmA-qIOJIFU/WfgKSYnhm5I/AAAAAAAAABQ/ElEIBlHd31gISODb3GlA9Z_JPRKiSzvYQCLcBGAs/s35/Logo-Bac-Si-Windows.png",
moreLinktext = moreLinktext || " More »",
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&callback=idbcomments"></script>
<div class='comment-info2_BSW'>
<div class='left'>
Hiện có <b><span id='Stats1_totalComments'></span></b> bình luận
</div>
<div class='right'><a href='/cmt' target='_blank' title='Xem 200 bình loạn gần đây'>View all <i class='fa fa-angle-right' style='margin:0 0 0 5px'/></i></a>
</div>
</div>
<script type="text/javascript">
//<![CDATA[
function totalPosts(json){document.getElementById('Stats1_totalPosts').innerHTML=json.feed.openSearch$totalResults.$t};function totalComments(json){document.getElementById('Stats1_totalComments').innerHTML=json.feed.openSearch$totalResults.$t};document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&max-results=0&callback=totalPosts\"><\/script><script type=\"text/javascript\" src=\"/feeds/comments/default?alt=json-in-script&max-results=0&callback=totalComments\"><\/script>');
//]]>
</script>
cmt đầu
Trả lờiXóaQuào nhanh dữ, vừa xuất bản 1 phút trước :v
Xóa. hehe :3
Xóacòm men 2
Trả lờiXóahttps://media.tenor.co/images/065972681bf9bfbb564024333fc9e214/tenor.gif
Xóahttps://media.tenor.co/images/3ca3e3df4aef0f07989588f16e326cb5/tenor.gif cmt 3
Trả lờiXóahttps://media.tenor.co/images/80e173f100afaeb99145e1e87cf8ceb5/tenor.gif
Xóathật bất ngờ là cái bài viết mô liên quan đến BÌNH LUẬN thumbnail nào cũng có mặt của Khanh đẹp trai vào hết :v
Trả lờiXóahttp://www.linkthuthuat.com/2017/11/tao-widget-recent-comment-voi-avatar-bo.html
CMT4
Vậy à, để mai mốt né thèn TKN ra :)))
XóaTKN méo thích điều này -.-
XóaĐẹp quá Add
Trả lờiXóaĐẹp thì share một phát nào!!
Xóahttps://media.tenor.co/images/284ccb130b2619867c8153106e48f688/tenor.gif
Ủa chỉ cách comment ảnh động trên Blog này đi, sao thấy comment nhiều hình thế :3
Trả lờiXóaComment Link ảnh động thôi là hiện được.
Xóahttp://www.bacsiwindows.com/2017/11/mot-so-anh-dong-hai-huoc-cho-anh-em-thoai-mai-binh-loan.html
XóaHaha nhìn thằng này giống mình ghê :v
Xóahttps://media.tenor.co/images/284ccb130b2619867c8153106e48f688/tenor.gif
Thật à, cho tấm hình kiểm chứng đi :v
XóaSoái ca Niệm =))
Xóahttps://i.imgur.com/Wr64EvL.jpg
Ặc, méo thấy giống miếng nào luôn :)))
Xóaý nói đẹp trai giống nhau ý mà :v
Xóahttps://media.tenor.co/images/aa440153baa6f34405ef831cbf58531c/tenor.gif
XóaQuá dữ ^^
Trả lờiXóahttps://media.tenor.co/images/c47123d8c726a90ed380243c90cdb8f9/tenor.gif
XóaMình là người đến sau nên cướp cmt 6 vậy -_-
Trả lờiXóaComment thứ 8 rồi nhé :v
Xóađẹp
Trả lờiXóahttps://media.tenor.co/images/065972681bf9bfbb564024333fc9e214/tenor.gif
Xóahttps://media.tenor.co/images/065972681bf9bfbb564024333fc9e214/tenor.gif
Trả lờiXóahttps://media.tenor.co/images/80e173f100afaeb99145e1e87cf8ceb5/tenor.gif
Xóahttp://pik.vn/20148e28ba45-cb2e-4ee4-b165-3513df9c9759.gif
Xóahttps://media2.giphy.com/media/P0RWkdsRpK7ss/200_d.webp
Xóahttps://lh4.googleusercontent.com/-4pQZUoyN3-8/VALpFu56pCI/AAAAAAAAMOw/EhGJ9v-1IXU/s1600/Hinh-Anh-Dong-Hai-Huoc-Ve-Dong-Vat-%2B(7).gif
Trả lờiXóaThanh Menu cố định nên khi sử dụng điện thoại thì menu chỉ hiện được 1 phần.
Trả lờiXóaỪ để rảnh fix lại css.
XóaChịch không :v
XóaChịch https://i.imgur.com/BgyHJdY.gif
XóaTest gif mới :3
Trả lờiXóahttps://i.imgur.com/BgyHJdY.gif
Gif này cũ rồi mà :))
Xóahttps://i.imgur.com/BgyHJdY.gif