Page Navigation Styles for Blogger

This styles page navigation i got from WebDistortion but in these blogs do not provide page navigation for Blogger. So I have to convert it first so can be used in Blogger.
Maybe in the pagination style that I made not exactly the same as the original, but I try my best to make it seem like the page navigation at the original website.
This is view of those Page Navigations

1. Log in to blogger account and Click drop down.

2. Now select "Template" Like Below.

3. Now you can see Live on blog, Click EDIT HTML Button"

4. Now click Proceed button.
   
5. Find this tag by using Ctrl+F    ]]></b:skin>

6. Paste below code Before ]]></b:skin> tag

.blog-pager,#blog-pager{
  font-family:"Times New Roman", Times, serif;
  font-weight:normal;
  font-size:12px;
  width:500px;padding: 10px;

}

}
.showpageNum a,.showpage a {
  background:transparent url('http://i1133.photobucket.com/albums/m596/abu-farhan/gbtn-bg.png') repeat-x;
  border:1px solid #97a7af;
  margin:0px 1px 0 1px;padding:3px 8px;
  text-decoration:none;
  color:#333;line-height:14px;cursor:pointer;white-space:nowrap;
  -webkit-border-radius:3px;-moz-border-radius:3px;
  }
.showpageNum a:hover,.showpage a:hover {
  background-image:url('http://i1133.photobucket.com/albums/m596/abu-farhan/gbtn-bg-sel.png');
  border:1px solid #e4905a;color:#e4905a;text-decoration:none;
  }
.showpageOf{
  margin:0 8px 0 0;
  }
.showpagePoint {
  background:transparent url('http://i1133.photobucket.com/albums/m596/abu-farhan/gbtn-bg-sel.png') repeat-x;
  margin:0 3px 0 3px;padding:3px 8px;
  line-height:14px;cursor:pointer;white-space:nowrap;
  -webkit-border-radius:3px;-moz-border-radius:3px;
  border:1px solid #e4905a;color:#333;text-decoration:none;font-weight:bold;
  }

Save this Image For Your Back UP:If Image Host down ,Upload this image in any image host Website And Then replace the link in Above Code

7.Aplly Javascript

Find This :

  </body>

Paste The Below Code Before </body>

 

<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>

Change based on your blog setting :
var postperpage=7;
var numshowpage=4;
Postperpage : How many Post every Page for your blog
numshowpage : how Many number will show in Your page Navigation

Different Style Of Pagination  Just Change Your Css Style

 

  .blog-pager,#blog-pager{
  font-family:"Times New Roman", Times, serif;
  font-weight:normal;
  font-size:11px;
 }
.showpageNum a,.showpage a {
  background:transparent url('http://i1133.photobucket.com/albums/m596/abu-farhan/wktop.gif') repeat-x;
  border:1px solid #97a7af;
  margin:0px 1px 0 1px;padding:3px 8px;
  text-decoration:none;
  color:#FF5917;line-height:14px;cursor:pointer;white-space:nowrap;
  }
.showpageNum a:hover,.showpage a:hover {
  background-image:transparent url('http://i1133.photobucket.com/albums/m596/abu-farhan/wktop.gif') repeat-x 0 -200px; text-decoration: none;
  color: #31627e;
  }
.showpageOf{
  margin:0 8px 0 0;
  display:none;
  }
.showpagePoint {
  background: url('http://i1133.photobucket.com/albums/m596/abu-farhan/wktop.gif') 0 -240px no-repeat; color: #BBB;
  margin:0 3px 0 3px;padding:3px 8px;
  line-height:14px;cursor:pointer;white-space:nowrap;
  border:1px solid #CCCCCC;text-decoration:none;
  }

Save this Image For Your Back UP:If Image Host down ,Upload this image in any image host Website And Then replace the link in Above Code