Numbered Page Navigation hack for Blogger (New & Error free)

Few bloggers has some problems with previous Page Navigation script. Now here is a completely new and error free script for Numbered Page Navigation(i.e. Panigation) for Blogger.  Specially thanks to Abu Farhan for this new script. As I already stated Page navigation allows us to number blog pages(1, 2, 3 ....) like those of a book. This replaces the 'newer' and 'older' post links and give users/visitors an ability to go to the deep into your blog.

Live Demo of Page Navigation hack.

So let's add this elegant hack to your blog.
STEP 1 - Adding CSS Style

Go to Blogger Dashboard > Layout > Edit HTML. Always Download Full Template for Backup. Do NOT click on Expand Widget Templates. Now look for

]]></b:skin>

Now add following code ABOVE it.

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

This is a one style code. But you can choose your suitable one. All styles are created by Abu Farhan.

CSS Style

1. Style 1
2. Style 2
3. Style 3
4. Style 4
5. Style 5
6. Style 6

Demo of Above Styles

1. Style 1
2. Style 2
3. Style 3
4. Style 4
5. Style 5
6. Style 6

STEP 2 - Adding JavaSript

Look for

</body>

And add following code ABOVE it.

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

Here you can change Prev and Next Text.

var postperpage=7;
var numshowpage=4;

Postperpage : How many Posts you want to show on one Page of blog.
Numshowpage : how Many number will show in Your page Navigation

e.g. If you want to show 5 posts per page then change var postperpage=7; to var postperpage=5;

Save your Template.


STEP 3 - Label Fix (Customization)

Again go to Blogger Dashboard > Layout > Edit HTML. This time Click on Expand Widget templates.
Look for

'data:label.url'

And replace it with

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

Again here you have to change 7 to 5 if you want to show 5 posts per page.

Save your template and view your blog.

UPDATE

When you want to add the link similar to given below, directly into the template

http://www.blogger-help.com/search/label/2%20Column%20Templates?&max-results=6

You will get following error:

The reference to entity "max-results" must end with the ';' delimiter.

To solve this error just

replace & with &amp;

Similar hack

Numbered Page Navigation hack with Scroll

Posted in: Blogger Hacks n Tips,Blogger Widgets,Edit Customize Template

Related Posts