Add a Numbered Pagination to your Blogger blog

Add a Numbered Pagination to your Blogger blog

Quickly install a modern, stylish Numbered Paged Navigation on your Blogger blog with simple JavaScript and CSS.Blogger platform provides its users with a traditional set of blog elements.

 Let me give you an example: Blogger post pagination which shows a two-link Older / Newer or Previous / Next navigation to browse through the index.

The typical blog navigation has gone old school now and you may want to revamp it if you want people to keep browsing your blog.

 Its true that only the content makes the visitors keep reading your blogs, but site aesthetics too play important role in keeping people engaged online.

Coming back to the topic, you must have seen that modern, stylish, cool numbered paged navigation on several blogs on the web, mostly on WordPress blog sites.

If you're wondering how you can do a beautiful paged navigation with Blogger, this tutorial post is going to cover the answer to your question in easiest possible ways.

Installing the Numbered pagination on Blogger

Before going any further, make it sure to backup your Blogger template to avoid any mess-ups.

Adding the styles

Starting off with the style, edit your Blogger template and find the tag </head>. Place the following CSS code just above this tag:

<style type="text/css">
.showpageArea {
    clear: both;
    border: 1px solid #eee;
    border-width: 1px 0;
    padding: 15px;
    margin: 15px 0;
}
.showpageOf {
    color: #888;
    margin-right: 10px;
}
.showpagePoint, 
.showpageNum a, 
.showpage a {
    /*border-radius*/
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    padding: 5px 10px;
    display: inline-block;
    margin: 0 5px;
    background-color: #eee;
    /*box-shadow*/
    -webkit-box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .15);
    -moz-box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .15);
    box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .15);
}
.showpageArea, .showpageArea a {
    color: #333;
}
.showpage a: hover, .showpageNum a: hover, .showpagePoint {
    background-color: #3498DB;
    color: #f5f5f5;
}
.showpagePoint {
    font-weight: 700;
}
</style>

We are going to add more code next, so keep the template opened.

JavaScript

Again find </body> tag and place the following JavaScript just above it:

<!-- Begin Page Navigation -->
<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://blogger-paginated-navigation.googlecode.com/git/blogger-pagenavi.js' />
</b:if>
</b:if>
<!-- End Page Navigation -->

Final step, save the template to deploy the changes. Done! Now preview your blog and see the numbered pagination in action.

If you got stuck anywhere following the tutorial, please post your query in the comments - I'll try best to figure it out for you.