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.

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://gist.githubusercontent.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.

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.

4 comments

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

    Reply
    • 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.

      Reply