Add page navigation widget on your Blogger Blog

New attractive page navigation widget is a great widget for new blogger to increase your page views with attractive css effect.

Add widget on your Blog

1.Log on to your Blogger Account
2. Select your Blog.
3.Select Layout

4.Click on Add a Gadget

5.Select HTML/JavaScript

6.Now paste the following code given below

<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:#fff}.showpageNum a{padding:3px 8px;margin:0 4px;text-decoration:none;background:#363636 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhv26SDAadIf2I08HvuERWy3GMkZq_u2SiPdp45Eyg1ScPDtpvKosZsAD8z3uNwPO7yotrw3NDR8DnBOwNFpUhYGjM8LBVdt50dXkjLTLZmtZ_V1yP9E1Qzrw1ASzNnSVWlvZGC9aTXtJs/s1600/wp3.jpg) 0 -25px repeat-x}.showpageNum a:hover{background:#044697 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhv26SDAadIf2I08HvuERWy3GMkZq_u2SiPdp45Eyg1ScPDtpvKosZsAD8z3uNwPO7yotrw3NDR8DnBOwNFpUhYGjM8LBVdt50dXkjLTLZmtZ_V1yP9E1Qzrw1ASzNnSVWlvZGC9aTXtJs/s1600/wp3.jpg) 0 -50px repeat-x}.showpagePoint{color:#fff;padding:3px 8px;margin:2px;font-weight:700;background:#e30000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhv26SDAadIf2I08HvuERWy3GMkZq_u2SiPdp45Eyg1ScPDtpvKosZsAD8z3uNwPO7yotrw3NDR8DnBOwNFpUhYGjM8LBVdt50dXkjLTLZmtZ_V1yP9E1Qzrw1ASzNnSVWlvZGC9aTXtJs/s1600/wp3.jpg) 0 0 repeat-x;text-decoration:none}.showpageOf{margin:0 5px 0 0} </style>

<script style='text/javascript'>
var postperpage=5;
var numshowpage=5;
var upPageWord="Prev";
var downPageWord="Next";
var home_page="/";
var urlactivepage=location.href;
</script>
<script style='text/javascript' src='http://safir85.ucoz.com/24work-blogspot/page-navigation/0-test-p-n-01_00.js'></script>

You can also modify these colors according to your template by changing yellow colored field.
By default Number of post per page=5.