Numbered Page Navigation For Blogger

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)

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

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

Step 2 : Aplly Javascript

</body>

Replace with :

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

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 + &quot;?&amp;max-results=7&quot;'

Change 7 base on how many post every page
only That, I hope it can work and make your blog easy to navigate :D

SUBSCRIBE VIA RSS FEED

If you liked the article on this blog, Please CLICK HERE to subscribe for free via email, that way you will get a shipment every article there is an article that appeared in HARAJUKU COLLECTION