Tạo widget Recent Comment với avatar bo tròn tuyệt đẹp cho Blogspot
/ lúc / 67 bình luận
Ra mắt BSW Community - trang đăng bài tự do dành cho bạn, thoải mái trao đổi, đặt câu hỏi, thắc mắc, viết bài viết mới hay thậm chí rao vặt, buôn bán. Click trải nghiệm ngay!
Hello xin chào tất cả các bạn, chào mừng các bạn trở lại với blog Bác Sĩ Windows.
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
Tạo widget Recent Comment với avatar bo tròn tuyệt đẹp cho Blogspot - Bác Sĩ Windows
Đây là một widget gọn nhẹ giúp hiện ra những bình luận mới nhất, giúp bạn dễ dàng quản lý được ai đã bình luận trên trang web của mình để tiện việc theo dõi & trả lời một cách nhanh chóng. Demo xem tại chân trang của blog mình.
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 += "&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 = 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 &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=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>
Bước 3. Lưu tiện ích. Nhớ chỉnh lại một số thông số để phù hợp với blog của bạn.

Lời kết

Đây là widget gọn và nhẹ giúp bạn dễ dàng quản lý được nhận xét/bình luận trên blog của mình. Ngoài ra mình có thêm code thống kê tổng số bình luận trên blog vào để người xẻm có thể biết được hiện tại có bao nhiêu bình luận trên blog. Bạn có thể xóa nếu không muốn nhé.
Nếu thấy bài viết hay & hữu ích hãy bình luận và chia sẻ nhé. Ngoài ra nếu thực hiện không được hoặc xảy ra lỗi thì cũng bình luận xuống bên dưới để mình giúp đỡ (nếu được). Chúc các bạn thành công.
Source code lấy ở đâu quên rồi @@

BÌNH LUẬN VỀ BÀI VIẾT (67)

avatar
Văn Huy SYSTEM

cmt đầu

TRẢ LỜI
avatar
Trường Nguyễn

Quào nhanh dữ, vừa xuất bản 1 phút trước :v

TRẢ LỜI
avatar
Star Dũng Blog

còm men 2

TRẢ LỜI
avatar
Văn Huy SYSTEM

. hehe :3

TRẢ LỜI
avatar
Trường Nguyễn

https://media.tenor.co/images/065972681bf9bfbb564024333fc9e214/tenor.gif

TRẢ LỜI
avatar
Shop Thủ Thuật

https://media.tenor.co/images/3ca3e3df4aef0f07989588f16e326cb5/tenor.gif cmt 3

TRẢ LỜI
avatar
Trọng Khanh Nguyễn

thậ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

http://www.linkthuthuat.com/2017/11/tao-widget-recent-comment-voi-avatar-bo.html
CMT4

TRẢ LỜI
avatar
Quách Nhị

Đẹp quá Add

TRẢ LỜI
avatar
Trường Nguyễn

Vậy à, để mai mốt né thèn TKN ra :)))

TRẢ LỜI
avatar
Trường Nguyễn

Đẹp thì share một phát nào!!
https://media.tenor.co/images/284ccb130b2619867c8153106e48f688/tenor.gif

TRẢ LỜI
avatar
Trường Nguyễn

https://media.tenor.co/images/80e173f100afaeb99145e1e87cf8ceb5/tenor.gif

TRẢ LỜI
avatar
Niệm Style Blog

Ủ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ỜI
avatar
Star Cường IT ­

Comment Link ảnh động thôi là hiện được.

TRẢ LỜI
avatar
Trường Nguyễn

http://www.bacsiwindows.com/2017/11/mot-so-anh-dong-hai-huoc-cho-anh-em-thoai-mai-binh-loan.html

TRẢ LỜI
avatar
Lý Văn Bảo

Quá dữ ^^

TRẢ LỜI
avatar
Tính Getter

Mình là người đến sau nên cướp cmt 6 vậy -_-

TRẢ LỜI
avatar
Trường Nguyễn

Comment thứ 8 rồi nhé :v

TRẢ LỜI
avatar
Trường Nguyễn

https://media.tenor.co/images/c47123d8c726a90ed380243c90cdb8f9/tenor.gif

TRẢ LỜI
avatar
Niệm Style Blog

Haha nhìn thằng này giống mình ghê :v
https://media.tenor.co/images/284ccb130b2619867c8153106e48f688/tenor.gif

TRẢ LỜI
avatar
Star Bình

đẹp

TRẢ LỜI
avatar
Trường Nguyễn

Thật à, cho tấm hình kiểm chứng đi :v

TRẢ LỜI
avatar
Trường Nguyễn

https://media.tenor.co/images/065972681bf9bfbb564024333fc9e214/tenor.gif

TRẢ LỜI
avatar
Niệm Style Blog

Soái ca Niệm =))
https://i.imgur.com/Wr64EvL.jpg

TRẢ LỜI
avatar
Trường Nguyễn

Ặc, méo thấy giống miếng nào luôn :)))

TRẢ LỜI
avatar
Niệm Style Blog

ý nói đẹp trai giống nhau ý mà :v

TRẢ LỜI
avatar
Trường Nguyễn

https://media.tenor.co/images/aa440153baa6f34405ef831cbf58531c/tenor.gif

TRẢ LỜI
avatar
Trọng Khanh Nguyễn

TKN méo thích điều này -.-

TRẢ LỜI
avatar
Duy Ripper

https://media.tenor.co/images/065972681bf9bfbb564024333fc9e214/tenor.gif

TRẢ LỜI
avatar
Trường Nguyễn

https://media.tenor.co/images/80e173f100afaeb99145e1e87cf8ceb5/tenor.gif

TRẢ LỜI
avatar
Star Cường IT ­

https://lh4.googleusercontent.com/-4pQZUoyN3-8/VALpFu56pCI/AAAAAAAAMOw/EhGJ9v-1IXU/s1600/Hinh-Anh-Dong-Hai-Huoc-Ve-Dong-Vat-%2B(7).gif

TRẢ LỜI
avatar
Star Cường IT ­

http://pik.vn/20148e28ba45-cb2e-4ee4-b165-3513df9c9759.gif

TRẢ LỜI
avatar
Trường Nguyễn

https://media2.giphy.com/media/P0RWkdsRpK7ss/200_d.webp

TRẢ LỜI
avatar
Star Cường IT ­

Thanh Menu cố định nên khi sử dụng điện thoại thì menu chỉ hiện được 1 phần.

TRẢ LỜI
avatar
Trường Nguyễn

Ừ để rảnh fix lại css.

TRẢ LỜI
avatar
Star Cường IT ­

Chịch không :v

TRẢ LỜI
avatar
Star Bình

Test gif mới :3
https://i.imgur.com/BgyHJdY.gif

TRẢ LỜI
avatar
Trường Nguyễn

Chịch https://i.imgur.com/BgyHJdY.gif

TRẢ LỜI
avatar
Trường Nguyễn

Gif này cũ rồi mà :))
https://i.imgur.com/BgyHJdY.gif

TRẢ LỜI
avatar
Trường Nguyễn

Bài này ít bình loạn quá, lên nào!
https://media.giphy.com/media/OYPYjvGWYGre0/giphy.gif

TRẢ LỜI
avatar
Trọng Khanh Nguyễn

blog thành group cha rồi :3

TRẢ LỜI
avatar
Trường Nguyễn

Vẫn chưa giống lắm :v

TRẢ LỜI
avatar
Trọng Khanh Nguyễn

h ko biết blog a là home fb hay group fb nữa :3

TRẢ LỜI
avatar
Trường Nguyễn

Cả 2 gọp lại thành 1 luôn đó :v

TRẢ LỜI
avatar
Trọng Khanh Nguyễn

nhìn ko quen lắm :3

TRẢ LỜI
avatar
Trường Nguyễn

Dần dần rồi quen, để xem ý kiến mọi người thế nào :v không được thì xóa

TRẢ LỜI
avatar
Trọng Khanh Nguyễn

a thêm cái ảnh to ở trên luôn :v

TRẢ LỜI
avatar
Trọng Khanh Nguyễn

thêm giống cái pagiis luôn ý a

TRẢ LỜI
avatar
Trọng Khanh Nguyễn

pages

TRẢ LỜI
avatar
Trường Nguyễn

Cái đấy để ngâm cứu thêm vào trang giới thiệu thì hợp hơn ý.

TRẢ LỜI
avatar
Star Cường IT ­

Chu choa mọa ơi, template gì mà chất vãi :v Mà theo tui nghĩ nên tắt cái load đi, đẹp thì đẹp thật mà vào nhiều cảm thấy trang load chậm :v không phải chậm vì thêm cái load này nên nặng mà do hiệu ứng khi load nó trắng.

TRẢ LỜI
avatar
Star Sơn IT

Tưởng bác Trường nghỉ mất rồi chứ!

TRẢ LỜI
avatar
Trường Nguyễn

Oke (y)

TRẢ LỜI
avatar
Trường Nguyễn

Cũng muốn nghỉ lắm đó bác, nhiều người thúc quá nên không nghỉ được...

TRẢ LỜI
avatar
Star Cường IT ­

Giờ đẹp trai lại rồi :v

TRẢ LỜI
avatar
Star Cường IT ­

Tui thì cũng muốn thúc mà nhắn tin không thấy rep :v

TRẢ LỜI
avatar
Trường Nguyễn

Cảm ơn :v

TRẢ LỜI
avatar
Trường Nguyễn

Không có check tin nhắn đang chờ!!

TRẢ LỜI
avatar
Nguyễn Thúy Hằng

https://i.imgur.com/XkKXhUU.png

TRẢ LỜI
avatar
Trường Nguyễn

Gì vậy Hằng!?

TRẢ LỜI
avatar
Star Cường IT ­

Chắc nó nằm mơ thấy template cũ :v

TRẢ LỜI
avatar
Niệm Style Blog

https://i.imgur.com/Wr64EvL.jpg

TRẢ LỜI
avatar
Trường Nguyễn

Gì đây ông Niệm?

TRẢ LỜI
avatar
Quách Nhị

Bài viết rất hay, nhưng còn phần code của page ViewAll em k biết viết sao á. Mong Add hướng dẫn luôn phần đó với.

TRẢ LỜI
avatar
Quách Nhị

Còn phần code của cái page ViewAll thì làm sao Add, hướng dẫn em với.
Thanks

TRẢ LỜI
avatar
Trường Nguyễn

Em xem tại đây nhé: Tại trang Recent Comment...

TRẢ LỜI
avatar
Việt Hưng

không như demo ở tấm ảnh trên nhỉ ? Ông chỉnh lại cho tôi được không ?
https://viethungtest.blogspot.com/

TRẢ LỜI
avatar
Trường Nguyễn

Thêm trước ]]></b:skin> 2 dòng này:
#footer-wrapper .widget li:before {display:none!important}
#footer-wrapper .widget li {width: 100%!important}

TRẢ LỜI

THAM GIA TRANH TOP BÌNH LUẬN NGAY!

Một số lưu ý khi bình luận

Mọi bình luận sai nội quy sẽ bị xóa mà không cần báo trước (xem nội quy).

Bấm Thông báo cho tôi bên dưới khung bình luận để nhận thông báo khi admin trả lời.

Bạn có thể dùng ảnh động hoặc mã hóa code HTML để bình luận.