How To Add Page Number Navigation in Blogger

There are a number of making your Blogger/Blogspot look more proffesional, adding Page Number Navigation is one of that. In Blogger Default Settings, we have an Option to set number of post we want to desplay per page on your Home Page or Labels Post. As you see in your Default Blogger's template, once the number of total posts have been exceeded, we will see "Older Post and Newer Post" in our Blog's home page. But page numbers instead of old posts and new post could easily help our blog's visitors jamp from one page to another quikly or they can click on a specific page they want to. One more thing is that, they can also know the total number of posts in each lebel. This post will guide you how to add page number navigation by using Javasript to Blogger/Blogspot. Let's go with me and choose any one of the 3 different styles bellow:

How to add Page Number Navigation in Blogger

There are two steps:

1. Adding the CSS

2. Adding the Script

Let's go with me how to add CSS

1. Adding CSS

Step 1: Go to Blogger Dashbaord > Template >Edit HTML

Step 2: Click anywhere inside the code area press Ctrl +F to open the search box and past the following tage inside the search box and hit Enter to find it.

]]></b:skin>

Step 3: Now choose one of the following styles copy the code just bellow it. Just above ]]></b:skin>  past the code that you want to use.

Style 1

#blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px;}

.blog-pager {background: none;}
.displaypageNum a,.showpage a,.pagecurrent{padding: 3px 7px;margin-right:5px;background:#E9E9E9;color: #888;border:1px solid #E9E9E9;}
.displaypageNum a:hover,.showpage a:hover,.pagecurrent{background:#CECECE;text-decoration:none;color: #000;}
 .showpageOf{display:none!important}
#blog-pager .showpage, #blog-pager .pagecurrent{font-weight:bold;color: #888;}
 #blog-pager .pages{border:none;}

Style 2

 #blog-pager{clear:both;margin:30px auto; padding: 7px; text-align:center;font-size: 11px;background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #000000),color-stop(1, #292929));background-image: -o-linear-gradient(top, #000000 0%, #292929 100%);background-image: -moz-linear-gradient(top, #000000 0%, #292929 100%);background-image: -webkit-linear-gradient(top, #000000 0%, #292929 100%);background-image: -ms-linear-gradient(top, #000000 0%, #292929 100%);background-image: linear-gradient(to top, #000000 0%, #292929 100%); padding: 6px;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;}

.blog-pager {background: none;}

.displaypageNum a,.showpage a,.pagecurrent{padding: 3px 10px;margin-right:5px; color: #fff;}

.displaypageNum a:hover,.showpage a:hover,.pagecurrent{background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #59A2CF),color-stop(1, #D9EAFF));background-image: -o-linear-gradient(top, #59A2CF 0%, #D9EAFF 100%);background-image: -moz-linear-gradient(top, #59A2CF 0%, #D9EAFF 100%);background-image: -webkit-linear-gradient(top, #59A2CF 0%, #D9EAFF 100%);background-image: -ms-linear-gradient(top, #59A2CF 0%, #D9EAFF 100%);background-image: linear-gradient(to top, #59A2CF 0%, #D9EAFF 100%);text-decoration: none;color: #000;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;}

.showpageOf{display:none!important}.blog-pager-older-link, .home-link, .blog-pager-newer-link {background: transparent;}

a.blog-pager-older-link, a.home-link, a.blog-pager-newer-link {color: #fff;}

#blog-pager .pages{border:none;background: none;}

Style 3

#blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px;}

.blog-pager {background: none;}

.displaypageNum a,.showpage a,.pagecurrent{font-size: 14px;padding: 5px 12px;margin-right:5px; color: #666; background-color:#eee;}

.displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#359BED;text-decoration:none;color: #fff;}

#blog-pager .pagecurrent{font-weight:bold;color: #fff;background:#359BED;}

 .showpageOf{display:none!important}

#blog-pager .pages{border:none;}

2.Adding the Script

Step 1: Now press (Ctrl + F) to find the tag bellow:

</body>

Step 2: Adding the following script just above </body>

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<script type='text/javascript'>
  /*<![CDATA[*/
    var perPage=7;
    var numPages=6;
    var firstText ='First';
    var lastText ='Last';
    var prevText ='« Previous';
    var nextText ='Next »';
    var urlactivepage=location.href;
    var home_page="/";
  /*]]>*/
</script>
  <script src="https://cambohelpbloggers.googlecode.com/svn/trunk/Page%20navigation.js"/>
</b:if>
</b:if>

*Note:

After installing, you might want to change these default settings

 var perPage=7;
    var numPages=6;
    var firstText ='First';
    var lastText ='Last';
    var prevText ='« Previous';
    var nextText ='Next »';

1. perPage : how many posts will be shown in each page (7), this number like your default template so you can change to which mumber you want to.
2. numPage: how many page will be shown in page navigation (6)
3. You can replace the 'First','Last' and '«Next»', '« Previous' with your won word.

Label fix

By default, Blogger will show 20 posts on Labels page. If you want your labels show the same as your home page, you have cut down to the value that we gave for perPage variable.

Step 1: Find the following code sneppet

expr:href='data:label.url'

Step 2: Replace it with this one bellow:

expr:href='data:label.url + "?&amp;max-results=7"' 

Here 7 is the mumber of posts to be displayed per page.

Step 3: Click save template, now enjoyed with Page Number Navigation!