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.

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. It’s currently hosted on my Github account and should work, but I recommend hosting it yourself.

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 {
display:block;
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;
text-decoration:none;
}
/* 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='https://cdn.rawgit.com/xomisse/ac8ccfa4b8fb2c26d5cf76270db92201/raw/f957494b1691cce3d5a8cb92e5b4ed57cded9729/pagination.js' type='text/javascript'/>
<!-- End XOmisse Pagination -->
</b:if>

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.

Post last updated:

25 responses to “How to Add Numbered Pagination to Blogger”

  1. Hi! This code don’t functionallity on blog my friend.Can You help me?

    1. Hello. Your blog is private so I can’t get on to double check your code. Look over your template and ensure there are no errors or javascript conflicts.

  2. 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 | https://itsjmomo.blogspot.com

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

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

  3. 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 / mareasol.blogspot.com

  4. Can you show us how to do this with the new restrictions?

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

  5. 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!

  6. Thanks for this codes dear…
    I will try to see if they’ll work on http://www.schoolnaija.com

  7. This is awesome. Thanks very much.. 🙂

  8. Dear xomisse,
    thank’s for share your article about make pagination with number, but that code only work to homepage only. When I navigation page to label, the bottom of page still Home and older post.
    How to fix it …

    1. As mentioned above, it’s targeting index pages. To include other pages you’ll need to add other conditions as explained here 🙂

  9. dracrac

    Is there a way to insert the code pagination.js file inside blogger instead of hosting it? I’d tried to insert it inside but but isn’t working.
    How can I do that?

  10. Hello,
    Your blog is just wonderful! It helps me so much!
    I have a problem with this code. It works well on homepage and search labels pages but not on the first page of search labels pages. For exemple, if you click on the label “chocolate” at the end of this recipe: https://www.iletaitunefoislapatisserie.com/2017/01/gateau-au-chocolat-au-lait-creme-de-marron.html
    You will arrive on the chocolate search label page. At the end, you can see my former prev next blogger pagination. If you clik on “Articles plus anciens” (former articles in french), then you have the new pagination (yours). Do you know why? Thanks a lot for your help!

  11. Junghyu

    Hello there,

    I’m really happy that the pagination code works on my blog.
    Thank you for sharing this post.

    And i have one question.
    Because I want to remove the ‘pages 1 of 100’ on my blog.
    I tried to do myself but it’s not working.

    I will be very happy if you can help me.
    Thank you.

    Best wishes

  12. Thank for sharing this codes. I love your informative tutorials….

  13. Thank You for sharing this cod thank a lot my problem is solved

  14. Thanks xomisse ^_^ its working

  15. At last my problem is solved. Thanks!

  16. bangla sms

    Wow this is very informative article, thank you very much for sharing this article, it is very helpful for us.

  17. Thanks so much for the guide, I’m really pleased but still need more guidelines to make it easy for me

  18. Funghikun

    I Love You!!
    I have finally succeeded for add number page in my blog.
    Love you again❤

  19. Katerina

    Hello!
    Did you know any similar code for comment pagination?

Join over 1,000 creators and small biz owners and be part of The Roundup

Ready to build your website, grow your audience and monetise your platforms? Receive the latest WordPress news, social media updates, SEO tips and industry insights straight to your inbox.

By signing up you’ll receive our fortnightly newsletter and free resources. No spam or unnecessary emails. You can unsubscribe at any time.