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

Newer Post Older Post Home

76 comments

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

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

Reply
AS CHAWLA
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/

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

Reply
Fun Web
April 24, 2010 at 3:30 PM

Thanks man, works perfect!

http://funfortunately.blogspot.com/

Reply
نادر
May 22, 2010 at 10:56 AM

Many thanx to you
grat work

Reply
Affan Ruslan
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

Reply
Affan Ruslan
May 29, 2010 at 6:33 AM

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


So, which one should I change ?

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

Reply
Affan Ruslan
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

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

Reply
Affan Ruslan
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.

Reply
drraman
May 31, 2010 at 12:01 AM

ok...have sent you a mail.

Reply
Jobsplanet
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?

Reply
drraman
July 27, 2010 at 7:27 AM

The script was blocked. now new script location added.

Reply
Jobsplanet
July 27, 2010 at 9:21 AM

@drraman Thanks sir

Reply
Sheithin
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?

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

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

Reply
drraman
August 7, 2010 at 6:43 AM

Send your template to
gabbar1113@gmail.com

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

Reply
singachu
August 25, 2010 at 2:49 PM

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

thanks,
singachu

Reply
Tom Parkin
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.

Reply
drraman
October 26, 2010 at 12:24 AM

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

Reply
Tom Parkin
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.

Reply
drraman
October 27, 2010 at 11:13 PM

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

Reply
ADOOBOO!
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!

Reply
drraman
November 15, 2010 at 11:00 PM

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

Reply
ADOOBOO!
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

Reply
ADOOBOO!
November 16, 2010 at 12:12 AM

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

Reply
VINU
November 17, 2010 at 6:13 AM

thank you so much

Reply
Idea Factory123
January 21, 2011 at 8:40 PM

thank you so much

Reply
The Reviewer
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.

Reply
drraman
February 27, 2011 at 1:34 AM

Hi

Look for the

font-weight: 700;

and change the value.

Reply
Brad Fallon
February 28, 2011 at 9:30 AM

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

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

Reply
trendy
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?

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

Reply
trendy
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?

Reply
drraman
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/

Reply
Kavs
April 7, 2011 at 3:47 PM

How to increase the size of the number showing.

Reply
drraman
April 7, 2011 at 8:11 PM

@ Kavs

Please explain more...

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

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

Reply
kavs
April 14, 2011 at 10:56 AM

Awesome it worked perfectly, thanks bro..

Reply
Atap baja ringan
May 30, 2011 at 10:21 AM

Thank you very much

Reply
kabiyal
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/

Reply
DrRaman
August 5, 2011 at 12:22 AM

Hi kabiyal

I am not getting you. Can you describe further.

Reply
jarwanf
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

Reply
Cool SMS
September 5, 2011 at 11:43 PM

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

Reply
Bulake
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!!!!

Reply
Bulake
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!!

Reply
Mukesh
September 24, 2011 at 7:35 PM

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

htttp://www.getsoft.blogspot.com

Reply
Anonymous
October 5, 2011 at 12:04 AM

how to set only 4 post in one page

Reply
DrRaman
October 6, 2011 at 12:17 AM

Find and change the value here

var postperpage=7;

Reply
jarwanf
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????

Reply
DrRaman
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/

Reply
Dude
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!

Reply
DrRaman
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=

Reply
Admin
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

Reply
Admin
November 4, 2011 at 3:16 PM

thanks dude thanks a lot

Reply
DrRaman
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=

Reply
The Curly Fit Chic
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!

Reply
Raman Shingade
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.

Reply
The Curly Fit Chic
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.

Reply
Raman Shingade
December 24, 2011 at 12:03 AM

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

Reply
WTF Tube
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 :)

Reply
Raman Shingade
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)

Reply
ZaaRz
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!

Reply
Raman Shingade
January 2, 2012 at 12:01 AM

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

Reply
ZaaRz
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. =)

Reply
DrRaman
January 2, 2012 at 6:02 AM

@ZaaRz
In your template

Newer Post Older Post Home

links are missing.

Reply
ZaaRz
January 2, 2012 at 6:07 AM

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

Reply
DrRaman
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

Reply
mensajes claro
March 1, 2012 at 11:44 AM

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

Reply
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