Five Styles Page Navigation for Blogger New Script Part 2

Bismillah…
As I promised you in my previous post. I’ll give you five new css styles for your page navigation.
just like “Five Styles Page Navigation for Blogger New Script Part 1“,
i just convert from the collection of WebDistortion to css styles for Blogger.
This is view of those Page Navigations

This Demo for All CSS Style Script :

1. Style 1(SubCide)
2. Style 2(Free Css Templates)
3. Style 3(Wikio)
4. Style 4(Ulf Thesis)
5. Style 5(Maneame)

Step 1 : Apply Style

1. Login to Blogger Dashboard and navigate to Layout > Edit Html
2. Don’t click the checkbox which says ‘Expand Widget Templates’
3. Find this

]]></b:skin>

Copy the css script from the demo file.

Then insert the script in front of

]]></b:skin>

Example :

.blog-pager,#blog-pager{
  font-family:"Times New Roman", Times, serif;
  font-weight:normal;
  width:500px;
  font-size: 0.8em;
  padding: 0.6em 0.5em;
  background-color:#000000;
  text-align:center;
 }
.showpageNum a,.showpage a {
  text-decoration: none;
  padding: 0.3em 0.5em;
  color: #055d90;
  white-space: nowrap;
  color: #ffffff;
   margin-right: 0.1em;
  }
.showpageNum a:hover,.showpage a:hover {
 color:#A30A1A;
 text-decoration:none;
 background-color:#ffffff;
  }
.showpageOf{
  margin:0 8px 0 0;
  display:none;
  }
.showpagePoint {
 color:#ffffff;
 text-decoration:none;
 background-color:#A9061B;
 width:36px;
 height:16px;
 font-size:12px;
 padding-left:5px;
 padding-right:6px;
 padding-top:3px;
 padding-bottom:4px;
  }

]]></b:skin>

Step 2 : Aplly Javascript

Find This :

</body>

Replace with :

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

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

Step 3 : Customize Label (if you already use my previous Page Navi don’t use this step)

Go to the Edit HTML page and “Expand Widget Templates”
Find this (all of this text in your xml or template)

'data:label.url'

and Replace with this

'data:label.url + "?&max-results=7"'

Change 7 base on how many post every page
In the next post, I will give you page navigation with Google Style using new navigation script.
Alhamdulillah…by Catur
Another post about the page navigation for Blogger :

1. Five Styles Page Navigation for Blogger New Script Part 1
2. Numbered Page Navigation For Blogger New Script
3. Six Styles Page Navigation for Blogger
4. Beautiful New Page Navi For Blogger With Scroll
5. Page navigation for Blogger with Google Style