How to Add Numbered Page Navigation Widget for Blogger

Page navigation widget for blogger is most popular widget, and most bloggers are using this. because these players are only provided in the wordpress blogs hosted or blogs. But now his trick has been made ​​available to bloggers is also here that I am giving this Page Navigation Widget with different styles and options for full customization.

Login to Blogger → Dashboard

Select your Blog and Go to Template →  Edit HTML and Search (Ctrl + F) for the following tag

]]></skin>

Copy and Paste the following piece of code just above/before it

#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;border:4px solid #000;}
.displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#666666;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);}

Now find (Ctrl + F) this tag </body>

And add the following script just above/before 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=5;
    var prevText ='◄';
    var nextText ='►';
    var urlactivepage=location.href;
    var home_page="/";
  /*]]>*/
</script>
  <script src='https://googledrive.com/host/0B43vwjPtKakCYW43X0V3LTM0ZGs'/>
</b:if>
</b:if>

Customization:

• var perPage=7; No. of posts to show perPage
• var numPages=5; No. of pages to show in Navigation
• var prevText ='◄'; Text to show for Previous Page button
• var nextText ='►'; Text to show for Next Page button

Save Template button and you're done