How to Add Pagination to Blogger Comments

To add Numbered Pagination (navigation like the thumbnail below: 1 2 3 … Next) for Blogger comments and make it appear only when comments > 10 (you can edit it later), you’ll need a mix of Blogger conditional logic + JavaScript pagination.

STEP 1 — Wrap comments for pagination

Modify your comment loop container like this:

<div class='comments' id='comment-list'>
  <b:loop values='data:post.comments' var='comment'>
    <div class='comment-block comment-item'>
      ...
    </div>
  </b:loop>
</div>

Add class: comment-item

STEP 2 — Add pagination container

Place this ABOVE and BELOW to your comment content.

<div class='comment-pagination' id='comment-pagination-top'/>

<!-- Your comment content here -->

<div class='comment-pagination' id='comment-pagination-bottom'/>

STEP 3 — Add CSS

.comment-pagination{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin:15px 0;font-size:14px;}
.comment-pagination .page-info{margin-right:10px;color:#666;}
.comment-pagination a{padding:5px 9px;border:1px solid #ddd;text-decoration:none;color:#333;border-radius:3px;}
.comment-pagination a.active{background:#333;color:#fff;border-color:#333;}
.comment-pagination span.dots{padding:5px 6px;color:#999;}

STEP 4 — Add JavaScript pagination logic

<script>//<![CDATA[
document.addEventListener("DOMContentLoaded",(function(){const t=document.querySelectorAll(".comment-item"),e=10,n=t.length;if(n<=e)return;const a=Math.ceil(n/e),o=document.getElementById("comment-pagination-top"),c=document.getElementById("comment-pagination-bottom");let r=1;function l(n){r=n,t.forEach(((t,a)=>{t.style.display=a>=(n-1)*e&&a<n*e?"block":"none"})),function(){const t=function(){let t="";t+=`<span class="page-info">Page ${r} of ${a}</span>`,r>1&&(t+='<a href="javascript:void(0)" data-nav="prev">‹ Prev</a>');const e=1;function n(t){return`<a href="javascript:void(0)" data-page="${t}" class="${t===r?"active":""}">${t}</a>`}t+=n(1),r>3&&(t+='<span class="dots">...</span>');for(let o=r-e;o<=r+e;o++)o>1&&o<a&&(t+=n(o));r<a-2&&(t+='<span class="dots">...</span>');a>1&&(t+=n(a));r<a&&(t+='<a href="javascript:void(0)" data-nav="next">Next ›</a>');return t}();o&&(o.innerHTML=t);c&&(c.innerHTML=t);document.querySelectorAll("[data-page]").forEach((t=>{t.onclick=()=>l(parseInt(t.dataset.page))})),document.querySelectorAll("[data-nav='prev']").forEach((t=>{t.onclick=()=>l(r-1)})),document.querySelectorAll("[data-nav='next']").forEach((t=>{t.onclick=()=>l(r+1)}))}()}l(1)}));
//]]></script>

RESULT

• Blogger-style "Page X of Y"
• Prev/Next auto-hide
• Small pages → shows all numbers
• Large pages → collapses with ...
• Synced top + bottom pagination

And that’s it! You’ve successfully added a professional pagination system to your Blogger comments. This not only makes your site look cleaner but also improves the experience for your readers. If you ran into any issues while styling your comment-item or setting the page limits, drop a comment below—I’m happy to help!