How to Add Numbered Pagination in Your 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 below, so that users can easily understand our words.

How to Add Numbered Pagination in Blogger?

The firest thing you need to do is to login into your Google account. Once logged in go to Blogger Dashboard >> Template >> Edit HTML and search for the Skin tag ]]></b:skin>. After finding the skin tag, just above it paste the following piece of coding.

Copy The Code 

.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;
}

Read More ..

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. Search for the ending </body> tag and just above it paste the following JavaScript coding. Once everything is done press “Save Template” button located on the top right corner of your screen.

Copy The Code 

<!--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='http://widcraft.googlecode.com/svn/blogger_

pagenavi_min.js' type='text/javascript'/>
</b:if>
</b:if>
<!--Page Navigation Ends -->

Read More

Congratulations: You have successfully added numbered pagination in blogger. Now go and check out the interactive preview to see the amazing navigation in action. With a little modification is CSS, anyone can customize to give it the desire touch that he needs.