Tạo phân trang bình luận (comment pagination) trong blogspot

Mấy ngày hôm nay mình đi lục lọi khắp Google và các Blog khác để tìm code làm phân trang comment cho blog của mình nhưng tìm mãi không thấy. Thật may là gặp được bạn Hòa Trần (admin giaodien.blog), bạn ấy đã giúp mình làm được và cho phép mình chia sẻ lại thủ thuật này, các bạn cùng xem bài viết dưới đây.

Có rất nhiều bài viết trên Google hướng dẫn tạo phân trang cho blogspot nhưng chỉ là phân trang bài viết hoặc phân trang page. Hầu như không có ai chia sẻ cách phân trang bình luận cả.

Thì nay mình xin chia sẻ lại cách thực hiện này, áp dụng cho những blog có nhiều bình luận ở bài viết cực kỳ hữu ích, đẹp và chuyên nghiệp.

Các bạn có thể xem demo trước ở dưới phần comment bài viết này rồi quay lại xem cách thực hiện dưới đây:

Quảng cáo: Giao diện blog là trang web cung hàng trăm mẫu giao diện Blogger tự code. Chuyên cung cấp các mẫu giao diện blogger theo yêu cầu, cover thiết kế nhiều mẫu có sẵn cho các bạn lựa chọn. Mẫu được thiết kế chuyên nghiệp và hiện đại. Ngoài ra, còn chia sẻ rất nhiều mẫu giao diện miễn phí cho các bạn trải nghiệm. Hổ trợ nhiệt tình 24/7. Mọi chi tiết các bạn liên hệ tại đây.

Create comment pagination for blogspot

Bước 1: các bạn sử dụng đoạn CSS sau chèn vào trên thẻ ]]></b:skin hoặc trong cặp thẻ <style>...</style> tùy vào dạng template các bạn:

.pagination,.pagination *{border-radius:.25rem;margin:13px 0 0 0;text-align:center}
.pagination a{display:inline-block;padding:0 10px;cursor:pointer}
.pagination a.disabled{opacity:0.3;pointer-events:none;cursor:not-allowed}
.pagination a.current{padding:.5rem .75rem;margin-left:-1px;line-height:1.25;color:#ffffff;background-color:#007bff;border:1px solid #dee2e6}

Bước 2: thêm đoạn Js sau trước thẻ đóng </body>

<b:if cond='data:view.isSingleItem'>
  <script>
    //<![CDATA[
    window.addEventListener("load", function() {
      (function($) {
        var pagify = {
          items: {},
          container: null,
          totalPages: 1,
          perPage: 3,
          currentPage: 0,
          createNavigation: function() {
            this.totalPages = Math.ceil(this.items.length / this.perPage);
            $('.pagination', this.container.parent()).remove();
            var pagination = $('<div class="pagination"></div>').append('<a class="nav prev disabled" data-next="false">«</a>');
            for (var i = 0; i < this.totalPages; i++) {
              var pageElClass = "page";
              if (!i) pageElClass = "page current";
              var pageEl = '<a class="' + pageElClass + '" data-page="' + (i + 1) + '">' + (i + 1) + "</a>";
              pagination.append(pageEl);
            }
            pagination.append('<a class="nav next" data-next="true">»</a>');
            this.container.after(pagination);
            var that = this;
            $("body").off("click", ".nav");
            this.navigator = $("body").on("click", ".nav", function() {
              var el = $(this);
              that.navigate(el.data("next"));
            });
            $("body").off("click", ".page");
            this.pageNavigator = $("body").on("click", ".page", function() {
              var el = $(this);
              that.goToPage(el.data("page"));
            });
          },
          navigate: function(next) {
            if (isNaN(next) || next === undefined) {
              next = true;
            }
            $(".pagination .nav").removeClass("disabled");
            if (next) {
              this.currentPage++;
              if (this.currentPage > (this.totalPages - 1)) this.currentPage = (this.totalPages - 1);
              if (this.currentPage == (this.totalPages - 1)) $(".pagination .nav.next").addClass("disabled");
            } else {
              this.currentPage--;
              if (this.currentPage < 0) this.currentPage = 0;
              if (this.currentPage == 0) $(".pagination .nav.prev").addClass("disabled");
            }
            this.showItems();
          },
          updateNavigation: function() {
            var pages = $(".pagination .page");
            pages.removeClass("current");
            $('.pagination .page[data-page="' + (this.currentPage + 1) + '"]').addClass("current");
          },
          goToPage: function(page) {
            this.currentPage = page - 1;
            $(".pagination .nav").removeClass("disabled");
            if (this.currentPage == (this.totalPages - 1)) $(".pagination .nav.next").addClass("disabled");
            if (this.currentPage == 0) $(".pagination .nav.prev").addClass("disabled");
            this.showItems();
          },
          showItems: function() {
            this.items.hide();
            var base = this.perPage * this.currentPage;
            this.items.slice(base, base + this.perPage).show();
            this.updateNavigation();
          },
          init: function(container, items, perPage) {
            this.container = container;
            this.currentPage = 0;
            this.totalPages = 1;
            this.perPage = perPage;
            this.items = items;
            this.createNavigation();
            this.showItems();
          }
        };
        $.fn.pagify = function(perPage, itemSelector) {
          var el = $(this);
          var items = $(itemSelector, el);
          if (isNaN(perPage) || perPage === undefined) {
            perPage = 3;
          }
          if (items.length <= perPage) {
            return true;
          }
          pagify.init(el, items, perPage);
        };
      })(jQuery);
      $("#top-ra").pagify(6, "li.comment");
    });
    //]]>
  </script>
</b:if>

Sau đó lưu template lại và ra bài viết nào nhiều commnet để xem kết quả.

Rất cảm ơn tác giả Hòa Trần đã chia sẻ code này:

Tham khảo bài viết gốc: https://www.giaodien.blog/2021/08/phan-trang-comment-blogger.html. Từ khóa: comment pagination blogspot, phân trang bình luận blogspot