Adding ed Page Navigation to Blogger Template

1. Adding The CSSStep 1. Go to Blogger Dashboard > Template > click on the Edit HTML button:


Step 2. Click anywhere inside the ar and press the CTRL + F to open the Blogger srch box. Type or paste ]]></b:skin> tag inside the srch box and hit Enter to find it.

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

Style 1#blog-pager{clr: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 2:#blog-pager{clr: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);}
Style 3:#blog-pager{clr:both;margin:30px auto; padding: 7px; text-align:center;font-size: 11px;background-: -webkit-gradient(linr,left bottom,left top,color-stop(0, #000000),color-stop(1, #292929));background-: -o-linr-gradient(top, #000000 0%, #292929 100%);background-: -moz-linr-gradient(top, #000000 0%, #292929 100%);background-: -webkit-linr-gradient(top, #000000 0%, #292929 100%);background-: -ms-linr-gradient(top, #000000 0%, #292929 100%);background-: linr-gradient(to top, #000000 0%, #292929 100%); padding: 6px;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;}
.blog-pager {background: none;}
.displaypageNum a,.showpage a,.pagecurrent{padding: 3px 10px;margin-right:5px; color: #fff;}
.displaypageNum a:hover,.showpage a:hover,.pagecurrent{background-: -webkit-gradient(linr,left bottom,left top,color-stop(0, #59A2CF),color-stop(1, #D9FF));background-: -o-linr-gradient(top, #59A2CF 0%, #D9FF 100%);background-: -moz-linr-gradient(top, #59A2CF 0%, #D9FF 100%);background-: -webkit-linr-gradient(top, #59A2CF 0%, #D9FF 100%);background-: -ms-linr-gradient(top, #59A2CF 0%, #D9FF 100%);background-: linr-gradient(to top, #59A2CF 0%, #D9FF 100%);text-decoration: none;color: #000;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;}
.showpageOf{display:none!important}
#blog-pager .pages{border:none;background: none;}
2. Adding The Script
Step 4. Now find (CTRL + F) this tag:
</body>UPDATED! working version for more than 500 posts!

Step 5. 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'>
/*<![ATA[*/
var perPage=7;
var numPages=6;
var prevText ='« Previous Page';
var nextText ='Next Page »';
var urlactivepage=loion.href;
var home_page="/";