How to Add Page Navigation Widget for Blogger

In Blogger, we have the choice to set the quantity of posts we need in plain view per page by heading off to the Settings menu > Posts and remarks > Show at generally? Posts. Once the quantity of aggregate posts in our blog surpasses this number, we will see "Older Posts" and "More up to date Posts" route joins in our landing page and file pages footer as Blogger doesn't have any inherent capacity on page numbering. Yet, page numbers rather than more established and more up to date posts connections could help our site guests to explore faster (hop starting with one page then onto the next page or tap on a particular page) and know the aggregate number of posts distributed. Here's an instructional exercise on the best way to include numbered page route utilizing Javascript to a Blogger/blogspot blog. You can choose any of the 7 distinctive styles that I have said underneath.

How to Add Numbered Page Navigation?

You can add this widget in just two steps.
1. Adding  CSS.
2. Adding  Script.

1. Adding  CSS

Step 1. 

Go to Blogger Dashboard > Template > click on the Edit HTML button:

Step 2. 

Click anywhere inside the code area and press the CTRL + F keys to open the Blogger search box.

Type or paste the following tag inside the search box and hit Enter to find it:

]]></b:skin>

Step 3. 

Now choose any page navigation styles and copy the code just below it. Just above ]]></b:skin> paste the code of the style that you want to use:

Style 1:

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

 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: 12px;padding: 5px 12px;margin-right:5px; color: #222; background-color:#eee; border: 1px solid #EEEEEE;}
.displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#E5E5E5;text-decoration:none;color: #222;}
#blog-pager .pagecurrent{font-weight:bold;color: #fff;background:#DB4920;}
 .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{padding: 3px 7px;margin-right:5px;background:#E9E9E9;color: #888;border:1px solid #E9E9E9;}
.displaypageNum a:hover,.showpage a:hover,.pagecurrent{background:#CECECE;text-decoration:none;color: #000;}
 .showpageOf{display:none!important}
#blog-pager .showpage, #blog-pager .pagecurrent{font-weight:bold;color: #888;}
 #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{padding: 5px 10px;margin-right:5px; color: #F4F4F4; background-color:#404042;-webkit-box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);-moz-box-shadow:0px 5px 3px -1px rgba(50, 50, 50, 0.53);box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);}
.displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#EC8D04;text-decoration:none;color: #fff;}
#blog-pager .showpage, #blog-pager, .pagecurrent{font-weight:bold;color: #000;}
 .showpageOf{display:none!important}
#blog-pager .pages{border:none;-webkit-box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);-moz-box-shadow:0px 5px 3px -1px rgba(50, 50, 50, 0.53);box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);}

 Adding  Script

1. Now find </body> using (CTRL + F) 
2. Add the following script 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=     var numPages=6;
    var firstText ='     var firstText ='First';
    var lastText ='     var lastText ='Last';
    var prevText ='«      var prevText ='« Previous';
    var nextText ='     var nextText ='Next »';
    var urlactivepage=location.href;
    var home_page="/";
  /*]]>*/
</script>
  <script src="http://helplogger.googlecode.com/svn/trunk/page-navigation2.js"/>
</b:if>
    var urlactivepage=location.href;     var home_page="/";   /*]]>*/ </script>   <script src="http://helplogger.googlecode.com/svn/trunk/page-navigation2.js"/> </b:if></b:if>

 Click on the Save Template button and that's it! Enjoy!