Pagination in Blogger

Pagination or Page Navigation as it is called is not inbuilt into Blogger, but can be achieved with a simple hack. The main motive behind it is to make your Blog look more organized and make navigation easy for your visitors. Its simple and easy to integrate and styling can be changed as per your wish.


How To implement it into your Blog :
1. Login to Blogger Dashboard and navigate to Template > Edit HTML
2. Find this (Using CTRL +F) ]]></b:skin>
3. Copy the following code just Above it. (See How to Copy Code Easily)

.blog-pager,#blog-pager{font-family:"Times New Roman", Times, serif;font-weight:normal;font-size:12px;width:700px;padding:17px;} 
.showpageNum a,.showpage a {background:#069; color:#FFF; margin-right:.6em;text-decoration:none;font-size:15px;font-style:italic;line-height:0;text-align:center;padding:12px 18px 12px;-moz-border-radius:36px;-webkit-border-radius:36px;border-radius:36px;} 
.showpageNum a:hover,.showpage a:hover {background:orange; color:#FFF; margin-right:.6em;text-decoration:none;font-size:15px;font-style:italic;line-height:0;text-align:center;padding:12px 18px 12px;-moz-border-radius:36px;-webkit-border-radius:36px;border-radius:36px;}
.showpageOf{margin:0 8px 0 0;font-family:'Coming Soon', cursive;text-decoration:none;font-size:100%;}
.showpagePoint {background:orange; color:#FFF; margin-right:.6em;text-decoration:none;font-size:15px;font-style:italic;line-height:0;text-align:center;padding:12px 18px 12px;-moz-border-radius:36px;-webkit-border-radius:36px;border-radius:36px;}
\
4. Now paste the following code just Above the </body> tag (Search Using CTRL+F)


<script type='text/javascript'>;
var home_page=&#39;/&#39;;
var urlactivepage=location.href;
var postperpage=4;
var numshowpage=4;
var upPageWord =&#39;Prev&#39;;
var downPageWord =&#39;Next&#39;;
</script>
<script type='text/javascript'>
//<![CDATA[
eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('6 I;6 i;6 f;6 n;1f();C 1g(15){6 5=\'\';J=K(N/2);4(J==N-J){N=J*2+1}A=f-J;4(A<1)A=1;d=K(15/j)+1;4(d-1==15/j)d=d-1;D=A+N-1;4(D>d)D=d;5+="<3 7=\'1A\'>1B "+f+\' 1C \'+d+"</3>";6 16=K(f)-1;4(f>1){4(f==2){4(i=="o"){5+=\'<3 7="1D"><a 9="\'+B+\'">\'+O+\'</a></3>\'}b{5+=\'<3 7="g"><a 9="/r/s/\'+n+\'?&c-k=\'+j+\'">\'+O+\'</a></3>\'}}b{4(i=="o"){5+=\'<3 7="g"><a 9="#" v="L(\'+16+\');w x">\'+O+\'</a></3>\'}b{5+=\'<3 7="g"><a 9="#" v="M(\'+16+\');w x">\'+O+\'</a></3>\'}}}4(A>1){4(i=="o"){5+=\'<3 7="g"><a 9="\'+B+\'">1</a></3>\'}b{5+=\'<3 7="g"><a 9="/r/s/\'+n+\'?&c-k=\'+j+\'">1</a></3>\'}}4(A>2){5+=\' ...    \'}1h(6 l=A;l<=D;l++){4(f==l){5+=\'<3 7="1E">\'+l+\'</3>\'}b 4(l==1){4(i=="o"){5+=\'<3 7="g"><a 9="\'+B+\'">1</a></3>\'}b{5+=\'<3 7="g"><a 9="/r/s/\'+n+\'?&c-k=\'+j+\'">1</a></3>\'}}b{4(i=="o"){5+=\'<3 7="g"><a 9="#" v="L(\'+l+\');w x">\'+l+\'</a></3>\'}b{5+=\'<3 7="g"><a 9="#" v="M(\'+l+\');w x">\'+l+\'</a></3>\'}}}4(D<d-1){5+=\' ...  \'}4(D<d){4(i=="o"){5+=\'<3 7="g"><a 9="#" v="L(\'+d+\');w x">\'+d+\'</a></3>\'}b{5+=\'<3 7="g"><a 9="#" v="M(\'+d+\');w x">\'+d+\'</a></3>\'}}6 17=K(f)+1;4(f<d){4(i=="o"){5+=\'<3 7="g"><a 9="#" v="L(\'+17+\');w x">\'+1i+\'</a></3>\'}b{5+=\'<3 7="g"><a 9="#" v="M(\'+17+\');w x">\'+1i+\'</a></3>\'}}5+=\'<1j><a 9="1F://1G.1H-1k.1I" 1J="1K-1L: 1M; 1N: 1O; 1P: 1Q;" 1R="1S">1T 1U 1V-1k</a></1j>\';6 E=y.1W("E");6 18=y.1X("1Y-1Z");1h(6 p=0;p<E.P;p++){E[p].1l=5}4(E&&E.P>0){5=\'\'}4(18){18.1l=5}}C 1a(Q){6 R=Q.R;6 1m=K(R.21$22.$t,10);1g(1m)}C 1f(){6 h=u;4(h.e("/r/s/")!=-1){4(h.e("?S-c")!=-1){n=h.F(h.e("/r/s/")+14,h.e("?S-c"))}b{n=h.F(h.e("/r/s/")+14,h.e("?&c"))}}4(h.e("?q=")==-1&&h.e(".5")==-1){4(h.e("/r/s/")==-1){i="o";4(u.e("#G=")!=-1){f=u.F(u.e("#G=")+8,u.P)}b{f=1}y.1n("<m T=\\""+B+"U/V/W?c-k=1&X=Y-Z-m&11=1a\\"><\\/m>")}b{i="s";4(h.e("&c-k=")==-1){j=20}4(u.e("#G=")!=-1){f=u.F(u.e("#G=")+8,u.P)}b{f=1}y.1n(\'<m T="\'+B+\'U/V/W/-/\'+n+\'?X=Y-Z-m&11=1a&c-k=1" ><\\/m>\')}}}C L(H){12=(H-1)*j;I=H;6 13=y.1o(\'1p\')[0];6 z=y.1q(\'m\');z.1r=\'1s/1t\';z.1u("T",B+"U/V/W?1v-1w="+12+"&c-k=1&X=Y-Z-m&11=1b");13.1x(z)}C M(H){12=(H-1)*j;I=H;6 13=y.1o(\'1p\')[0];6 z=y.1q(\'m\');z.1r=\'1s/1t\';z.1u("T",B+"U/V/W/-/"+n+"?1v-1w="+12+"&c-k=1&X=Y-Z-m&11=1b");13.1x(z)}C 1b(Q){1c=Q.R.24[0];6 1y=1c.1z.$t.F(0,19)+1c.1z.$t.F(23,25);6 1d=26(1y);4(i=="o"){6 1e="/r?S-c="+1d+"&c-k="+j+"#G="+I}b{6 1e="/r/s/"+n+"?S-c="+1d+"&c-k="+j+"#G="+I}27.9=1e}',62,132,'|||span|if|html|var|class||href||else|max|maksimal|indexOf|nomerhal|showpageNum|thisUrl|jenis|postperpage|results|jj|script|lblname1|page|||search|label||urlactivepage|onclick|return|false|document|newInclude|mulai|home_page|function|akhir|pageArea|substring|PageNo|numberpage|nopage|nomerkiri|parseInt|redirectpage|redirectlabel|numshowpage|upPageWord|length|root|feed|updated|src|feeds|posts|summary|alt|json|in||callback|jsonstart|nBody||banyakdata|prevnomer|nextnomer|blogPager||hitungtotaldata|finddatepost|post|timestamp|alamat|halamanblogger|loophalaman|for|downPageWord|div||innerHTML|totaldata|write|getElementsByTagName|head|createElement|type|text|javascript|setAttribute|start|index|appendChild|timestamp1|published|showpageOf|Page|of|showpage|showpagePoint|http||||style|font|size|0pt|float|right|margin|0px||||||getElementsByName|getElementById|blog|pager||openSearch|totalResults||entry|29|encodeURIComponent|location'.split('|'),0,{}))
//]]>
</script>



Some basic options:

postperpage : Number of Post that will appear on a Page

numshowpage : Number of Pages that will appear in the Page Navigation Menu

upPageword : Word or phrase that will appear in the Forward Link

downpageWord : Word or phrase that will appear in the Backward Link

Note: Make sure that the "postperpage" value and "Number of posts on main page" value (Present in the Design > Page Elements > Blog Post) is same

Note: You will observe that ,after applying it ,there are some problems while accessing the Labels using the Default Labels widget. To rectify, Tick on the "Expand Widget Templates" and search for

'data:label.url'

Replace It with:

'data:label.url + "?&amp;max-results=4"'

Make sure the Number is same as the value of "postperpage" value

6. Click on "Save Template" and you are ready to rumble

Having Problems ? , feel free to ask


Written by Prayag Verma

Find me on Twitter

Email Newsletter

Like what you read here in this post ?
Get new posts delivered straight to your inbox

Post a Comment

Are you talking about pagination in the main page? just like clicking the " Older posts" link at the bottom? Some templates have built in feature like that.

@Chad Guzman
Yes I am talking about Replacing "Older Posts" with this Pagination hack.

Chad Guzman said...

@Prayag Verma - Thanks for the tutorial. I thought you're talking about doing pagination in blogger posts itself. I want to do that especially when you have lengthy post.

Aleister said...

I agree Chad. I think I saw the pagination feature in posts in websites like Associated Content. And I also think that this requires coding skills just like the tutorial above.

Unknown said...

thank you for this tutorial .. it really helped .
but actually the result is not the same as appears in the preview u put .. it's smaller and with white and blue colors not blue and orange !
any idea how I can change to the exact appearance like in the preview ?
thnx

@أسامة سعد
In your template there is some conflicting CSS code present

In your template search for the term pages-numbers

and delete all code till a.more-link

Unknown said...

@Prayag Verma
thank you but it still doesn't work /:

@أسامة سعد
There is another CSS code present

In your template search for the term <div class='widget HTML' id='HTML9'>


and delete the ".show" something codes

Unknown said...

@Prayag Verma
well I know it's kinda mean but if u could just apply the changes in my template, I would really appreciate it .. I'm kinda new to the field .. but if u couldn't it's fine by me and I would still appreciate it
here is a link to download my template HTML .. it's in a text document
http://www.mediafire.com/?r0dghulr0i11xs0
thank u 4 every thing

@أسامة سعد
First try this , Download the template from MediaFire (the one you uploaded )

It should work

Unknown said...

@Prayag Verma
still nothing :(

@أسامة سعد

Here is the link of the modified template

http://www.mediafire.com/file/3058u9odx0dzzag/Template.txt

If the problems still persist then sought through the Gadgets of your Blog , and search for the similar css code (Like showpage something ) and delete it

If the problem is still there ,then have you heard of TeamViewer Software ?

Unknown said...

@Prayag Verma
nothing yet !
ya I have .. what about it ?

@أسامة سعد
Have you got a Widget/Gadget titled " إعلانات " , delete it

if the problem persist, mail me on prayag.verma@gmail.com so that we interchange the ID of TeamViewers,so that I can edit your blog easily

Unknown said...

@Prayag Verma
well, I want to thank u a lot for all ur help .. I managed to reclaim my old pagination which I had lost before passing through ur post .. I really appreciate it ..
I might need ur help in other posts in your awesome blog :)
thnx again

Unknown said...

@Prayag Verma
here I'm again :)
I couldn't resist the beauty of this style :)
well I managed to put it correctly but there's a very little problem .. u can see the frame of the numbers it appears blue and interrupted when u put the mouse on it when it should become all orange ..
any idea how to fix this ?

@أسامة سعد
Check Comment 6 again, the problem is again of conflicting CSS Code, do let me know if it worked or not

Unknown said...

@Prayag Verma

it finally works !!
thank u sooo much :)

@OkamiS
What specific problem are you facing , is the script not working or are you unable to get the styling in place (The blue cirlces). Your blog has declared jQuery 4 times as well it already has pagination hack ,therefore there might be some conflicting CSS

In your case, just find the CSS related to the pagination hack in your blog and replace it with this Posts CSS (Step 4). It should work fine

Matin said...

Thanks for Post, Very helping and its working good :)
Matin Shaikh
http://tecmachine.blogspot.com/

Admin said...

thanks


http://ar-blog-baby.blogspot.com/

Why my old pagination still show up?

Sorry Prayang... I think this pagination not work but i don't see the example first. Sorry Prayang ^_^

@Danialde4
The example is on the Home page of this blog, I see that you have implemented it successfully in your blog now.

Anonymous said...

@Prayang
Thanks ^_^

Anonymous said...

@Prayag VermaThanks

The pagination shows up at main page
but not, if accessed with labels

i have custom navigation with labels:
http://incegha.blogspot.com/search/label/Tutorial?max-results=4

can you tell me how to fix that? thank you :)

Vicky said...

VERY NICE DEAR I AM USING IT AND I WANT TO 7 POST PER PAGE BUT IT STILL SHOWS 4 POST WHAT I NEED TO DO ANYWAYS KEEP IT UP I AM VERY THANKFULL TO YOU.
Check : http://mobilemillion.blogspot.com

@Vicky Just try setting the postperpage attribute to 7

Hi Prayag Verma,

I have tried this pagination code but it's not working for me. It's not showing anything. I think it's problem with my template. My previous template also not showing olderposts option.

Can you please correct my template? I will give full credits to you i.e. i will put your website link in my website.

See my website: www.allindiajobs.in

My e-mail: janardanraju@gmail.com

Please send me your e-mail id... So that i can send you my template.

Please help me. Thanks.!!

I checked your blog , this is happening due to a CSS code , just add the following CSS to your blog

.post-footer, #blog-pager-newer-link, #blog-pager-older-link, #blog-pager, {display:block !important;}

Then try out this tutorial , it will work fine

I have added the css code but still it's not displaying pagination.Atleast it's not showing "Olderposts" option in my home page. If you can click on any one post then from there it's showing "older: and "newer" posts.

I'm not sure what went wrong... It's completely a problem with my template, So if you can send your mail id to above mentioned e-mail. I will send u template...

Thanks....

My mistake in the above code I put a comma extra ,just put the following CSS code in your blog and it will work


.post-footer, #blog-pager-newer-link, #blog-pager-older-link, #blog-pager {display:block !important;}

The pagination shows up at main page
http://incegha.blogspot.com

but i have custom (categories) which i created using labels and the pagination didn't show up
http://incegha.blogspot.com/search/label/Tutorial?max-results=4

can you tell me how to fix that? thank you :)

The pagination is visible at the following URL http://incegha.blogspot.in/search/label/Curhat%20dan%20Cinta?&max-results=4

The only difference is a & after the ? in the max result thing

Instead of ?max-results=4 use ?&max-results=4

oh thank you very much Prayag
Such a lifesaver :)

I am happy that it helped out

angco.co said...

I do not know why, my blog does not show any pagination image.

Please help me!!

http://24hplus.blogspot.com/

angco.co said...

I mean it does not show the background.

Please help me!

After the CSS of the pagination ,you have included a DIV element and a SCRIPT tag inside the style tags. Thats not allowed ,remove that from there and then test again...

NK said...

Works like a charm. Have added it to my blog.

Unknown said...

Thanku very... for ur posting of pagination.... how to implement in inner pages..

Unknown said...

Thank you very much.....

Check out this post for making Pages inside posts

cs said...

Congrats, of all the cheap pagination navigation codes out their for blogger this one works perfectly, I customized it significantly, but yours was the best, THANKS!

Premium420 said...

i have problem can you help me please?

Yes why not, just provide a URL where you implemented it and I will be glad to help out

Thanks, I am glad it worked for your blog

Quite heavy, considering the fact that Google has highly prioritized page speed as a ranking factor. That's what I think!

Google takes into account 200+ signal for ranking a website, in which Page Speed has a somewhat higher priority but Pagination has its own benefits. The major one being more organized feel and bit easiness in accessing older posts.

The final decision is with you as its a hack in itself and the URL are not pretty memorable for Pages (like /page-2 or similar)

Droidwd said...

its working very well.. even i made it smaller :) thank you .

Sagar said...

What are the pages showed by the pagination widget called? For e.g. Page 1. Are they static pages or something else? Can I target those pages with conditional tags?

They are part of Index page type ,called the Search Page Type. Here is the conditional tag to target them

<b:if cond='data:blog.pageType == "index"'>
<b:if cond='data:blog.searchQuery'>
<!--Search Page-->
</b:if>
</b:if>

As you might have observed their URL is of type /search , its not really easy to target these pages but you can try and feel free to share your findings

Nick said...

It is necessary to replace your link with my blog address?
http://stylifyyourblog1.googlecode.com/svn/trunk/pagination.js

No , This is the JavaScript file which contains the code, you don't have to replace it

Manish said...

not working correctly it is showing navigation but navigation is not right please check http://ghjgh12.blogspot.com

Just add the Following CSS

.showpageNum a, .showpage a
{
color: white !important;
text-decoration: none !important;
}

bennix said...

I am looking for the simplier squared one...

Triyono said...

i luv this

Chetan said...

I was searching on the internet, and finally i have got it over here...thanks a lot

Unknown said...

Very Cool. Thanks

i need pagination for mobile view when i click the page 2 and soon it turns to desktop view while i using a mobile phone we are not comfortable with it

It is possible . See if your on Page No.2 , then just add &m=1 at the end of the URL. This will do the job manually. If you add this into the code itself then there will be problem that even desktop users will be redirected to the Mobile site when they click on the page No.

Working great on my blog! Thanks for this page navigation widget Prayag!
- www.way2all.in

Qamar said...

Great very helping article for all bloggers who are seriously customize their blogs

Unknown said...

It's working on my blog like a charm. But, it's kinda large. How to make it smaller?

Add the following CSS

.showpageNum a,.showpage a{color:black;margin-right:.6em;text-decoration:none;font-size:15px ;font-style:italic;line-height:0;text-align:center;padding:12px 18px 12px !important;}.showpageNum a:hover,.showpage a:hover{margin-right:.6em;text-decoration:none;font-size:15px;font-style:italic;line-height:0;text-align:center;padding:12px 18px 12px;-moz-border-radius:0px;-webkit-border-radius:0px;border-radius:0px;}.showpageOf{margin:0 8px 0 0;font-family:'Arial', cursive;text-decoration:none;font-size:100%;}.showpagePoint{background:orange;color:#FFF;margin-right:.6em;text-decoration:none;font-size:15px;font-style:italic;line-height:0;text-align:center;padding:12px 18px 12px;-moz-border-radius:0px;-webkit-border-radius:0px;border-radius:0px;}

@Prayag Verma
Thanks a lot! I accidentally deleted my blog pager css. Now it's back to normal and the home button is now at the center. :))

I was looking for this

".post-footer, #blog-pager-newer-link, #blog-pager-older-link, #blog-pager, {display:block !important;}"

how i make like this on my single long post?

I have a post about creating pages in a single post itself , check it here http://www.stylifyyourblog.com/2011/11/making-pages-inside-blogger-posts.html

ODARA said...

Hi I was able to get the code to work but it only shows on the main page. I also changed the 'data:label.url' instance like you suggested but it's still not showing correctly on labels or post pages. How do I correct it? Here's my blog http://www.gimmethatglow.com/

adenorah said...

I don't find this : 'data:label.url' also with ctrl F and with Ticking on the "Expand Widget Templates"... can you help me ? thx

davide said...

how can I create pagination on archives? This method doesn't work.

AdmiratorK said...

hi
not work for mee (is hidden)
data:label.url + "?&max-results=5"
please help me
my blog: http://admiratork.blogspot.com

Hello... good hack, wich worked fine on one of my blogs, and... not on another !
o_O It worked few days, and not anymore.
I tried out all of your advices on the above comments...

http://graindeselsxm.blogspot.fr

I've been on it for two days...

Wolf said...

Hi Prayag..thanks for the wonderful trick..the code is working fine..but there's some problem in the design..in my blog the pagination is showing like this..can u tell me what changes to make in code to look exactly the same way as it is shown here..
See here for more -> http://zhost.tk/u/rx/pagination.png

Admin said...

Not Working in labels page http://punjabicommentswall.blogspot.com/

Rabbi said...

Hi your pagination is awesome. But i am facing some problem..In my site it is working well but right side of pagination is not visible. tell me how to align in left or center??? Oh I am using 3 column blogger templates..

Rabbi Khan said...

only your pagination is work like Abu-farhan's pagination. can u visit my site & see how to solve the problem..http://www.vidzpro.com/...I m using Minima base templates. plz reply me soon...

hey, i used this code, but next is not framing in my template.

Have a look at it : http://www.hotpricebuy.com

Hi, i was using this code since 6 months and it works perfectly but few days back it stopped working , Please fix it

selaludiam said...

how do set align on left?
cause in my blog, blog-pager is overlapping on wrapfullpost

var numshowpage=4;

result 5
if i change value it, result be same before

thanks

Unknown said...

Not Working for me..actual style is not appearing.. only page numbers are appearing without any style..and not working with labels...

i will thankful to you if you can help me..

Address: http://www.digitechpc.com/

Unknown said...

Admin u r genius yar.......really it helped alot......thanks buddy....actually i was worried about pagination problem in my other pages rather than main....which is done by your pose

10/10 for your this post

now look of my blog is very good happy with it
http://studyhaxer.blogspot.com

Unknown said...

It worked for me.. thank you so much.. im a newbie blogger and find your blog really helpful..

http://guidetoselfhelp101.blogspot.com/

Unknown said...

Hi, thanks for this pagination code. It is great. But in my static pages like contact-us, about-us, still there is a default Home link in the bottom of my page. I want to remove it..or it should be in the style of pagination font in other post pages.

Check here- www.jugaaduengineers.com

hey thanks for the post ... i am having a specific trouble the pagination is working for all pages expect the labels searched pages ... even the archive blog home page pagination is working but when i go t labels its not working at all can you tell me how to fix it ????

Unknown said...

you clever boy.....

Unknown said...

hi dear, it don't work my blog please see my site http://hdscree.blogspot.com

JelBee said...

How about in search label page? Can we change the pagination?


Thank You
JelBee

Anonymous said...

your amazing. I have tried over 50 of these navigation widgets and yours is the only one that worked. You even keep up with issues that come up in the future as did with Google and the original code you posted. Other bloggers never update issues or fix older posts. 10 out of 10 man

Anonymous said...

Why does this numbered pagination get replaced by old "older post" and Newer post" when that page has a comment form visible? If the page has no comment form then the pagination is visible. why does it disappear??? Thanks

deepak said...

Now I am thinking to apply pagination in my blog. Thanks for sharing such a useful post.

Is there any alternatives if the blog is private?
I did some tests and it only seems to work when its on public.