Numbered Pagination

Are you still wondering that how 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? Recently, one of our users asked us, How to add Numeric Pagination in Your Blogger Blog? We have been using number pagination on Mohandis for quite a while now, and from our experience it gives you 10 times better pageviews than the older and newer post button. It is more user friendly, attractive, and SEO friendly. Most of the advance Blogger templates like Template AtTack comes with builtin Numeric pagination. In this article, we will show you 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 ]]>. After finding the skin tag, just above it paste the following piece of coding.

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

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

<!--Page Navigation Starts by Mohandis-->
<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 by Mohandis-->

Congratulations:You Are AdD Numbered Pagination.Now Enjoy Numbered Pagination!