How to Add Numbered Page Navigation Widget In Blogger

Given below, are guidelines on how to add numbered page navigation widget in blogger blogs.

A navigation widget on a blog allows you to move through different pages on the blog.

This way, you can access more content on the site that has been pushed to pages 2,3,4,5,6 etc. due to frequent updates made on the site.

Why is the Navigation blogger widget necessary?

I'll tell you.

The more your site's content gets pushed farther into archives, then there's a need to make these archived posts still accessible.

This is made possible using a Navigation widget which serves the same purpose as a Related post and Popular post widgets.

The purpose which is to interlink pages of your blog to a particular page.

Also,

If users are able to access more content on your site, it means that your pageviews will be increased as well as income made.

This also means a decrease in bounce rate if more users are not leaving from your landing page, but navigating through your site to get related content.


Why Use the Numbered Page Navigation Widget In Blogger



Now,

With the default page navigation in blogger, one cannot jump to a specific page without going through tags like 'newer post' and 'older post'

Since there is no numbering of pages, it makes it hard to know the exact number of pages on the blog as well as skip to any page you want.

For instance moving from page 1 to page  5 without going through pages 2, 3, 4.

On the other hand,

These are possible with the Numbered page navigation widget for Blogger.

I'll say it's one of the best blogger widgets because including it in your blog will provide a better navigation for your readers, where they can skip multiple pages and return to them.

Also, you can use it to add an extra design to your blog.

Follow the steps below to add the numbered page navigation widget on your blog.


                How to Add Read More Attribution Links to Copied Text in Blogger 
                Square Popular Posts Blogger Widget with Rotating Effect
                Sliding Recent Post Widget For Blogger

How to Add Numbered Page Navigation In Blogger


There are two methods listed in this post on how to add the Numbered page navigation widget In Blogger widget to your blogger blog.

This widget has been made available in different colors, so as to make one closest to your blog's color available.


You can use any of the methods specified below to add the one that meets your eye and is suitable for your blog.
.


Method 1
  • From your blogger dashboard,
  •  Goto 'Layout'.
  • Click on 'Add a gadget'.
  • Select 'Html/Javascript'.
  • Copy the code below and paste into the text field. (Don't name the gadget)

Style 1

    <style type='text/css'>
    #blog-pager{height: 28px;
        padding: 10px 0 0;
    overflow:hidden;
    text-align:center;
    }
    .showpageArea a {text-decoration:underline;
    font-size: 16px;
           text-align: center;}
    .showpageNum a {font-size:16px;text-decoration:none;border: 1px solid #cccccc;margin:0 5px;padding:5px;}
    .showpageNum a:hover {border: 1px solid #cccccc;background-color:#cccccc;}
    
    .showpagePoint {font-size:16px;text-decoration:none;border: 1px solid #cccccc;background: #216FD9;margin:0 5px;padding:5px;color:#ffffff;}
    
    .showpageOf {text-decoration:none;padding:5px;margin: 0 5px;}
    .showpage a {text-decoration:none;border: 1px solid #cccccc;padding:5px;}
    .showpage a:hover {text-decoration:none;background: #cccccc;}
    .showpageNum a:link,.showpage a:link {text-decoration:none;color:#333333;}</style>
    <script style='text/javascript'>var pageCount=6; 
    var displayPageNum=5;var upPageWord="Previous";var downPageWord="Next";</script><a href="http://detutor.com" style="font-size:0pt">Blogger Widgets</a>
    <script style='text/javascript' src='http://netoopscodes.googlecode.com/svn/netoops-page-nav-v2.js'></script> 
    



    Style 2


    <style type="text/css">#blog-pager{font-size:normal}.showpageArea{font-family:verdana,arial,helvetica;color:#000;font-size:11px;margin:10px}.showpageArea a{color:#000;text-shadow:0 1px 2px #fff;font-weight:normal}.showpageNum a{padding:3px 8px;margin:0 4px;text-decoration:none;border:1px solid #999;-webkit-border-radius:3px;-moz-border-radius:3px;background:#b1a7c3 url(http://3.bp.blogspot.com/_nDNgmK8FIyI/TSQEXhP07yI/AAAAAAAAARk/k5VTvrbo5gk/s1600/w2b_pagenav2.png) 0 -60px repeat-x}.showpageNum a:hover{border:1px solid #888;background:#f7b36a url(http://3.bp.blogspot.com/_nDNgmK8FIyI/TSQEXhP07yI/AAAAAAAAARk/k5VTvrbo5gk/s1600/w2b_pagenav2.png) 0 -30px repeat-x}.showpageOf{margin:0 4px 0 0}.showpagePoint{color:#444;text-shadow:0 1px 2px #333;padding:3px 8px;margin:2px;font-weight:700;-webkit-border-radius:3px;-moz-border-radius:3px;border:1px solid #999;background:#f7d5b0 url(http://3.bp.blogspot.com/_nDNgmK8FIyI/TSQEXhP07yI/AAAAAAAAARk/k5VTvrbo5gk/s1600/w2b_pagenav2.png) 0 0 repeat-x;text-decoration:none} </style> <a href="http://techlass.com/" target="_blank" title="Blogger Tips and Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tips and Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://techlass.com/" target="_blank" title="Latest Tips And Tricks"><img src="https://bitly.com/24workpng1" alt="Latest Tips And Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://techlass.com/" target="_blank" title="Blogger Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tricks" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a><script style='text/javascript'>
    var postperpage=5;
    var numshowpage=6;
    var upPageWord="Prev";
    var downPageWord="Next";
    var home_page="/";
    var urlactivepage=location.href;
    </script>
    <script style='text/javascript' src='http://24work-new.googlecode.com/svn/trunk/24work-blogspot/page-navigation/new-code/0-test-p-n-01_00-ycode.js'></script>
    

    • Save the gadget.
    • Move the gadget you just created below 'Blog posts'. (Refer to image below)
    • Click on 'save arrangement'.

      Note: You can edit the number of posts to be displayed on each page by changing pageCount=6 to your desired number.

      The numbered page navigation has been added to your blog.

      Below are other styles of the page navigation widget that you might fancy (If you used this method in adding the widget to your blog, Ensure you remove/delete the code above in your blog's layout if you'll rather use any of the ones below).



      Method 2

      • Goto your blogger template
      • Click on 'Edit Html'.
      • Use Ctrl+F keys,Search for this tag ]]></b:skin>
      • Copy the codes for any of your preferred styles below.
      • Paste it 'above' ]]></b:skin>

      Style 1 



      #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 2



      #blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px; }
      .blog-pager {background: none;}
      .displaypageNum a,.showpage a,.pagecurrent{font-size: 13px;padding: 5px 12px;margin-right:5px; color: #3E5801; background-color:#E0EDC1;}
      .displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#FEF6DF;text-decoration:none;color: #E16800;}
      #blog-pager .pagecurrent{font-weight:bold;color: #D25E71;background:#FFDEDF;}
       .showpageOf{display:none!important}
      #blog-pager .pages{border: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: 13px;padding: 5px 12px;margin-right:5px; color: #AD0B00; background-color:#FAB001;}
      .displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#DB4920;text-decoration:none;color: #fff;}
      #blog-pager .pagecurrent{font-weight:bold;color: #fff;background:#DB4920;}
       .showpageOf{display:none!important}
      #blog-pager .pages{border:none;}
      


      Style 4



      #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;}
      

      • After adding the code to your preferred style, search for </body> inside your template.
      • Copy the code below and paste '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="http://helplogger.googlecode.com/svn/trunk/page-navigation2.js"/>
      </b:if>
      </b:if>
      


      Next, we'll enable the page navigation widget in Label pages. To do this,

      • Search for  expr:href='data:label.url'  in your template.


        • Replace it with expr:href='data:label.url + "?&amp;max-results=7"'
        • Save your template.

        Follow the steps below if you'll like to customize the blogger widget you just added to your blog.


        How to Customize Page Navigation Widget In Blogger

        You can customize the following fields in this widget:
        perPage: 7, (change this to the number of post you want to display per page).
        numPages: 6, (change this to the number of pages to be displayed at once on the widget)
        var firstText ='First'; (change this to your own text for the first post on the blog)
        var lastText ='Last';  (change this to your owntext for the last post on the blog)
        var prevText ='« Previous'; (change the text to be displayed to go backwards)
        var nextText ='Next »';


        Conclusion:


        These steps above will help you add the Numbered page navigation widget In Blogger as well as make your blog look a bit different from the Navigation in the default blogger templates like Emporio and Soho.

        Also Read: jQuery Background Slideshow Plugin For Blogger
                           Recommended Post Slide Out Widget For Blogger
                           Add Different Background Image In Specific Blogger Page




        Do you like this post? Please link back to this article by copying one of the codes below.

        URL Of Post:


        HTML Link Code:

        BB (forum) link code:

        Comments

        1. Thank you. This is really helpful :)

          ReplyDelete
          Replies
          1. You're welcome Miroslava!! Stick around for more blogger widgets.

            Delete
        2. This will be a great resource to anyone who uses Blogger!

          ReplyDelete
          Replies
          1. You're right Sharon, the page navigation widget is one any blogger blog should have.

            Delete
        3. Thank you very much for this tips this is very helpful to my blog!

          ReplyDelete
        4. thank's but I want to enable the page navigation widget in Label pages and I can't find " expr:href='data:label.url' " in my template :/ :/
          plz help

          ReplyDelete
          Replies
          1. Hi Admed,

            Good to have you here. This tag

            expr:href='data:label.url'

            can be found below class='post-header-line-1' OR below class='post-footer-line post-footer-line-2'

            Manually search for it by checking below any of the tags listed above and you'll see it. I've also included an image in the post which shows where you can find the tag in your template. Hope this resolves the problem. Thanks for stopping by.

            Delete
          2. sorry for bothering you
            I searched as you told me but found nothing
            this is a screen-shot from my template
            http://prntscr.com/5z3i2z

            as you see I have nothing below :
            ( class='post-footer-line post-footer-line-2' )
            is there anything wrong with my template
            ?

            Delete
          3. Hello Ahmed,

            Sorry for the late reply. It could be from the template you're using, but I'm not quite sure. Why not add the page navigation widget as a gadget in you blog's layout instead.

            Delete
        5. Hello!
          I was just wondering if you know how to get it to read past 500 posts, I got a page navigation on my blog but it stops at page 17. I use a 3rd party template could it be my template?
          http://flashgamesempire.blogspot.co.uk/

          ReplyDelete
        6. Thank you very much
          really helpful

          ReplyDelete
        7. Hi Grace!
          i just want to know that what should i do if i want to add this pages number navigation to my single static page.

          Thanks.

          ReplyDelete
        8. It's not working . i think its because of using static home page on my blog. but i have a post page too where it's not appear. give me a solution plss..

          ReplyDelete
        9. 1st Method Is Worked For Me.THANKS A LOT..........

          ReplyDelete

        Post a Comment

        Please share your views on this topic with Grace Joseph by leaving a comment.