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

A self proclaimed Blogger Evangelist. He has been blogging for the past 4 years and likes to help people having problems with Blogger . Get more from Prayag on and Twitter

Email Newsletter

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

Post a Comment
Mervyn Lam said...

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

deepak said...

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

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

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

JelBee said...

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


Thank You
JelBee

hasan Zone said...

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

you clever boy.....

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

pleas help i am trying to add this into my website http://www.dieorhack.com but fail

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

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

http://guidetoselfhelp101.blogspot.com/

Hafiz Atta 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

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/

Gulab shah said...

its not showing on my site and i try some more but none of them showing i dont know why can u help me out plz waiting for ur answer thank u
this is my blog medialivecenter.com

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

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

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

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

Great widget.. Perfectly working on my website.
Have a look at it:
http://www.technodoze.com

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

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

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

Ryan Sinha 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

26 TaTchou said...

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

AdmiratorK said...

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

davide said...

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

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

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/

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

how i make like this on my single long post?

I was looking for this

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

@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. :))

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

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

Qamar said...

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

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

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.

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

Very Cool. Thanks

Chetan said...

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

i luv this

bennix said...

I am looking for the simplier squared one...

Just add the Following CSS

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

Manish said...

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

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

Nick said...

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

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

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?

Droidwd said...

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

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)

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

Thanks, I am glad it worked for your blog

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

Badboy said...

i have problem can you help me please?

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!

Check out this post for making Pages inside posts

Thank you very much.....

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

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

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

I mean it does not show the background.

Please help me!

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

Please help me!!

http://24hplus.blogspot.com/

I am happy that it helped out

oh thank you very much Prayag
Such a lifesaver :)

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

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 :)

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

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

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

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: [email protected]

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

Please help me. Thanks.!!

@Vicky Just try setting the postperpage attribute to 7

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

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 :)

Anonymous said...

@Prayag VermaThanks

Danialde4 said...

@Prayang
Thanks ^_^

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

Danialde4 said...

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

Danialde4 said...

Why my old pagination still show up?

admin said...

thanks


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

Matin said...

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

OkamiS said...

@Prayag Verma

Maybe its the script problem. The page number not appear. Even the old or newer post not appear.

@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

OkamiS said...

Doesnt work.. T_T
http://animefilez.blogspot.com/

@Prayag Verma

it finally works !!
thank u sooo much :)

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

@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 ?

@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

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

if the problem persist, mail me on [email protected] so that we interchange the ID of TeamViewers,so that I can edit your blog easily

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

@أسامة سعد

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 ?

@Prayag Verma
still nothing :(

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

It should work

@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

@أسامة سعد
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

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

@أسامة سعد
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

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

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.

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.

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

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.