Page Navigation Hack for Blogger (Blogspot)

Most of the people think that page navigation hack is only for who blogs at WordPress. But here is the hack for those who use blogger and want to add page navigation to their blog. This hack will show page number instead of text link older posts, as shown in following screenshot.

You can see live demo here.

Now this involves two things – adding some CSS code and javascript code to your template. All steps are explained below.


  • Log in to your blogger account and navigate to Layout section. Now go to the Edit HTML tab.
  • Search for line ]]></b:skin>
  • Add CSS in this file above that line.
  • Now search for this code or related in your template (no need to expand widgets)
<b:section class='main' id='main' showaddelement='yes'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/></b:section>


In javascript codes in this file, find line…

var pageCount =5;

The digit in red represents number of posts to be shown in single page. Change the digit to show as many pages you want.

var displayPageNum = 3;

Here the digit in red represents number of pages to be listed. Change the digit to list as many pages you want.

That’s it now we have added Page Navigation menu hack to our blog successfully

Your Comments are appreciated.. Β πŸ™‚

(Credits: Muhammed from RTW)

Related: 6 WordPress Plugins for Better Navigation and User Experience

[Editor Note: This is first post by Arjun Kumar on this blog. Arjun is just 16 year old and that make him youngest Devil in team DW. He is working hard on our new project OrkutBuddy, dedicated for orkut users.

If you like to write for Devils Workshop, please check this. Details about our revenue sharing programs are here.]


Maxpayne October 14, 2008

Hey really good hack thanks for the hack

Deepak October 14, 2008

@ Arjun:

Dude please change the colors of the Ads as recommended by our Devil…

Those colors really look very bad on this theme πŸ™

dev October 14, 2008

It worked like a charm!
DW should have more posts like these. Crisp, precise to the point & very easy to use!
And Arjun, Great Post! We look forward to more posts like this.

Abhishek October 15, 2008

Not working for me πŸ™

What may have went wrong?

Com Via March 13, 2011

Try this code. It works for me.

Use the CSS given above and then do this.

replace with

<script type=’text/javascript’>
var home_page="/";
var urlactivepage=location.href;
var postperpage=3;
var numshowpage=4;
var upPageWord =’Prev’;
var downPageWord =’Next’;
<script src=’’

Rohit October 15, 2008

it dint work for me friend….it does not show any parsing errors in the xml template but still….it does not work…donno why?…

arjunskumar47 October 15, 2008

@Maxpayne – Thanks..

arjunskumar47 October 15, 2008

@ Abhishek and @ Rohit

Some reason may be that the var pagecount=5; and the number of posts in main page of the blog which is to be edited in formatting tab in setting may be not the same..

just check that and reply back..

arjunskumar47 October 15, 2008


Changed the code..


Ciprian October 16, 2008

Incredible, dear friend. Excellent hack. It works just fine. Thank you.

Deepak October 16, 2008

Now it looks great πŸ™‚

arjunskumar47 October 16, 2008


Souras November 3, 2008

This is working fine. But not showing all the posts of labels. I m using this is Blogger. Is there any way to solve this problem.

Arjun November 3, 2008

@Souras – It will show. It should show.

Gilles November 6, 2008

Hello => 6 posts, 5 on the 1st page, you can’t see the posts on 2nd page : no post listed.
Any dea why ?
Thank you πŸ™‚

Rahul Bansal November 25, 2008

First sorry for late reply buddy as I was away on a long vacation… πŸ™
I checked your blog but could not get what you are talking about exactly.
Please let us know if you are still having problem. Also try to give more details.

Ryvius November 9, 2008

Tried this hack, and a similar one on blogger buster, and both make some posts vanish at the beginning of each new page…
Is there a bug somewhere?

arof November 22, 2008

thanks for the hack

Deepak Jain November 22, 2008

Welcome πŸ™‚

j0e November 29, 2008

This isnt working for me. Nothing appears. the blog post widget in page elements is set to show 5 blogs in a page. Any ideas??

Arjun S Kumar November 30, 2008


Did u install the script in correct place.?

j0e December 1, 2008

yes i did.. Just confirming.. Am i supposed to paste the 2nd javascript codes BEFORE or AFTER /b:section??? I did both..

Arjun S Kumar December 27, 2008

@j0e – Paste the JS file after

it is clearly mentioned in the post..

Avinash December 29, 2008

Not working on my site.Tried both methods

sundar March 28, 2009

not working yaar
no change in my blogspot

Bapun March 28, 2009

Nice one.

Rajesh Kumar May 9, 2009

great widget ……….
but it couldn’t working fine….
i installed this widget i think u r the real hacker of the code i found it on some other blogs those just modified css of this…
i like the above navigation style that’s why i use it….

” the problem is when i navigate to next or 2 page it navigates some far and it displays only some posts only ”

just check the below blog and use navigation to understand …..

Thanks in ADV

Sauravjit Singh June 6, 2009

Hi,nice hack but I wanna show this on my homepage too.While this hack works well from the second page the 1st page(homepage) still shows a small older post link.
How can I sort it out????

achuth June 11, 2009

iam getting a problem that when i press 2 nd page or other page links iam getting sorry no posts matching your search

O'Mama June 21, 2009

when shoosing a label with more than 20 posts, the rest of the earlier posts are not showing?

Any solution?

davut July 9, 2009

I maked page naviation for blogger in my blog.This is my blog :Sayfa NumaralandΔ±rma

ritesh July 18, 2009

can u please tell me how to get page navigation widget like yours i don’t like the one that you have posted in article i like your working page navigation….

haseeb August 10, 2009

hi its not working fine when click on 2nd page it goes to sixth page and it is creating problem why

Rizwan Ibrahim September 13, 2009

Sorry to Say friend!

But this isnt working on my blog!

Any Idea??

bhagirath September 17, 2009

its working but not for search pages. can you do it for search pages.

Mandar Salvi October 4, 2009

Thank you very much πŸ™‚ Working fine!

It would be better if you guys include navigation to search result also…

jagandeep October 12, 2009

it really works,great hack dude………keep it up i ll keep on checking ur site for updated hacks……..u rock….

sriram October 22, 2009

Super thanxxxxxxxx

bw35 December 1, 2009

Thanks so much for the great tutorial!
All works fine now!

Belajar SEO WordPress December 12, 2009

thanks a lot dude, now workin for my dummy.
cool, you rock πŸ˜€

Kiran Nayak December 13, 2009

Yes, man i hav done it
Thank u so much

gryphon14 December 17, 2009

hey buddy this is a great tutorial =D
i would like to ask ur permission to post this tutorial on my blog.
i’ll link it to ur page.
do send me an email if u give me that permission.

jegan December 19, 2009

Hey Buddy
Thanks -working fine πŸ™‚
Working link :

Arjun S Kumar December 19, 2009


You can always do that. But do refer links properly.. πŸ™‚

ilahiler January 20, 2010

Thanks working fine

alexander January 31, 2010

not working for me, i dont see numbers match the post that i desided to show in each page , just show all of them, besides, no next or numbers at the bottom of the page to go to next

Himal February 19, 2010

thanks buddy,work for me πŸ˜€

Sameer Khan March 11, 2010

I also changed the formating to 3 posts as in the JS.. but nothing happpened

paylastrfilm April 28, 2010

Thank u so much πŸ˜‰

QQ May 21, 2010

for more time i looking for this… thanks so much……

Gurinder August 18, 2010

my blog does not show page numbers under different labels… but working on homepage…what to do??

Taiju August 30, 2010

i have the same problem dude

TechDoz May 18, 2011

Now the problem has been eliminated

prashanth August 22, 2010

it is not working

Deepak August 25, 2010

man this one is sick i was finding it from so many days now i got it thanks devil workshop..!!

Taiju August 30, 2010

my blog does not show page numbers for different labels… but it is working on homepage effectively …and looks nice too what to do??
i think Gurinder also have the same problem
Plz help us
following are the pages
Home Page
Label Page

Suresh September 20, 2010

Thanks Nice Tips

Mimo October 20, 2010

Nice tip thnx
i have used on my blog

fuad November 7, 2010

thanks for yr information,I will try and learn to be hacker

Arshpreet December 30, 2010

HEy i install this page navigation in my blog

i have more than 1000 post but it shows limited posts only

now i have maxsearchresult 5 and it show only 101 or 100 pages only…………..

there is any solution

kent3stan February 20, 2011

its working …
here’s the proof

webinno April 22, 2011

Nice…but not working πŸ™

Nak May 15, 2011

i follow your code. but i still not do Navigation on my blog

deepika May 27, 2011

umm.. i had to ask if we can add the reply to individual comment type button used in here in blogspot blogs?

vicky July 3, 2012

i love it.thanks for the hack. πŸ™‚