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

100 Replies to “Pagination in Blogger”

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

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

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

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

  5. 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: http://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.!!

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

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

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

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

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

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

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

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

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

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

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

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

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

Leave a Reply

Your email address will not be published. Required fields are marked *