How to add Numbered Page Navigation to Blog

Usual Navigation in Blogger is bit cumbersome , so this will solve that problem
Instructions:
Login to Blogger , Go to Layout>Add gadget> Html/Javascript  , then copy the below code into that box .

Preview

<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:#000;text-shadow:0 1px 2px #fff;font-weight:700}.showpageNum a{padding:3px 8px;margin:0 4px;text-decoration:none;border:1px solid #999;-webkit-border-radius:3px;-moz-border-radius:3px;background:#ddd url(http://i694.photobucket.com/albums/vv310/rahulshetty87/wp1_zps8de968e7.jpg) 0 -50px repeat-x}.showpageNum a:hover{border:1px solid #888;background:#ccc url(http://i694.photobucket.com/albums/vv310/rahulshetty87/wp1_zps8de968e7.jpg) 0 -25px repeat-x}.showpageOf{margin:0 4px 0 0}.showpagePoint{color:#fff;text-shadow:0 1px 2px #333;padding:3px 8px;margin:2px;font-weight:700;-webkit-border-radius:3px;-moz-border-radius:3px;border:1px solid #999;background:#666 url(http://i694.photobucket.com/albums/vv310/rahulshetty87/wp1_zps8de968e7.jpg) 0 0 repeat-x;text-decoration:none} </style> <a href="http://bloggertipsss.blogspot.com/" target="_blank" title="Blogger Tips"><img src="https://bitly.com/24workpng1" alt="Blogger Tips" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://bloggertipsss.blogspot.com/" target="_blank" title="Latest Tips And Tricks"><img src="https://bitly.com/24workpng1" alt="Latest Tips And Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://bloggertipsss.blogspot.com/" target="_blank" title="Blogger Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tricks" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a><script style='text/javascript'>
var postperpage=5;
var numshowpage=3;
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></text area>