How to Add Numbered Comment Pagination in Blogger

Adding a clean, numbered pagination system to your Blogger comments section can dramatically improve both usability and presentation especially if your posts attract a lot of discussion. Instead of forcing readers to scroll endlessly through dozens (or even hundreds) of comments, pagination breaks everything into manageable chunks. Think of it as transforming a cluttered conversation into an organized, easy-to-navigate experience, complete with page numbers like 1, 2, 3 … Next.

In this guide, you’ll learn how to implement a fully functional comment pagination system in Blogger that only activates when your comment count exceeds a specific threshold (default: 10 comments).

Installation Instructions

This setup is divided into four main steps. Each step plays a specific role in making sure your pagination system works smoothly from structuring your comments properly to styling and controlling the navigation logic.

STEP 1 — Wrap Comments

1. In your Blogger Dashboard, click Theme, then click the small arrow next to the “Customize” button.
2. Select Edit HTML, click anywhere inside the XML editor, and then press CTRL + F (or CMD + F on Mac)
3. Search for: <b:loop values='data:post.comments' var='comment'>
4. Modify your comment loop container like this and then add class comment-item:

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

STEP 2 — Add Pagination Container

1. Next, you’ll add placeholders where the pagination controls will appear. These containers will later be populated dynamically using JavaScript.
2. Place the following code both above and below your comment section:

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

Having pagination controls at both the top and bottom ensures better accessibility, so users don’t have to scroll back up just to navigate pages.

STEP 3 — Add CSS

Now it’s time to make your pagination visually appealing.

1. Click anywhere inside the XML editor, and press CTRL + F (or CMD + F on Mac)
2. Search for: //]]></b:skin> or </style>
3. Then copy and paste the following CSS. Place it before the closing //]]></b:skin> or </style> tag

   .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;}

4. You can apply your own CSS to style the pagination navigation so it blends seamlessly with your theme.

STEP 4 — Add JavaScript

This is where everything comes together. The JavaScript handles how many comments appear per page, generates navigation links, and updates the display when users click through pages.

1. Click anywhere again inside the XML editor, and press CTRL + F (or CMD + F on Mac)
2. Search for: </body>
3. Then copy and paste the following JavaScript. Place it before the closing </body> tag

   <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>

4. You can set the comments-per-page limit to your liking.
5. Click Save

Result

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

Once everything is in place, your Blogger comments section will feel much more polished and user-friendly. Readers can move between pages effortlessly, and your layout will look far more structured especially on posts with heavy engagement.

If you encounter any issues, double-check your class names and IDs, as even small mismatches can prevent the script from working correctly. Styling adjustments may also be needed depending on your theme.

And that’s it! You now have a fully functional, professional-looking pagination system for your Blogger comments.