How to Add Numbered Comment Pagination in Blogger

Dida

Administrator

Author

Last edited: Monday, September 28, 2026

Adding a clean, numbered pagination system to your Blogger comments section can greatly improve both usability and presentation, especially on posts with a lot of discussion.

Instead of making readers scroll through dozens—or even hundreds—of comments, pagination divides them into smaller, more manageable pages. This turns a long and cluttered conversation into an organized, easy-to-navigate experience, with page numbers such as 1, 2, 3 … Next.

In this tutorial, you’ll learn how to add a fully functional comment pagination system to Blogger. The pagination will only appear when the number of comments exceeds a specific threshold, which is set to 10 comments by default.

Before you dive into the code, go to Theme > Customize > Backup and save a copy of your current layout. Better safe than sorry!

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

In your Blogger Dashboard, click Theme, then click the down arrow next to the Customize button.
Select Edit HTML, click anywhere inside the editor, and then press CTRL + F (or CMD + F on Mac)
Search for: <b:loop values='data:post.comments' var='comment'>

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

Next, you’ll add placeholders where the pagination controls will appear. These containers will later be populated dynamically using JavaScript.

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.

Click anywhere inside the HTML editor, and press CTRL + F (or CMD + F on Mac)
Search for: //]]></b:skin> or </style>

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

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.

Click anywhere again inside the HTML editor, and press CTRL + F (or CMD + F on Mac)
Search for: </body>

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>

You can set the comments-per-page limit to your liking.
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

Final Thoughts

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.

Aside from adding pagination to the comments, you might also be interested in adding an admin badge, like I did on my blog.

Contact Form