How to Add Numbered Pagination For Blogger

Maybe you have been wondering why most of the famous blogs are using numbered pagination, instead of displaying older and new post buttons at the bottom of every Blogger archive page. From my experience it gives you better page views than the older and newer post button. It is more user friendly, attractive, and SEO friendly. I have been using number pagination on my blog for quite a while now, you can see it at the bottom of this post and in my homepage. 

In this article, I will show you how I added numbered pagination in my blogger blog.

What is Numbered Pagination?

Numbered pagination is a numeric navigation menu which is usually present at the bottom of the archive pages. It divides your whole blog into different pages, just like the pages of a book. Users can simply navigate through page 1, 2, 3, 4 and etc. We have attached a screenshot above, so that users can easily understand my words.

How to Add Numbered Pagination in Blogger?

1. Login to your Blogger Dashboard >> Click on Template >> Click Edit HTML

2. Back up your blog using Download Full Template as a precaution in case you accidentally overwrite some code and are not able to retrieve it.

3. Use CTRL F to Search for </head> tag and just above it paste this code:

<style>
.showpageArea {
width: 100%!important;
}
</style>

4. Again use CTRL F to Search for ]]></b:skin> tag and just above it paste the following code below:

.showpageNum a {
background: #02ab68;
padding: 5px;
padding-left: 10px;
border: 1px solid #b9b9b9;
padding-right: 10px;
margin-right: 5px;
color: #000;
font-weight: bold;
}
.showpage a {
background: #02ab68;
padding: 5px;
padding-left: 10px;
border: 1px solid #b9b9b9;
padding-right: 10px;
margin-right: 5px;
color: #000;
font-weight: bold;
}
.showpageArea {
float: left;
}
.feed-links {
display: none;
}
.showpageArea a {
float: left;
font-size: 15px;
color: #fff!important;
padding-left: 15px;
padding-right: 15px;
}
.showpagePoint {
float: left;
font-size: 15px;
padding-left: 15px;
padding-right: 15px;
}
.showpageArea a {
text-decoration: none;
}
.showpageArea {
float: left;
width: 363px;
margin-top: 10px;
}

.showpageOf {
display: none;
}

5. Now once the style sheet is added to your template, it is the time to add the JavaScript coding that would turn the ordinary looking order/newer post buttons into a robust and user-friendly  numeric pagination. Use CTRL F to Search for the ending </body> tag and just above it paste the following JavaScript coding.

<!--Page Navigation Starts-->
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<script type='text/javascript'>
var pageCount=6;
var displayPageNum=6;
var upPageWord =&#39;Previous&#39;;
var downPageWord =&#39;Next&#39;;
</script>
<script src='https://mirocine.googlecode.com/files/blogger_pagenavi_min.js' type='text/javascript'/>
</b:if>
</b:if>
<!--Page Navigation Ends -->

6. Once everything is done press “Save Template” button located on the top right corner of your screen.

7. Now go and check out your blog homepage to see the amazing navigation in action. You also do some little modification im CSS, anyone can customize to give it the desire touch that he needs.

Congratulations: You have successfully added numbered pagination in blogger.

I hope this tutorial have helped you in learning how to add numbered pagination in blogger. If anyone find any difficulty then don't be shy to make use of the comment box below.

If you liked this guide, please share it with your friends and family.