Hiển thị bình luận gần đây trên Blog với CSS và JavaScript

Bình luận là một phần quan trọng của blog, giúp bạn kết nối với độc giả và tạo ra những cuộc thảo luận sôi nổi. Tuy nhiên, nếu bình luận mới không hiển thị rõ ràng, rất có thể chúng sẽ bị bỏ lỡ, làm giảm đi sự tương tác đáng quý.

Trong bài viết này, mình sẽ hướng dẫn bạn cách hiển thị danh sách bình luận gần đây trên blog một cách đẹp mắt và chuyên nghiệp bằng CSS và JavaScript. Cách làm này không chỉ giúp blog của bạn trở nên sinh động hơn mà còn giúp độc giả dễ dàng theo dõi những phản hồi mới nhất.

Hãy cùng điểm qua một số tính năng nổi bật bên dưới nhé!

✔ Cập nhật bình luận mới nhất: Hiển thị tức thì mà không cần tải lại trang.

✔ Hỗ trợ avatar: Hiển thị ảnh đại diện, có thể bo tròn để đẹp hơn.

✔ Tùy chỉnh tên người dùng ẩn danh: Tự động đổi "Anonymous" thành tên khác (ví dụ: "Đặc cầu đồn lầu").

✔ Thay đổi avatar mặc định: Cho phép đặt avatar riêng cho người dùng không có ảnh.

✔ Cài đặt icon admin: Hiển thị biểu tượng đặc biệt bên cạnh tên admin để phân biệt.

✔ Giao diện gọn gàng, dễ nhìn: Tên người dùng in đậm, bình luận rõ ràng.

✔ Dẫn link trực tiếp: Mỗi bình luận có liên kết đến bài viết gốc.

✔ Tùy chỉnh linh hoạt: Điều chỉnh số lượng bình luận, kích thước avatar, hiển thị hoặc ẩn "Đọc tiếp...".

✔ Dễ tích hợp vào Blogger: Sử dụng API Blogger, chỉ cần chèn vào widget là hoạt động ngay.

Code này giúp blog chuyên nghiệp hơn, tăng tương tác và giữ chân độc giả hiệu quả! 🚀 Thôi éo dài dòng nữa, bên dưới này là hướng dẫn đơn cmn giản để nhét code vào blog.

Bước 1: Vào Blogger > Bố cục > Thêm Tiện ích Vào Bố cục (Layout). Nhấn Thêm tiện ích (Add a Gadget). Chọn HTML/JavaScript.

<style type="text/css">

a {
  color: #111111;
}

a:hover {
  color: #df5b5b; /* Màu thay đổi khi rê chuột vào link */
}

ul.tb_recent_comments {
  font-size: 12px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.tb_recent_comments li {
  background: none !important;
  margin-bottom: 10px;
  border-bottom: 1px solid #eeeeee;
  font-size: 14px;
  font-weight: bold;
  margin: 0;
  padding: 5px 0 2px !important;
  display: block;
  clear: both;
  overflow: hidden;
  list-style: none;
}

.tb_recent_comments li .avatarImage {
  padding: 0px;
  float: left;
  margin: 0 8px 4px 0;
  position: relative;
  overflow: hidden;
}

.avatarRound {
  -webkit-border-radius: 8%;
  -moz-border-radius: 8%;
  border-radius: 8%;
  border: 0px solid #ddd;
  padding: 3px;
}

.tb_recent_comments li img {
  padding: 0px;
  position: relative;
  overflow: hidden;
  display: ;
}

.tb_recent_comments li span {
  margin-top: 4px;
  color: #777777;
  display: block;
  font: 12px Mali;
}

/* Nhãn Admin - chung */
.icon.blog-author {
    font-weight: bold;
    font-size: 12px;
    padding: 2px 3px 2px 3px;
    border-radius: 2px;
    margin-left: 2px; /* Giữ khoảng cách với tên tác giả */
    display: inline-block; /* Hiển thị cùng dòng */
}

/* Admin 1 - màu */
.icon.blog-author.admin-1 {
    background: #df5b5b;
    color: #fff; 
}

/* Admin 2 - màu */
.icon.blog-author.admin-2 {
    background: #eee;
    color: #000;
}

/* Admin 3 - màu */
.icon.blog-author.admin-3 {
    background: #eee;
    color: #000;
}

/* Admin 4 - màu */
.icon.blog-author.admin-4 {
    background: #eee;
    color: #000;
}

</style>

<script type="text/javascript">
//<![CDATA[

    // Recent Comments Settings
    var numComments  = 5,
        showAvatar  = true,
        avatarSize  = 60,
        roundAvatar  = true,
        showMorelink  = true,
        moreLinktext  = " Đọc tiếp ⋙";

    var numComments = numComments || 5,
        avatarSize = avatarSize || 60,
        characters = characters || 90,
        defaultAvatar = defaultAvatar || "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3js2-m2EQFU3cPuXReC5yO-COeKz7P6RgkS4m4s-gFamlF9azzL3BT8rtO38cDunqTKThyphenhyphenWkVHi5d5m5LkcF9JtPgJNIZnqbQFbadr4qtlGhU9uf0JU2q-4QpQe-SzF43X9Czwo-b3aA/s60-c/751265.png",
        moreLinktext = moreLinktext || " More &raquo;",
        showAvatar = (typeof showAvatar === 'undefined') ? true : showAvatar,
        showMorelink = (typeof showMorelink === 'undefined') ? false : showMorelink,
        roundAvatar = (typeof roundAvatar === 'undefined') ? true : roundAvatar,
        hideCredits = (typeof hideCredits === 'undefined') ? false : roundAvatar;

    function tb_recent_comments(tb) {
        var commentsHtml;
        commentsHtml = '<ul class="tb_recent_comments">';
        for (var i = 0; i < numComments; i++) {
            var commentlink, authorName, authorAvatar, avatarClass;
            if (i == tb.feed.entry.length) break;
            commentsHtml += "<li>";
            var entry = tb.feed.entry[i];
            for (var l = 0; l < entry.link.length; l++) {
                if (entry.link[l].rel == 'alternate') {
                    commentlink = entry.link[l].href
                }
            }
            for (var a = 0; a < entry.author.length; a++) {
                authorName = entry.author[a].name.$t;
                if (authorName == "Anonymous") {
                    authorName = "Đặc cầu đồn lầu";
                }
                authorAvatar = entry.author[a].gd$image.src;
            }
            if (authorAvatar.indexOf("/s600/") != -1) {
                authorAvatar = authorAvatar.replace("/s600/", "/s" + avatarSize + "-c/");
            } else if (authorAvatar.indexOf("/s220/") != -1) {
                authorAvatar = authorAvatar.replace("/s220/", "/s" + avatarSize + "-c/");
            } else if (authorAvatar.indexOf("/s512-c/") != -1 && authorAvatar.indexOf("http:") != 0) {
                authorAvatar = "http:" + authorAvatar.replace("/s512-c/", "/s" + avatarSize + "-c/");
            } else if (authorAvatar.indexOf("blogblog.com/img/b16-rounded.gif") != -1) {
                authorAvatar = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZYRb_yVZ70_EEt28Qirp1VWu3BBwbQqXJopKeQj7uyl-oofLtYsEaSHA72I7egZYDDKW3cK0alRfshxLKP3GSUfEUOlJeYWazQNxCZ_nO4qonrLqLn_wBjbGw1TV290WGpGFH8-KW-nKuNydHQGIZZC4klH5Yz_TIgWeMjGgm-tPOWIgAuzxwTTvR/s" + avatarSize + "/404%20-%20Chitose2D.png";
            } else if (authorAvatar.indexOf("blogblog.com/img/openid16-rounded.gif") != -1) {
                authorAvatar = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyPyKued3ID-H-UPMmlJzXWsVND2rMqG-K0oZUssJLNDnwmc_tBtR9cX75R4YLrKzwglRd1MuokLsgDFXeOBvWcWht9jw9lEpzunF56u35hgLvoG2ws0XvnEogmGnRASXBS_ZE19O3cIg0/" + avatarSize + "/tb_openid_logo.png";
            } else if (authorAvatar.indexOf("blogblog.com/img/blank.gif") != -1) {
                if (defaultAvatar.indexOf("gravatar.com") != -1) {
                    authorAvatar = defaultAvatar + "&s=" + avatarSize;
                } else {
                    authorAvatar = defaultAvatar;
                }
            } else {
                authorAvatar = authorAvatar;
            }

            if (showAvatar == true) {
                if (roundAvatar == true) {
                    avatarClass = "avatarRound";
                } else {
                    avatarClass = "";
                }
                commentsHtml += "<div class=\"avatarImage " + avatarClass + "\"><img class=\"" + avatarClass + "\" src=\"" + authorAvatar + "\" alt=\"" + authorName + "\" width=\"" + avatarSize + "\" height=\"" + avatarSize + "\"/></div>";
            }

            commentsHtml += "<a href=\"" + commentlink + "\">" + authorName + "</a>";

// Danh sách tác giả với nhãn và class CSS riêng (dựa vào link Blogger)
const authorLabels = {
    "https://www.blogger.com/profile/14992905008026504738": {
        label: "Thánh Che Mắt",
        cssClass: "admin-1"
    },
    "https://www.blogger.com/profile/": { // Một link khác
        label: "Admin 2",
        cssClass: "admin-2"
    },
    "https://www.blogger.com/profile/": { // Một link khác
        label: "Admin 3",
        cssClass: "admin-3"
    }
};

// Lấy link Blogger của người bình luận
let authorLink = "";
for (let a = 0; a < entry.author.length; a++) {
    if (entry.author[a].uri) {
        authorLink = entry.author[a].uri.$t; // Lấy URL của tác giả
        break;
    }
}

// Kiểm tra nếu tác giả có trong danh sách và hiển thị nhãn
if (authorLabels.hasOwnProperty(authorLink)) {
    const authorData = authorLabels[authorLink];
    commentsHtml += ` <span class="icon blog-author ${authorData.cssClass}">${authorData.label}</span>`;
}


            var commHTML = entry.content.$t;
            var commBody = commHTML.replace(/(<([^>]+)>)/ig, "");
            // Kiểm tra xem bình luận có chứa link ảnh không
            var imageRegex = /(https?:\/\/[^\s]+\.(?:png|jpg|jpeg|gif|webp))/gi;
            var imageHtml = ""; 
            commBody = commBody.replace(imageRegex, function(match) {
                match = decodeURIComponent(match);
                if (match.includes("blogger.googleusercontent.com")) {
                    match = match.replace(/\/s\d+\//, "/s150/"); 
                }
    imageHtml += '<img src="' + match + '" style="width:150px; height:auto; margin-top:7px;border-radius:10px;" referrerpolicy="no-referrer">';
                return ""; 
            });

            // Giới hạn ký tự văn bản nhưng giữ nguyên ảnh
            if (commBody.length > characters) {
                commBody = commBody.substring(0, characters) + "&hellip;";
                if (showMorelink == true) {
                    commBody += "<b><a href=\"" + commentlink + "\">" + moreLinktext + "</b></a>";
                }
            }

            commentsHtml += "<span>" + commBody + "</span>" + imageHtml;
            commentsHtml += "</li>";
        }
        commentsHtml += '</ul>';
        document.write(commentsHtml);
    }

//]]>
</script>


<div id="article">
<script src="/feeds/comments/default?alt=json&amp;callback=tb_recent_comments&amp;max-results=10" type="text/javascript"></script></div>

Một vài điểm lưu ý trong code:

Tất cả tính năng đã có trong code, nếu bạn gặp khó khăn về vấn đề chỉnh sửa theo ý thích thì hãy để lại bình luận bên dưới, chứ đựu móa giải thích cái code này dài dòng kinh, làm biếng vãi lòn. 🙄

Kết luận

Với mã JavaScript và CSS trên, bạn có thể dễ dàng tạo ra một phần bình luận hấp dẫn và tương tác hơn cho blog của mình. Các tính năng nổi bật bao gồm:

• Hiển thị avatar người bình luận với tùy chọn bo góc hoặc hình tròn.

• Điều chỉnh kích thước avatar theo mong muốn.

• Tự động thay thế avatar mặc định khi không có ảnh đại diện.

• Thêm liên kết "Đọc tiếp" để người dùng có thể xem đầy đủ nội dung bình luận.

• Tùy chỉnh tên người bình luận, ví dụ như gán biểu tượng riêng cho admin (như "Chân trời sự kiện").

Bạn có thể thay đổi số lượng bình luận, kiểu dáng, và nhiều yếu tố khác để phù hợp với phong cách của blog mình. Với đoạn mã này, phần bình luận trên blog sẽ trở nên thú vị và dễ sử dụng hơn, giúp tăng cường sự tương tác với người đọc.

Hashtag: Hiển thị bình luận gần đây trên Blog với CSS và JavaScript

Blogger Chitose2D Code hay tiện ích

• Facebook
• Pinterest

Liên quan gần đây

Hiển thị bình luận gần đây trên Blog với CSS và JavaScript

14/02/2025-Chân trời sự kiện

Hướng dẫn thêm Mini Slider vào bài viết Blogger/Blogspot

15/01/2025-Chân trời sự kiện

Code Slider ảnh cực đẹp và hiện đại cho Blogger/Blogspot

10/01/2025-Chân trời sự kiện

Cách để phân trang trong bài viết Blogger/Blogspot bằng số điều hướng

01/12/2024-Chân trời sự kiện

Cách thêm khung ghi chú vào Blogger/Blogspot

27/11/2024-Chân trời sự kiện

Cách thêm trình phát nhạc có danh sách phát vào Blogger/Blogspot bằng HTML, CSS & JavaScript

15/11/2024-Chân trời sự kiện

• Kế tiếp ⇨ Én Emoticons | Biểu tượng cảm xúc
• ⇦ Trước đó Hướng dẫn thêm Mini Slider vào bài viết Blogger/Blogspot