How To Add Numbered Page Navigation For Blogger

Advertisement Here

Adding the page navigation widget into blogger is litle bit easy and this takes few 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>

Customizing: 

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 »';
4. I hope this will help you, and if it solved your question don't forget to leave your comments.