How to Add Numbered Pagination in Your Blogger Blog

Socialize It →

Tweet

61

Advertisements

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 MyBloggerLab 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 Templateism 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 ]]></b:skin>. 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 </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.

<!--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://templateism.com/js/blogger_pagenavi_min.js' type='text/javascript'/>
</b:if>
</b:if>
<!--Page Navigation Ends -->

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.

We hope this tutorial may have helped you in learning how to add numbered pagination in blogger. If anyone find any difficulty then don't be shy to make a comment below or tweet us @mybloggerlab.

Advertisements

About the Editorial Team

The Editorial Team of MyBloggerLab consists of a group of Professional Blogger geeks Led by Syed Faizan Ali (Founder of MyBloggerLab).