Code Widget Bảng xếp hạng: Top 10 bài viết nổi bật có nhiều tương tác nhất cho Blog

Đây là code widget dùng để tạo bảng xếp hạng các bài viết có nhiều tương tác nhất trên Blogspot dựa trực tiếp vào số lượng bình luận của từng bài viết.

Widget hoạt động bằng cách lấy dữ liệu từ Feed JSON mặc định của Blogger, sau đó thống kê, sắp xếp và hiển thị Top 10 bài viết nổi bật có nhiều tương tác nhất trong nhóm bài được đăng gần đây.

Code có các đặc điểm chính:

✦ Chỉ tính bài viết đã xuất bản (không bao gồm bài nháp)

✦ Sắp xếp bài viết theo số bình luận giảm dần

✦ Bài cũ vẫn có thể lên top nếu nằm trong phạm vi feed và có nhiều tương tác

✦ Tự động cập nhật khi có bài khác vượt lên

✦ Hiển thị kèm số bình luận, tiêu đề và ảnh thumbnail đại diện

✦ Code thuần HTML + JavaScript, dễ chèn vào sidebar hoặc trang bất kỳ

Do giới hạn của Blogger Feed, widget chỉ thống kê trong phạm vi các bài đăng gần nhất (khoảng 500 bài), vì vậy bảng xếp hạng tập trung vào những bài viết đang được quan tâm nhiều gần đây.

Widget phù hợp dùng làm:

✦ Box “bài viết nổi bật”

✦ Mục “hot tương tác”

✦ Thanh sidebar để dẫn traffic nội bộ hiệu quả

---

Thôi đéo dài dòng nữa, dưới đây là Code Widget Bảng xếp hạng: Top 10 bài viết nổi bật có nhiều tương tác nhất cho 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.

<div id="most-comments"></div>

<style type="text/css">
#most-comments ul, #most-comments li {
  margin: 0;
  padding: 0;
  list-style: none;
}

#most-comments li {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 4px 0;
  padding: 3px 3px 3px 48px;
  border: 1px solid #333;
  color: #bbb;
  transition: all .3s;
  overflow: hidden;
}

#most-comments li:hover {
  background: #df5b5b;
}

#most-comments li:hover a {
  color: #fff;
}

.count-most {
  position: absolute;
  left: 0;
  top: 0;
  width: 40px;
  height: 100%;
  background: #383838;
  color: #fff;
  font-weight: bold;
  text-align: center;
  line-height: 36px;
}

.post-title {
  flex: 1;
}

.post-title a {
  color: #bbb;
  font-weight: 700;
  text-decoration: none;
}

.post-thumb {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
}

.post-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 4px;
}
</style>

<script type="text/javascript">
//<![CDATA[
var numPosts = 10;
var homePage = "Chitose2d.blogspot.com";

function mostComment(json) {
  if (!json.feed || !json.feed.entry) return;

  var posts = [];

  json.feed.entry.forEach(function(entry) {
    var title = entry.title.$t;

    var linkObj = entry.link.find(l => l.rel === "alternate");
    if (!linkObj) return;

    var url = linkObj.href;

    var replies = entry.link.find(
      l => l.rel === "replies" && l.type === "text/html"
    );

    var comments = 0;
    if (replies && replies.title) {
      var m = replies.title.match(/\d+/);
      comments = m ? parseInt(m[0], 10) : 0;
    }

    var thumb = "";
    if (entry.media$thumbnail && entry.media$thumbnail.url) {
      thumb = entry.media$thumbnail.url.replace(/\/s\d+-c/, "/s40-c");
    } else {
      thumb = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZYRb_yVZ70_EEt28Qirp1VWu3BBwbQqXJopKeQj7uyl-oofLtYsEaSHA72I7egZYDDKW3cK0alRfshxLKP3GSUfEUOlJeYWazQNxCZ_nO4qonrLqLn_wBjbGw1TV290WGpGFH8-KW-nKuNydHQGIZZC4klH5Yz_TIgWeMjGgm-tPOWIgAuzxwTTvR/s72/404%20-%20Chitose2D.png";
    }

    posts.push({
      title: title,
      url: url,
      comments: comments,
      thumb: thumb
    });
  });

  posts.sort(function(a, b) {
    return b.comments - a.comments;
  });

  var html = "<ul>";
  for (var i = 0; i < Math.min(numPosts, posts.length); i++) {
    html += `
      <li>
        <span class="count-most">${posts[i].comments}</span>
        <div class="post-title">
          <a href="${posts[i].url}">${posts[i].title}</a>
        </div>
        <div class="post-thumb">
          <img src="${posts[i].thumb}" loading="lazy"/>
        </div>
      </li>`;
  }
  html += "</ul>";

  document.getElementById("most-comments").innerHTML = html;
}

var s = document.createElement("script");
s.src = "https://" + homePage + "/feeds/posts/default?max-results=500&alt=json-in-script&callback=mostComment";
document.body.appendChild(s);
//]]>
</script>

Một vài đoạn cần chú ý:

• Thay dòng: Chitose2d.blogspot.com trong code thành địa chỉ blog của bạn

• Đổi cỡ ảnh: Tìm đoạn s40-c rồi sửa kích cỡ theo ý của bạn, lưu ý đoạn css này cũng phải sửa theo để tránh bị mờ.

Nếu bạn đổi ảnh mô tả thành s60-c thì đoạn css: .post-thumb { width: 40px; height: 40px; flex-shrink: 0; cũng phải sửa theo là .post-thumb { width: 60px; height: 60px; flex-shrink: 0;

Tạm kết

Nhìn chung, bạn chỉ cần copy và dán widget vào khu vực sidebar là có thể sử dụng ngay. Nếu không rành về code, bạn không nên chỉnh sửa thêm để tránh làm widget hoạt động sai hoặc bị lỗi. Trong trường hợp có đoạn nào chưa hiểu rõ, hãy để lại bình luận bên dưới, mình sẽ hỗ trợ và giải đáp sớm nhất có thể.

Hashtag: Code Widget Bảng xếp hạng: Top 10 bài viết nổi bật có nhiều tương tác nhất cho Blog

Blogger Chitose2D Code hay tiện ích

• Facebook
• Pinterest

Liên quan gần đây

Code hay tiện ích