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.

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.
Add Numbered Page Navigation For Blogger in 2 Steps Only! Add Numbered Page Navigation For Blogger in 2 Steps Only! Reviewed by Maher Afrasiab on 6:53:00 pm Rating: 5

16 comments:

  1. not work in my site :(

    http://www.shayari7.com

    ReplyDelete
  2. not work in my site :(

    http://www.shayari7.com

    ReplyDelete
    Replies
    1. bro but you already have numbered navigation that's why it is not working. To add this one you have to delete the first one from your blog and then implement this one.

      Delete
  3. Hello I'm Menghong I want ask you about blogger. I difficult to upload in pages or in category in blogger,so can you help step Numbered Page Navigation only pages.

    ReplyDelete
    Replies
    1. Hello,
      I will share a complete tutorial on this. And will be published soon.. (c)

      Delete
  4. Sir i cant search ]]>
    in my html of template?
    keplergames.blogspot.com

    ReplyDelete
    Replies
    1. Try to search via blogger built-in search which you can access via CTRL+F. An in search box paste "]]>" and hit enter and you surely find it.

      Delete
  5. Not working Bro...
    http://pricelistbd57.blogspot.com/

    ReplyDelete
    Replies
    1. now check I have changed the script, now it should work fine :)

      Delete
  6. It's only work on homepage but not work on label pages... check my site http://www.videoforest.net/

    ReplyDelete
  7. Thanks for nice sharing about add page number navigation widget. It is excellent post for add nice page navigation in blogger blog. I must use this post for my site.
    Thanks again.

    ReplyDelete
  8. its only work on homepage ,
    not work on label,or archive

    ReplyDelete
    Replies
    1. this article is "how to add numbered page on homepage in blogger"

      Delete
  9. Not working on the movie download site.
    http://moviehous.com
    another code please.

    ReplyDelete
  10. Not Work br0... plzhelp me yr its too eagent _/\_

    ReplyDelete
  11. not working bro
    http://www.alwaysgoinnovative.com/

    ReplyDelete

Powered by Blogger.