How to Add Stylish Numbered Page Navigation to Blogger.

Do you want to make your blog Navigation more easy and user-friendly? Are you fed up with the default blogger "Older Posts" and "Newer Posts" navigation? By default, Blogger provides us an option to set the number of posts on our homepage, when the limit of the posts exceeds it shows Older Posts or Newer Posts button for navigating posts. But if you want to make your blog more user-friendly Numbered Page Navigation is better than the Newer and Older Posts. Page numbers instead of older and newer could help our visitors to navigate quicker and easily. If you're looking to add a Numbered Page Navigation to your website then you're at the place. In this tutorial we're going to show you that How to Add Numbered Page Navigation to Blogger. We have also designed 7 clean and stylish styles for this navigation, choose the one you like and don't forget to leave your feedback about our designs in the comments section below.

How to Add Numbered Page Navigation to Blogger

Now Follow The instruction:

1. Step  Log in to your Blogger Account and Go to your Blogger Dashboard
2. Step  Click on -> Template -> Edit HTML->
3. Step  Now Find the ]]></b:skin> By Pressing Ctrl+F (Windows) or CMD+F (Mac)
4. Step  Copy and Paste the below any Style Which you want , above ]]></b:skin>

Style 1







#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:2px solid #ccc;}
.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);}





Style 2





#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: #000; background-color:#fff;border:2px solid #ccc;}
.displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#222;text-decoration:none;color: #fff;}
#blog-pager .showpage, #blog-pager, .pagecurrent{font-weight:bold;color: #ccc;}
 .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);}




Style 3





#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:#00CC00;border:2px solid #008E00;border-radius:2px;}
.displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#008E00;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);}





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:#2aa4cf;}
.displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#1D7290;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);}





Style 5







#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:#FF8000;border:2px solid #B25900;border-top-right-radius:7px;border-bottom-left-radius:7px;}
.displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#B25900;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);}





Style 6







#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:#009999;border:2px solid #006B6B;border-radius:999px 999px 999px 0px;}
.displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#006B6B;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);}





Style 7







#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:#FFCC00;border:2px solid #B28F00;border-radius:999px 999px 999px 999px;}
.displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#B28F00;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);}



5. Step After Selcet Style any next Locate <body> By Pressing Ctrl+F (Windows) or CMD+F (Mac) and copy the
   below JavaScript and paste it above/before </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=6; var numPages=6; var prevText ='◄'; var nextText ='►'; var urlactivepage=location.href; var home_page="/"; /*]]>*/ </script> <script type="text/javascript" src="http://yourjavascript.com/1285534128/pagenavigationupdated.js"></script> </b:if> </b:if>

Customization:


var perPage=6; No. of posts to show perPage
var numPages=6; 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


6. Step You're done. Now Save template and see result by refreshing page.

If you have any problem, then feel free to communicate by comment box. If you like this widget, then don't forget to share this post with your social media.

Any type of information please Contact us.