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://all-in-one-blogger-widget.googlecode.com/files/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.

Posted in: Blogger Tips