Tạo widget Recent Comment với avatar bo tròn tuyệt đẹp cho Blogspot
/ lúc / 87 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: idblanter.com

87 nhận xét:

Văn Huy SYSTEM nói...

cmt đầu

Trường Nguyễn nói...

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

Star Dũng Blog nói...

còm men 2

Văn Huy SYSTEM nói...

. hehe :3

Trường Nguyễn nói...

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

Shop Thủ Thuật nói...

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

Trọng Khanh Nguyễn nói...

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

Quách Nhị nói...

Đẹp quá Add

Trường Nguyễn nói...

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

Trường Nguyễn nói...

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

Trường Nguyễn nói...

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

Niệm Style Blog nói...

Ủa chỉ cách comment ảnh động trên Blog này đi, sao thấy comment nhiều hình thế :3

Star Cường IT ­ nói...

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

Trường Nguyễn nói...

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

Lý Văn Bảo nói...

Quá dữ ^^

Tính Getter nói...

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

Trường Nguyễn nói...

Comment thứ 8 rồi nhé :v

Trường Nguyễn nói...

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

Niệm Style Blog nói...

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

Star Bình nói...

đẹp

Trường Nguyễn nói...

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

Trường Nguyễn nói...

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

Niệm Style Blog nói...

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

Trường Nguyễn nói...

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

Niệm Style Blog nói...

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

Trường Nguyễn nói...

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

Trọng Khanh Nguyễn nói...

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

Duy Ripper nói...

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

Trường Nguyễn nói...

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

Star Cường IT ­ nói...

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

Star Cường IT ­ nói...

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

Trường Nguyễn nói...

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

Star Cường IT ­ nói...

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

Trường Nguyễn nói...

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

Star Cường IT ­ nói...

Chịch không :v

Star Bình nói...

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

Trường Nguyễn nói...

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

Trường Nguyễn nói...

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

Trường Nguyễn nói...

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

Trọng Khanh Nguyễn nói...

blog thành group cha rồi :3

Trường Nguyễn nói...

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

Trọng Khanh Nguyễn nói...

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

Trường Nguyễn nói...

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

Trọng Khanh Nguyễn nói...

nhìn ko quen lắm :3

Trường Nguyễn nói...

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ọng Khanh Nguyễn nói...

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

Trọng Khanh Nguyễn nói...

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

Trọng Khanh Nguyễn nói...

pages

Trường Nguyễn nói...

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

Star Cường IT ­ nói...

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.

Star Sơn IT nói...

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

Trường Nguyễn nói...

Oke (y)

Trường Nguyễn nói...

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

Star Cường IT ­ nói...

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

Star Cường IT ­ nói...

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

Trường Nguyễn nói...

Cảm ơn :v

Trường Nguyễn nói...

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

Nguyễn Thúy Hằng nói...

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

Trường Nguyễn nói...

Gì vậy Hằng!?

Star Cường IT ­ nói...

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

Niệm Style Blog nói...

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

Trường Nguyễn nói...

Gì đây ông Niệm?

Quách Nhị nói...

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.

Quách Nhị nói...

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ường Nguyễn nói...

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

Việt Hưng nói...

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ường Nguyễn nói...

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ọng Khanh Nguyễn nói...

source: idblanter

Trần Thanh Bình nói...

idblanter.com

Trường Nguyễn nói...

Đã thêm nguồn, cảm ơn nhe

XemGi.Tk nói...

Nhận xét này đã bị quản trị viên blog xóa.

Trường Nguyễn nói...

Cảm ơn bạn, nếu bạn còn tiếp tục spam link mình sẽ chặn vĩnh viễn.

Xem nội quy

Star Đức Blog nói...

Ủa anh Trường ơi ! Em hỏi nhé. Làm thế nào để chỉnh sửa font arial mặc định cho blogspot vậy ? Em cài font awesome nó lỗi thành font times new roman luôn !
Link : http://dome-itttt.blogspot.com/
Cảm ơn anh ạ !

Trường Nguyễn nói...

Đầu tiên thêm Font vào Template (tìm trên Google Fonts)
Sau đó muốn sử dụng cho thành phần nào trên Blog thì sử dụng CSS này:
#ID hoặc .class {font-family: "Tên_font"; font-size: kích thước; font-weight: độ dày}

Star Đức Blog nói...

Cảm ơn !

Star Đức Blog nói...

Muốn sử dụng tất cả thì làm sao hả anh ?

Trường Nguyễn nói...

body{font-family: ... }

Star Đức Blog nói...

Cụ thể đi anh

Trường Nguyễn nói...

Làm như bình luận trên của anh đó, thêm font vào template rồi thêm css là được rồi.

Star Đức Blog nói...

Temp hiện tại bao nhiêu tiền ạ ?

Trường Nguyễn nói...

Nhận xét này đã bị tác giả xóa.

Trường Nguyễn nói...

À mà anh không bán Template hiện tại nha.

Star Cường IT ­ nói...

Nhận xét này đã bị tác giả xóa.

Trường Nguyễn nói...

Hửm, vẫn như cũ mà ? :D

Star Cường IT ­ nói...

Thấy khác mà ?

Trường Nguyễn nói...

Khác gì đâu? Không khác gì cả..

Star Sơn IT nói...

Font template đẹp anh

Đăng nhận xét