Page Navigation

Numbered Page Navigation For Blogger New Script

December 11th, 2009

Bismillah (in the Name of Allah), Alhamdulillah (All Praise to Allah)

Page navigation is need for all blogger because it can make navigation easy for your visitors. Previous script have some weakness :

1. Maximum posts 500
2. Have to read all JSON file if post so many make your blog slow
3. Need long loop to calculate all posts (no body know this if they not read the script)

Now all those problems can be solved, Insya Allah. The script is different with My Previous Modification Nummbered Page Navigation for blogger, the script based on my own idea and for style I used from Mohamed Rias

To see the result open These demos:

• Demo for Minima
• Demo for Custom Template (Irressistible from Anshul)
• Demo for Classic from Choen Blog

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>

and replace it with

.showpageNum a {
  padding: 3px 8px;
  margin:0 4px;
  text-decoration: none;
  border:1px solid #999;
  -webkit-border-radius:3px;-moz-border-radius:3px;
  background: #ddd;
  }

.showpageOf {
margin:0 8px 0 0;
}
.showpageNum a:hover {
  border:1px solid #888;
  background: #ccc;
  }

.showpagePoint {
  color:#fff;
  text-shadow:0 1px 2px #333;
  padding: 3px 8px;
  margin: 2px;
  font-weight: 700;
  -webkit-border-radius:3px;-moz-border-radius:3px;
  border:1px solid #999;
  background: #666;
  text-decoration: none;
  }

]]></b:skin>

Above style use Old Style You can use Six other style from this PostsSix Styles Page Navigation for Blogger

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
only That, I hope it can work and make your blog easy to navigate, amiin

For All My Page Navi Can read from Read this :

1. Six Styles Page Navigation for Blogger
2. Beautiful New Page Navi For Blogger With Scroll
3. Page navigation for Blogger with Google Style
4. Page Navigation for Blogger (Problems Solved)