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.

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.