How to add numbered page navigation widget to your blogger/blogspot blog

Hey friends, Let us discuss how to add a custom numbered page navigation widget to your blogspot/blogger blog? 

As you know in blogspot we have Older Post and Newer Post navigation links at the bottom as you can see in the image below..

There is no other option available in blogger and it is difficult to navigate easily from current page to the page you want. So, how to make your blogspot blog more reader friendly? Answer is simple! 

Add a numbered page navigation widget so your readers can access the page they want with a single click. The Main Advantage of Navigation numbered widget is that our visitors can easily go to any page without wasting their time.They can directly jump to 1st page or directly jump to last page of the site with this navigation widget and even you can also change or customize this widget according to your needs.

Here is a simple step by step method to add numbered page navigation widget to your blog. 

You need to take just to steps to add this widget to your blog.

1> Adding CSS to your blogspot blog

2> Adding HTML/JavaScript

So, lets begin first we will add CSS code for the numbered page widget. It will be a good idea to backup your template before making any changes. 

Step One:

# Go to dashboard> template > click on edit HTML button

# Now click anywhere inside the code area and press ctrl+F a search box will open copy the this code ]]></b:skin> and paste in search box and press enter, this will be highlighted in code area. 

# Now chose from the style you want, copy the respective code given below each style, Now replace ]]></b:skin> with the code.

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

]]></b:skin>

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

]]></b:skin>

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

]]></b:skin>

Style 4






.showpagePoint {
text-decoration: none;
background: linear-gradient(to bottom, rgb(242, 242, 242) 0%, rgb(229, 229, 229) 100%) repeat scroll 0% 0% transparent;
color: rgb(41, 41, 41);
border: 1px solid rgb(227, 227, 227);
display: inline-block;
margin-right: 3px;
padding: 7px 10px;
font-weight: bold;
}
.showpageOf {
color: rgb(255, 255, 255);
font-weight: bold;
background: none repeat scroll 0% 0% rgb(224, 102, 102);
padding: 8px;
margin: 8px;
}
.showpageNum a:hover {
color: white;
}
.showpageNum a:link {
background: linear-gradient(to bottom, rgb(255, 255, 255) 0%, rgb(242, 242, 242) 100%) repeat scroll 0% 0% transparent;
color: rgb(51, 51, 51);
margin-right: 3px;
display: inline-block;
padding: 7px 10px;
border: 1px solid rgb(227, 227, 227);
}
.showpageNum a:hover {
text-decoration: none;
background: linear-gradient(to bottom, rgb(242, 242, 242) 0%, rgb(229, 229, 229) 100%) repeat scroll 0% 0% transparent;
color: rgb(41, 41, 41);
border: 1px solid rgb(227, 227, 227);
display: inline-block;
margin-right: 3px;
padding: 7px 10px;
}

]]></b:skin>

Style 5

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

]]></b:skin>

As you finnished adding the CSS lets proceed to our next step

Step Two
# Now find </body> tag by searching in search box and paste the code given below just above it

<!--Page Navigation Starts-->

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

<!--Page Navigation Ends -->

</body>

You can also alter the default settings as per your choice changing the colored values of these codes

perPage: 7,numPages: 6,
var prevText ='« Previous';
var nextText ='Next »';

Like wise you can also change the colored text as per your choice....... when done!

Click on the "save template" button and yo're done...... thats it

Happy blogging.