Five Page Navigation Styles For Blogger - Part 1

This is the Part 1 of this Tutorial. This Tutorial is about how  to change Page Navigation Style for blogger with Five Page Navigation Styles. I am pretty sure, you will like these styles. The most important thing in this tutorial is that this Tutorial is lengthy so it will take your time to change Page Navigation Style for blogger, because this is the Part 1 of this tutorial. But you don't have to worry about this because i have arrange this tutorial so that you find easy to perform these following steps and that's why i divided this tutorial in two parts.

This is the view of those Page Navigations Styles.

Style 1

.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;}

Style 2 

.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;}

Style 3 

.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;}

Style 4 

.blog-pager,#blog-pager{  font-family:"Times New Roman", Times, serif;  font-weight:normal;  font-size:12px;  width:500px;} .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;  }

Style 5 

.blog-pager,#blog-pager{  background: url("http://i1133.photobucket.com/albums/m596/abu-farhan/amazon1.gif") repeat-x;  font-size:12px;  font-family:"Times New Roman", Times, serif;  border-top: 1px solid #d0eaf8;  border-bottom: 1px solid #d0eaf8;  font-weight:normal; } .showpageNum,.showpage,.showpagePoint{margin:0 4px 0 4px; }.showpageNum a,.showpage a {  text-decoration: none;  padding: 6px;color: #055d90;  white-space: nowrap;  } .showpageNum a:hover,.showpage a:hover {  padding: 5px;  border: 1px solid #055d90;  text-decoration: none;  color: #055d90;  white-space: nowrap;background: #fff;  }.showpageOf{  display:none;  }.showpagePoint {  color:#000000;  }

Step 1:

1: Go To Blogger > Design > Page Elements

2: Don't check the "Expand widget Templates" box

3: Search for ]]></b:skin>

4: Copy your desired css script from above

5: Just before ]]></b:skin>  paste the css script

Step 2: 

6:  Search for </body>

7: Just before </body>  paste this: 

<script type='text/javascript'>;var home_page='/';var urlactivepage=location.href;var postperpage=7;var numshowpage=4;var upPageWord ='Prev';var downPageWord ='Next';</script>;<script src='http://scriptabufarhan.googlecode.com/svn/trunk/pagenaviv202-min.js' type='text/javascript'></script>

Change this based on your blog setting:

var postperpage=7;
var numshowpage=4;

postperpage : How many posts per page for your blog.numshowpage : How many number will show in your page navigation.

Just change the numbers only.

8: Save it.

Step 3: 

9:  Again go to the Edit HTML page and check the "Expand widget Templates" box

10: Search for this:

'data:label.url'

11: Replace this with:

'data:label.url + &quot;?&amp;max-results=7&quot;'

Change 7 base on how many post per page you want to show.

12: Save it. You are done.