Code phân trang comment blogger

Zalo 0971539681 Tư vấn & Hỗ trợ
Share code load toàn bộ comment blogger lên 1 trang hoặc bài viết có phân trang, phù hợp cho anh em Blogger dang dùng comment mặc định của blog.

Các cài đặt là vô blog tạo một trang đặt tên tùy ý, dán toàn bộ code dưới vào chế độ soạn HTML và lưu lại và xuất bản trang đó là xong.




<style>
.boxContainer{max-width:800px;margin:20px auto}.comment{display:flex;align-items:center;border:1px solid #ddd;padding:15px;margin-bottom:20px;border-radius:8px;background-color:#fff;box-shadow:0 2px 4px rgba(0,0,0,0.1);opacity:0;transform:translateY(20px);transition:opacity 0.3s ease,transform 0.3s ease;overflow:hidden}.comment img{width:60px;height:60px;border-radius:50%;margin-right:15px;margin-left:0}.comment p{margin:0;flex:1}.comment strong{color:#007bff}.comment a{color:#007bff;text-decoration:none;display:inline-block;margin-top:10px}.comment a:hover{text-decoration:underline}#pagination{text-align:center}.pagination{display:flex;justify-content:center;margin-top:20px}.pagination-link{display:inline-block;padding:8px 16px;margin:0 4px;border:1px solid #007bff;border-radius:4px;color:#007bff;text-decoration:none;cursor:pointer;transition:background-color 0.3s ease}.pagination-link:hover{background-color:#007bff;color:#fff}.pagination-link.active{background-color:#007bff;color:#fff}
</style>
<div class="boxContainer">
  <div id="commentsContainer"></div>
  <div id="pagination"></div>
</div>
<script>
  window.addEventListener('load', function() {
    const COMMENTS_PER_PAGE = 5;
    const AVATAR_SIZE = 60;
    let currentPage = 1;
    let isLoading = false;

    function getAuthorAvatar(comment) {
      const authorAvatar = comment.author[0].gd$image.src;
      if ("https://img1.blogblog.com/img/b16-rounded.gif" !== authorAvatar && "https://img1.blogblog.com/img/blank.gif" !== authorAvatar) {
        return authorAvatar.replace("s512-c", `s${AVATAR_SIZE}-c`);
      } else {
        return `https://lh3.googleusercontent.com/ANGu71MmGFiRWSQ4jpbnE2-y0SEUT981sZnTHX9d5FwnNIVNnRcxwxrvDX_Wtyo6mVRXz_HYj0SlEitr7A=s${AVATAR_SIZE}-c`;
      }
    }

    function updatePagination(totalPages) {
      const maxVisiblePages = 5;
      let paginationHTML = '';
      const startPage = Math.max(1, currentPage - Math.floor(maxVisiblePages / 2));
      const endPage = Math.min(totalPages, startPage + maxVisiblePages - 1);
      if (currentPage > 1) {
        paginationHTML += '<span class="pagination-link" data-page="1">Đầu trang</span> ';
      }
      if (startPage > 1) {
        paginationHTML += '<span class="pagination-link" data-page="1">1</span> ';
        if (startPage > 2) {
          paginationHTML += '<span>...</span> ';
        }
      }
      for (let i = startPage; i <= endPage; i++) {
        const isActive = i === currentPage ? 'active' : '';
        paginationHTML += `<span class="pagination-link ${isActive}" data-page="${i}">${i}</span> `;
      }
      if (endPage < totalPages) {
        if (endPage < totalPages - 1) {
          paginationHTML += '<span>...</span> ';
        }
        paginationHTML += `<span class="pagination-link" data-page="${totalPages}">${totalPages}</span> `;
      }
      if (currentPage < totalPages) {
        paginationHTML += `<span class="pagination-link" data-page="${totalPages}">Cuối trang</span>`;
      }
      $('#pagination').html(paginationHTML);
      $('.pagination-link').on('click', function() {
        currentPage = parseInt($(this).data('page'));
        loadComments();
      });
    }

    function loadComments() {
      if (isLoading) return;
      isLoading = true;
      $('#loadingIndicator').show();
      const startIndex = (currentPage - 1) * COMMENTS_PER_PAGE + 1;
      const apiUrl = '/feeds/comments/default?alt=json-in-script&max-results=' + COMMENTS_PER_PAGE + '&start-index=' + startIndex;
      $.ajax({
        url: apiUrl,
        type: 'GET',
        dataType: 'jsonp',
        success: function(data) {
          handleComments(data);
        },
        error: function(error) {
          handleError(error);
        }
      });
    }

    function handleComments(data) {
      const comments = data.feed.entry;
      const totalComments = parseInt(data.feed.openSearch$totalResults.$t);
      const totalPages = Math.ceil(totalComments / COMMENTS_PER_PAGE);
      if (comments.length > 0) {
        $('#commentsContainer').empty(); // Clear existing comments
        for (let i = 0; i < comments.length; i++) {
          const comment = comments[i];
          const authorName = comment.author[0].name.$t;
          const authorAvatar = getAuthorAvatar(comment);
          const commentContent = comment.content.$t;
          const commentLink = comment.link[2].href;
          // Append each comment to the comments container
          const commentElement = $(`
            <div class="comment">
              <img src="${authorAvatar}" alt="Avatar">
              <p><strong>${authorName}</strong>: ${commentContent}</p>
              <a href="${commentLink}" target="_blank">Link bài</a>
            </div>
          `);
          commentElement.appendTo('#commentsContainer').css({
            opacity: 1,
            transform: 'translateY(0)'
          });
        }
        updatePagination(totalPages);
      } else {
        // Ẩn nút "Load more" nếu không còn comment
        $('#loadMoreBtn').hide();
      }
      isLoading = false;
      $('#loadingIndicator').hide();
    }

    function handleError(error) {
      console.error('Error loading comments:', error.responseText);
      isLoading = false;
      $('#loadingIndicator').hide();
    }
    // Bắt đầu tải comment
    loadComments();
  });
</script>

Lưu ý:
1. Code dùng thư viện jQuery, nếu blog của bạn chưa có thì tự thêm thư viện jQuery vô. Đa số blog nào cũng có sẵn.
2. CSS mình chỉ làm mang tính chất tham khảo, không đảm bảo nó tương thích tốt trên mọi Blog.
3. const COMMENTS_PER_PAGE = 5; đây là số bài muốn hiện ra.

Nếu muốn thay phân trang thành Loadmore thì xem bài này: Share code load toàn bộ comment blogger [Loadmore]

Bài liên quan ngẫu nhiên

Nhận xét

Contact Me on Zalo