How to Add Numbered Page Navigation Widget for Blogger / Blogspot

Page Navigation is awesome widget which enables page number navigation to visitors. You might have seen numbered page navigation on many WordPress blogs. There is simple JavaScript which enables your older posts, newer posts & home links to numbers. Have you seen that older posts, newer posts & home links are boring feel.

How to add Numbered Page Navigation Widget to Blogger Blog?

Step 1) In The New Blogger Dashboard Click The Drop Down For Your Blog > Choose Layout > Click Add A Gadget > Choose HTML/Javascript > Paste In The below Code  :

<style type='text/css'>
#blog-pager{padding:10px 0;clear:both;}
.showpageNum a {color:#333333;text-decoration:none;border: 1px solid #CCCCCC;margin:0 3px;padding:3px 7px;background-color:#FFFFFF;}
.showpageNum a:hover, .showpage a:hover, .showpagePoint {color:#333333;border: 1px solid #CCCCCC;padding:3px 7px;background-color:#CCCCCC;margin:0 3px;}
.showpageOf {color:#333;text-decoration:none;padding:3px 7px;margin: 0 3px 0 0;}
</style>
<script style='text/javascript'>
var numshowpage=3;
var postperpage =5;
var upPageWord="Previous";
var downPageWord="Next";
var urlactivepage=location.href;
var home_page="/";
</script>
<script style='text/javascript' src='http://bloggerblogwidgets.googlecode.com/files/way2blogging_bloggerpagenavi.js'></script>

Step 2) Save it.