Add Numbered Page Navigation For Blogger in 2 Steps Only!

In older blogger templates there are only two buttons with older and newer posts at the bottom of the posts page (homepage). This is somewhere looks very crappy and we should have to change this type of navigation to numbered page navigation for blogger.

Previously I have shared a lot of best blogger widgets and also a lot of best blogger templates of all sorts such as flat blogger templates, ecommerce blogger templates and some others. But today I am going to share with you a best designed numbered page navigation for blogger.

I am going to share with you best styled numbered page navigation widget for blogger. This numbered page navigation widget will make your site's navigation easy for your readers to walk through your posts.

How to add numbered page navigation for blogger

The process of adding the page navigation widget into blogger is very easy this includes only two steps

1. Adding CSS
2. Adding Jquery

1# Adding CSS

For this first of all go to your blogger dashboard 

Click on template

Then click on edit HTML

Now search for this ]]></b:skin> tag

After finding, now copy the code below and paste it just below the ]]></b:skin> tag.

/*-----------------numbered page navigation for blogger by PakMax------------------*/
 #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;}
/*-----------------numbered page navigation for blogger by PakMax------------------*/

2# Adding Jquery

Now to add jquery do the same steps as we did for adding css.

Go to blogger dashboard

Click on template tab and then on Edit HTML

Now search for the </body> tag

After finding it simply paste the below just above it:

  <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="http://helplogger.googlecode.com/svn/trunk/page-navigation2.js"/>
</b:if>
</b:if>

Customization 

After adding the code you can do some changes with the widget by making some changes in the code and these are

1. You can choose how much posts will be displayed per page by changing value of "var numperPage=7" to what which you want
2. You can choose how many pages will be shown in the navigation widget. For this change value of "var numPages=6" to what ever you want.
3. You can also change the text of Next and Previous button by editing these two lines: "var prevText ='« Previous'; var nextText ='Next »';"

Final Words

I hope that you like this widget and hope that this widget will adds a new life to your blog. Let me know if you have any problem with the installation or the widget will not working properly on your blog.