Add a Cool Numbered Page navigation to blogger

Hi Guys,Today I'm going to teach you How To Add A Cool Numbered Page Navigation Widget to Blogger.You can see the screenshot of this widget from above picture.Let's see How to Get This!

Follow The Below Steps

1. Login to your blogger Dashboard and go to Design --> Page Elements.
2. Click on 'Add a Gadget' on the sidebar.
3. Select 'HTML/Javascript' and add the code given below and click save.

<!-- Stylish colored  Navigation Widget For Blogger By www.bloggertricksandtoolz.com-->
<style type="text/css">
#blog-pager{padding:5px 0 !important;}
.showpageArea {font-weight: bold;margin:5px;}/* www.bloggertricksandtoolz.com */
.showpageArea a {text-decoration:underline;color: #fff;}/* www.bloggertricksandtoolz.com */
.showpageNum a, .showpage a {color: #fff;text-decoration:none;border:1px solid #999;-webkit-border-radius:3px;-moz-border-radius:3px; margin:0 3px;padding:3px 5px; background: #789EB1; background: -moz-linear-gradient(top, #789EB1 0%, #618FA7 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#789EB1), color-stop(100%,#618FA7)); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#789EB1', endColorstr='#618FA7',GradientType=0 ); }/* www.bloggertricksandtoolz.com */
.showpageNum a:hover, .showpage a:hover {border: 1px solid #ccc;background: #7d7e7d; background: -moz-linear-gradient(top, #7d7e7d 0%, #6B6B6B 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7d7e7d), color-stop(100%,#6B6B6B)); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7d7e7d', endColorstr='#6B6B6B',GradientType=0 ); }/* www.bloggertricksandtoolz.com */
.showpagePoint {color: #aaaaaa;text-decoration:none;border:1px solid #999;-webkit-border-radius:3px;-moz-border-radius:3px; margin:0 3px;padding:3px 5px; background: #e2e2e2; background: -moz-linear-gradient(top, #e2e2e2 0%, #dbdbdb 50%, #d1d1d1 51%, #fefefe 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e2e2e2), color-stop(50%,#dbdbdb), color-stop(51%,#d1d1d1), color-stop(100%,#fefefe)); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2e2e2', endColorstr='#fefefe',GradientType=0 ); }/* www.bloggertricksandtoolz.com*/
.showpageOf {text-decoration:none;padding:3px;margin: 0 3px 0 0;}/* www.bloggertricksandtoolz.com*/
.showpageNum a:link,.showpage a:link {text-decoration:none;color:#fff;}/* www.bloggertricksandtoolz.com*/
</style>

<script type='text/javascript'>
var home_page="/";
var urlactivepage=location.href;
var postperpage=5;
var numshowpage=3;
var upPageWord ='Previous';
var downPageWord ='Next';
</script>
<script src='http://bloggertrickandtoolz.googlecode.com/files/www.bloggertricksandtoolz.com-bloggerpagenavi.js' type='text/javascript'></script> 

Tks for Visiting me, and let your like and comment.

by Lord Alio