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.


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


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;
    .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 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;}
      #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;}
      #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;}
      #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'>
          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 src="http://helplogger.googlecode.com/svn/trunk/page-navigation2.js"/>

      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 »';


        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


        Tech blogger, SEO expert, cryptocurrency enthusiast, and freelancer are the terms that describe me. I'll rather write a thousand words than speak hundred words, and that describes my passion as a content creator.