0 Page Navigation with Blog Pager Design for Blogger Templates

Page navigation for blogger is most important widget for blogger. Generally this widget can make visitors easy navigate to blog posts. For engaging the visitors with your blog page navigation is very powerful widget.  Always readers get bore by Next or Previous page button because they can't visit  according to their desire pages instantly. I have designed this Page Navigation that is attractive and it will work smoothly. As well as it will change the Blog Pager (Next, Home, Previous) appearance that will make more attractive. 

Live Demo

Step 1 Log in to your Blogger Account and Go to your Blogger Dashboard

Step 2 Now click on -> Template -> Edit HTML

Step 3 Now Find this code ]]></b:skin> by pressing Ctrl + F

Step 4 Copy the below code and Paste it Before/above ]]></b:skin> and Save the templates.

/* Blog pager by www.bloggerspice.com*/
#blog-pager{
clear:both;
text-align:center;
margin:10px;
padding:5px 0 0 0;
height:30px;
}
#blog-pager a,.showpagePoint,.showpageOf,.showpageNum a{
text-decoration:none;
color:#fff;
background:#222;
-moz-border-radius:3px;
-khtml-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;
margin:0 2px 0 0;
padding:4px 10px 5px;
border:1px solid #000;
text-transform: uppercase;
font:normal normal 12px Oswald;
text-shadow:0 -1px 1px rgba(0,0,0,0.25);
}
#blog-pager a:visited{
color:#fff;
}
#blog-pager a:hover,.showpagePoint {
background-color: #264778;
border: 1px solid #000;
color: #fff;
}
#blog-pager-newer-link{
float:left;
}

Step 5 Now Find this code </body> by pressing Ctrl + F

Step 6 Copy the below code and Paste it Before/above </body> and Save the templates.

<!--Page Navigation by www.bloggerspice.com Starts-->                                 <script type='text/javascript'> var pageCount=1;
var  var displayPageNum=3;
var upPageWord =&#39;Previous&#39;;
var downPageWord =&#39;Next&#39;;
</script>
<script src='http://bloggerspicebd.googlecode.com/files/pagenavi.js' type='text/javascript'/>
<!--Page Navigation by www.bloggerspice.com Ends--> var upPageWord =&#39;Previous&#39;; var downPageWord =&#39;Next&#39;; </script> <script src='http://bloggerspicebd.googlecode.com/files/pagenavi.js' type='text/javascript'/>                                                                               <!--Page Navigation by www.bloggerspice.com Ends--><div class='clear'></div>

Customization:

• Change the Digit Count=1 for Display Post Per page
• Change the Digit displayPageNum=3 for display Page Number