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.

25 Comments

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

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.

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.

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

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.

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!

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 …

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?

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!

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

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