03 March 2010

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

Advertisements

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

Related Posts

76 comments

March 11, 2010 at 2:16 PM

Do I have to do all 3 steps before I can see in the preview button if I did it correctly? I did steps one and two without saving and in preview the page navigation hadnt changed.

March 12, 2010 at 12:10 AM

Do first two steps then save. Then for the third step click on Expand widget templates. Then follow third step. Save and look for changes.

April 8, 2010 at 6:00 AM

First of all thanx a lot for ur wonderful work.
i have applied the above number widget,but the problem is on the first page all the posts are visible.I have set post per page to 1.Plz help rectifying it.I want that the front page also shows only 1 post.
Warm regards
http://astrology.com.co.in/

April 8, 2010 at 6:50 AM

Hi AS CHAWLA
I visited your blog http://astrologicalviewpoint.blogspot.com/ where you applied this page navigation.

Your first page that is home page shows 7. If you want to show only one post on home page then go to
Dashboard > Settings > Formatting
here select 1 at first option i.e Show at most and choose Posts not Days.

April 24, 2010 at 3:30 PM

Thanks man, works perfect!

http://funfortunately.blogspot.com/

May 22, 2010 at 10:56 AM

Many thanx to you
grat work

May 29, 2010 at 6:26 AM

so, what's the purpose of the css files attached?
i've seen that there's no instruction on how to use it

May 29, 2010 at 6:33 AM

One more thing,
I've 3
'data:label.url'


So, which one should I change ?

May 29, 2010 at 7:00 AM

Welcome Affan Ruslan.

CSS Styles: These are different styles codes that determine the look of page navigation. You can use any one instead of code given in STEP 1 i.e. ABOVE ]]></b:skin>

'data:label.url'

Replace all 3.

May 29, 2010 at 5:14 PM

Yeah, I've done all the steps but it didn't appear.

Do you have another alternatives?

Thanks

May 29, 2010 at 9:05 PM

I dont know whats the problem, may be you should send me your template and I'll try to add the code.

May 30, 2010 at 12:22 PM

Oh, that would be great.
Can you please email me at ruslana [at] mcmaster.ca

Will send it through your email.

May 31, 2010 at 12:01 AM

ok...have sent you a mail.

July 27, 2010 at 12:46 AM

@drraman i tried many times these steps but its not coming, please have a look whats the problem?

July 27, 2010 at 7:27 AM

The script was blocked. now new script location added.

July 27, 2010 at 9:21 AM

@drraman Thanks sir

August 6, 2010 at 2:18 AM

Hi, I've done all the three steps, but it's not displaying properly.
Instead of the way it should display, it's displaying in this way:
[Page 1 of 7] [1][...]
Can you have a look in this problem?

August 6, 2010 at 6:51 AM

You are using Arythmia template. It have it's own page navigation. You have to remove the earlier codes and add the codes given in above post.

August 6, 2010 at 7:26 AM

I don't get it. I replaced the codes in arthemia by the codes given in the above post, and that's what happened. What else do I need to remove from the earlier codes?
Thanks.

August 7, 2010 at 6:43 AM

Send your template to
gabbar1113@gmail.com

Anonymous
August 21, 2010 at 3:03 AM

Thank you my friend this one finally works for me , i spent a lot of time with other fixes, but this one really works Thank you very much!
http://funaye.blogspot.com Here you can take a look.

August 25, 2010 at 2:49 PM

Nice, I used this code in my blog
otodiy.blogspot.com

thanks,
singachu

October 25, 2010 at 10:46 AM

Hi,

I'm trying to use this on my 2 blogs and I really can't get it to work. I'm not sure where I'm going wrong but I've e-mailed you my original templates. Sorry to bother you and I hope you can help.
Thanks very much,
Tom.

October 26, 2010 at 12:24 AM

I have checked your both templates and the codes works perfectly. Use Mozilla Firefox browser.

October 27, 2010 at 1:03 PM

Thanks for your help. Yeah I'm already using Firefox.

I've just tried it again and it still won't work.
Could there be anything on the blogs that would stop it from working? They're both pretty new and just have simple Blogger templates, nothing else had been added.

Thanks,
Tom.

October 27, 2010 at 11:13 PM

Remove all gadgets and widgets codes from your template then try.

November 15, 2010 at 2:00 AM

Hi, i need help in adding this to my blog. It was done by my friend and i cant find the "]]>" part. I tried adding it at another place but all i can see is the whole code. Please help me. Thanks!

November 15, 2010 at 11:00 PM

Look for the
</b:skin>
in your template WITHOUT ticking expand widgets template.

November 15, 2010 at 11:31 PM

i think mine was very long ago. there's no such expand widgets template. It was done by my friend. Not those chosen from the templates

November 16, 2010 at 12:12 AM

I think nvm. I redo a blog using the template. Thanks anyway.

November 17, 2010 at 6:13 AM

thank you so much

January 21, 2011 at 8:40 PM

thank you so much

February 26, 2011 at 9:28 AM

Hey buddy, I have used the above code into my blogger template, and even thoe it works perfectly well, the fonts that it uses appear too big.

I have tried changing the CSS, but all I can seem to do is alter the parameters of everything else except the font. Please advise my friend, as the actual navigation works.

http://www.comicbookandmoviereviews.com

Thank you for your time.
Jason

P.S. I have removed the code for the time being, and will add it again when you get in touch.

February 27, 2011 at 1:34 AM

Hi

Look for the

font-weight: 700;

and change the value.

February 28, 2011 at 9:30 AM

How do I delete a comment from somebody else's blog?

February 28, 2011 at 10:08 PM

Hi Brad Fallon

It is impossible to delete comment from somebody else's blog unless you have access to his dashboard.

March 25, 2011 at 10:25 AM

this is so nice my blog! :P! is there any way to put it under each post? the page nav is appearing on homepage and label page now, but not under the post.

btw, i tried numshowpage=10 (and above) is not working as it should. it will list all my 18 pages instead...so i gotta just stick to 9. am i the only one with this issue?

March 25, 2011 at 11:46 PM

@ trendy

This can not be used for single post even not in Wordpress, phpBB, vBulletine.

The following website also use the same codes.
http://www.getlyricz.com/

On home page they show 10 posts. and label shows 30 posts.

March 28, 2011 at 11:56 PM

@drraman

great idea huh...maybe i can consider 10posts on homepage and 20posts on label hm...

i was saying numshowpage=10 (and above) is not working. it will show all the pages i have (currently have 18 pages)

eg. if i set to 3, it will show:-
[1][2][3]...[18][Next]

but if i set to 10 or above, it will show:-
[1][2][3][4][5][6][7][8][9][10][11][12][13][14][15][16][17][18]

i'm currently setting it to 9. actually wanted to set to 11...any clue?

March 29, 2011 at 1:42 AM

@ trendy, I got your problem. I worked on it but not get the solution. But you can ask the original coder here: http://www.abu-farhan.com/2009/12/numbered-page-navigation-for-blogger-new-script/

April 7, 2011 at 3:47 PM

How to increase the size of the number showing.

April 7, 2011 at 8:11 PM

@ Kavs

Please explain more...

April 8, 2011 at 10:22 AM

I am asking of to increase the height and width of the page numbers,instead of the actual size.

April 10, 2011 at 2:23 AM

Look for the code in Step one

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

Experiment with values to get the desired result.

April 14, 2011 at 10:56 AM

Awesome it worked perfectly, thanks bro..

May 30, 2011 at 10:21 AM

Thank you very much

August 4, 2011 at 1:14 PM

THANKS FOR NICE WORK.BUT BRO- I HAVE PROBLEM "WHY SHOW THE CSS CODE IN PAGES UP AND DOWN SITE".CAN YOU PLS CHECK.http://kabiyal.blogspot.com/

August 5, 2011 at 12:22 AM

Hi kabiyal

I am not getting you. Can you describe further.

August 30, 2011 at 12:24 PM

Hi,
is there a solution for the minor(less than 3 seconds) delay after pressing the page # and the start of execution(curser change shape indication)?
i.e. why as soon as i press button (page#'s)it starts immediately.

Faisal Alenzy
jarwanf@gmail.com
KSA, Riyadh

September 5, 2011 at 11:43 PM

this is a fantastic tutorial..
I am happy with my page navigation thanks.

September 20, 2011 at 5:56 PM

Thank you for the wonderful work!

But when i applied it to my blog, in label page, it shows Older Posts-Home-Newer Poster at first. When I clicked on Older Posts, it then brings up the Numbered Navigation Bar, but the posts are from the 16th one(I set postperpage=15) and the page number still shows it's the 1st page.

Could you please help me? Thanks a lot!!!!

September 20, 2011 at 7:24 PM

never mind! i just found that i need to use & to replace &

Thanks again for such a wonderful design!!

September 24, 2011 at 7:35 PM

Thanx dude..it works fine for me...

htttp://www.getsoft.blogspot.com

Anonymous
October 5, 2011 at 12:04 AM

how to set only 4 post in one page

October 6, 2011 at 12:17 AM

Find and change the value here

var postperpage=7;

October 6, 2011 at 12:36 AM

help me please,
there is a seconds delay when clicking next, previous, and page # is there a way to get immediate reaction when clicking????

October 6, 2011 at 1:22 AM

Hi jarwanf, I am on leave.

Contact here: http://www.abu-farhan.com/2009/12/six-style-page-navigation-for-blogger/

October 14, 2011 at 6:17 PM

works but not perfectly! before the actual numbered page appear the Previous, Home, and Next button will appear first. WTF is their any solution for this? wake up!

October 15, 2011 at 12:20 AM

Hi dude
Keep the same value for no. posts shown on home page, also for Step 3 (Lable)

And also here
var postperpage=

November 4, 2011 at 3:00 PM

not working i have posted 1200 posts on my blog and pr page i have selected 15 posts but page navigation number shows only 34 page. in my mind of view the page navigation number shows 80 pages whats the problem ? plz tell me

November 4, 2011 at 3:16 PM

thanks dude thanks a lot

November 5, 2011 at 12:04 AM

As stated in above comment

Keep the same value for no. posts shown on home page, also for Step 3 (Lable)

And also here
var postperpage=

December 22, 2011 at 11:36 PM

Okay, I followed all the steps and nothing shows up on my blog. I'm using my test blog for testing purposes. The link is: http://thecurlyfitchictest1.blogspot.com/

I've tried this four times. If you could take a look and let me know what I am missing that would be extremely helpful.

Thank you so much!

December 23, 2011 at 5:00 AM

It works 100%

Make another test blog do not add other codes. And try this this codes , add them very carefully.

December 23, 2011 at 8:29 AM

It took me two days to do this test blog (to transfer to my old blog). Is there anyway you can advise as to which code I should not add? Also, I'm working with the "Simple" Design Template. Are you saying it's been tested for that one? I'm sorry for so many questions. My actual blog is a "Minima" template and somethings I used on that one doesn't work on the "Simple" one and I had to find alternate methods. I appreciate you answering my other question so promptly.

December 24, 2011 at 12:03 AM

Hi The Curly Fit Chic
This hacks works perfectly as you can seen on this blog.

December 25, 2011 at 10:42 AM

I have the same problem with every Page navigation (including this) i add to my blog :
The navigation is only in the first page usable - if u click on page 2 or 3, u cant click any page from there on or cant go back

I`ve tried many many maaany navigations - please HELP :)

December 26, 2011 at 12:27 AM

Concentrate on


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;


AND ALSO

STEP 3 - Label Fix (Customization)

January 1, 2012 at 11:42 PM

i did follow all your step. but still not working...

my blog is :
www.zaarz.blogspot.com

please help. tq!

January 2, 2012 at 12:01 AM

@ZaaRz
upload your template to any file sharing website and post the link.

January 2, 2012 at 12:18 AM

wow super fast reply...

http://www.4shared.com/document/rgdeUyc8/Template_Zaarz.html

ive sent the template to your email : gabbar1113@gmail.com

thank you. =)

January 2, 2012 at 6:02 AM

@ZaaRz
In your template

Newer Post Older Post Home

links are missing.

January 2, 2012 at 6:07 AM

so how i want to add the links back ? please help.
Thanks in advance

January 3, 2012 at 1:22 AM

Follow the link
http://www.blogger-help.com/2009/10/how-to-remove-oldernewer-posts-and-home.html

March 1, 2012 at 11:44 AM

this is a fantastic tutorial.. , Thanks for sharing it.

Anonymous
April 11, 2012 at 8:03 AM

its awesome i am using it now. :)

Post a Comment

Share

Twitter Delicious Facebook Digg Stumbleupon Favorites More