How to paginate blogger comments is extremely simple

How to paginate blogger comments is extremely simple

There are too many comments on your post. So what to do? The simple solution is to paginate those comments. Read this post and you will make it.

What is comment pagination?

Comment pagination, simply understood as dividing the comments on your post into sections, each section will display a certain number of comments. Comments that exceed the limit of each section will be hidden and only appear when you move to the next page.

The benefit of pagination is to reduce the number of comments on your posts without losing them. At the same time, it helps your website not to be too long because blogger system will display all of them.

Code to create comment pagination

This code consists of 2 parts: CSS and JavaScript. Follow the instructions below to put those codes in place.

CSS code

Place this css code above the ]]></b:skin> tag.

.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}{codeBox}

JavaScript code

Place the javascript codes above the closing </body> tag.

<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(10, "li.comment");});
  //]]></script>
    </b:if>{codeBox}

Conclusion

So I have finished guiding you how to create blogger comment pagination already. Very simple right? Hopefully with what I share will help you improve your blog page.

Don't forget to continue to support me in the next posts. Thank you.

Source code: giaodien.blog

3 Comments

  1. Blog Name: Blogging Mazaa
    Description: Ideas Appreciated...!!! Blogging Tips and Tricks, All you want know about tech and offers and YouTubing...
    Url: https://bloggingmazaa.blogspot.com

    I have added your site, add my site also...

    ReplyDelete
Post a Comment
Previous Post Next Post