How to Add Numbered Pagination to Blogger

Bloggers standard pagination allows readers to browse through your blog page by page using older/newer or previous/next navigation.

This post will show you how to add a numbered pagination instead, replacing the older/newer pagination with a numeric navigation allowing users to jump through pages.

Please note that this tutorial needs updating, due to the restrictions on Blogger the pagination.js file in step 2 below now needs to be hosted directly within your theme and not in an external file.

How to add a numbered pagination to Blogger

Installing Numbered pagination on Blogger

Before going any further, make sure to backup your Blogger template.

1. Styling The Pagination

Firstly we’ll add the styling to the CSS. To do so, go to Template > Edit HTML and search for ]]></b:skin>. If you’re having trouble finding it check this tutorial.

Just above the ]]></b:skin> tag paste the following

/* Start XOmisse Pagination - Custom CSS */
#blog-pager, .blog-pager {
padding:5px 0;
.showpage a, .pagenumber a, .totalpages, .current {
position: relative;
display: inline-block;
padding: 5px 10px;
margin: 0 2px;
background: #ffffff;
color: #333;
border: 1px solid #f2f2f2;
font-size: 12px;
border-radius: 2px;
transition: all .3s;

.showpage a:hover, .pagenumber a:hover, .current {
background: #333333;
color: #ffffff;
/* End  XOmisse Pagination */

You can edit the CSS above to customise the look of the pagination and make it suit your blog design. You can really style it anyway you want but my suggestion is to change the colours, adjust padding space and add your own fonts.

2. Add Pagination Functionality

Now we can add the JavaScript to turn the default older/newer navigation into a numeric pagination on index pages.

Again go to Template > Edit HTML. Search for the closing body tag, </body>, which will be near the end of your template.

Just above the closing body tag paste the following

<b:if cond='data:blog.pageType == &quot;index&quot;'>
<!-- Start XOmisse Pagination -->
<script type='text/javascript'> //<![CDATA[ /** WRITTEN BY XOMISSE.COM **/
var postperpage=3; var numshowpage=4; var prevpage ='Previous'; var nextpage ='Next'; var urlactivepage=location.href; var home_page="/";
//]]> </script>
<script src='' type='text/javascript'/>
<!-- End XOmisse Pagination -->

As you can see, we’re using a conditional statement to target only the index page, leaving the older/newer navigation on all other pages.

Change the postperpage value to the number of posts that will appear on each page. This should match the number you’ve selected in Settings > Posts, comments and sharing settings > Posts > Show at most.

Change the numshowpage value to how many pages you want shown in the numbered page navigation.

You can also change the prevpage and nextpage values to the text you want displayed.

Then Save Template, you should now see the numbered pagination on index pages.

Leave a Reply

Thank you so much for taking the time to comment! Your email will not be published or shared but you will recieve an email if your comment has a reply. Need help with a tutorial? Check out our Coding + Consultation service for one-on-one assistance.


  1. Momo C. on

    Hello. First, thank you so much for sharing these codes. I’ve been combing through your codes the past few days and they’re all amazingly helpful. You’re also very good at explaining them and breaking them down.

    I was wondering if there’s a way to remove the “Page X of Z” button?

    Momo |

    • Elaine Malone on

      Hello! Thank you so much, really happy to hear that you find my posts helpful 🙂 to remove the “page x of z” button, you’ll need to download the pagination.js file linked in the above code and edit it to remove that section of the code, then host the edited version of that file yourself and replace the link in the above code to link to your version instead.

      • Momo C. on

        Hi Elaine, thanks so much for replying! Would you able to let me know which part of the text needs to be deleted and if anything needs to be put in its place? I’ve located the section, but have not worked with javascript like this before, so am not sure what needs to be eliminated.

  2. Rebecca on

    Hello, I love your tutorials because even I can apply them to my blog… 🙂 But this one just doen’t work for me. And after copying the codes into my HTML (they are at the right place, i triple checked) there is still this ugly default newer posts, home, older posts bar in my blog. Do you have any advise?

    Rebecca /

    • Elaine Malone on

      Hi Melinda. We’ll be updating this post in the future. You’ll need to copy the content within the pagination.js file in step 2 and paste it within your theme, or host the file on your own web host server.

  3. Oyon on

    Best Navigation ever! Thanks so much! Love your blog. Been following it for years now. And every now and then when I get stuck this is the first website I consult for a solution! Thanks Xomisse!