How to Add a Numbered Pagination in Blogger Blog

A visitor of your blog should be able to navigate through your site with ease. Your Blogger blog should consists features that allows all possible ways for visitor or users to move around you blog. One of the key elements that will help you achieve this is a numbered pagination or page navigation.

blogger numbered pagination

By default Blogger blog do not shows numbered pagination. Instead it shows “Older Posts” and “Newer Posts” buttons which will not suffice for a professional blog. What requires that a pagination that shows the numbered pages with older and newer post buttons.
The solution given here in this post is what a standard pagination should be for a Blogger blog. The features of this pagination solution are;

  • Allows you to customize the buttons.
  • Consists a “First” or “Home” button to go to the first set of results or posts.
  • Consists a “Last” button to go to the last set of results or posts.
  • Consists a “Next” and “Previous” buttons.
  • Shows the number of pages and which one you are viewing. (e.g.. Page 3 of 6)
  • You can set how many posts will be shown in every page.

Now let’s see how to properly add a numbered pagination in your Blogger Blog:

Implementing a Numbered Pagination in Blogger Blog

Follow the instructions below properly to add a numbered pagination in your blogger blog:

    1. Go to Blogger dashboard > Template > I recommend you to backup your template > click “Edit HTML“.
    2. Look for ]]></b:skin> and paste the following CSS code just before it.
      /* Blogger Pagination by TechInfoKnow.com */.pagenavi {clear: both;text-align: center;margin: 25px auto 15px;}
      .pagenavi span,.pagenavi a {margin: 0 5px 0 0;padding: 5px 10px 5px;text-decoration: none;color: #fff;background: #038D1A;-moz-border-radius: 2px;-khtml-border-radius: 2px;-webkit-border-radius: 2px;border-radius: 2px;-webkit-transition: all .3s ease-in;-moz-transition: all .3s ease-in;-o-transition: all .3s ease-in;transition: all .3s ease-in;}
      .pagenavi a,.pagenavi a:link,.pagenavi a:visited {color: #fff;}
      .pagenavi a:hover {color: #fff;text-decoration: none;background: #000;}
      .pagenavi .current {color: #fff;text-decoration: none;background: #000;}
      .pagenavi .pages, .pagenavi .current {font-weight: bold;}
      .pagenavi .pages {color: #fff;background: #038D1A;}

      You can also use a new <style> tag for this or paste the code in a existing <style> tag in your Blogger template.

      See Below for more styles and colors. If you want you can edit the style.

    3. In the template editor look for <b:section class='main' id='main' showaddelement='no'>. You will have to paste the code just after closing this by </b:section>.
    4. Copy the following code.
      <b:if cond='data:blog.pageType == &quot;index&quot;'>
      <!-- Pagination By TechInfoKnow.com -->
      <div class='pagenavi'><script async='async' type='text/javascript'>var pageNaviConf={perPage:5,numPages:3,firstText:&quot;First&quot;,lastText:&quot;Last&quot;,nextText:&quot;Next&quot;,prevText:&quot;Previous&quot;}</script><script async='async' type='text/javascript'>//<![CDATA[
      eval(function(p,a,c,k,e,r){e=function(c){return(c<62?'':e(parseInt(c/62)))+((c=c%62)>35?String.fromCharCode(c+29):c.toString(36))};if('0'.replace(0,e)==0){while(c--)r[e(c)]=k[c];k=[function(e){return r[e]||e}];e=function(){return'([3-9jprsu-zA-Z]|1\\w)'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('z r(o){5 m=D.7,l=m.6("/j/s/")!=-1,a=l?m.E(m.6("/j/s/")+14,m.F):"";a=a.6("?")!=-1?a.E(0,a.6("?")):a;5 g=l?"/j/s/"+a+"?G-8=":"/j?G-8=",k=o.H.I.F,e=J.ceil(k/3.u);4(e<=1){K}5 n=1,h=[""];l?h.A("/j/s/"+a+"?8-v="+3.u):h.A("/?8-v="+3.u);L(5 d=2;d<=e;d++){5 c=(d-1)*3.u-1,b=o.H.I[c].published.$t,f=b.x(0,19)+b.x(23,29);f=encodeURIComponent(f);4(m.6(f)!=-1){n=d}h.A(g+f+"&8-v="+3.u)}r.M(h,n,e)}r.M=z(f,e,a){5 d=J.floor((3.w-1)/2),g=3.w-1-d,c=e-d;4(c<=0){c=1}9=e+g;4((9-c)<3.w){9=c+3.w-1}4(9>a){9=a;c=a-3.w+1}4(c<=0){c=1}5 b=\'<y N="pages">Page \'+e+\' of \'+a+"</y> ";4(c>1){b+=\'<a 7="\'+f[1]+\'">\'+3.firstText+"</a>"}4(e>1){b+=\'<a 7="\'+f[e-1]+\'">\'+3.prevText+"</a>"}L(i=c;i<=9;++i){4(i==e){b+=\'<y N="current">\'+i+"</y>"}O{b+=\'<a 7="\'+f[i]+\'">\'+i+"</a>"}}4(e<a){b+=\'<a 7="\'+f[e+1]+\'">\'+3.nextText+"</a>"}4(9<a){b+=\'<a 7="\'+f[a]+\'">\'+3.lastText+"</a>"}B.C(b)};(z(){5 b=D.7;4(b.6("?q=")!=-1||b.6(".html")!=-1){K}5 d=b.6("/j/s/")+14;4(d!=13){5 c=b.6("?"),a=(c==-1)?b.x(d):b.x(d,c);B.C(\'<p P="Q/R" S="/T/U/V/-/\'+a+\'?W=X-Y-p&Z=r&8-v=10"><\\/p>\')}O{B.C(\'<p P="Q/R" S="/T/U/V?W=X-Y-p&Z=r&8-v=10"><\\/p>\')}})();',[],63,'|||pageNaviConf|if|var|indexOf|href|max|endPage||||||||||search||||||script||pageNavi|label||perPage|results|numPages|substring|span|function|push|document|write|location|substr|length|updated|feed|entry|Math|return|for|show|class|else|type|text|javascript|src|feeds|posts|summary|alt|json|in|callback|99999'.split('|'),0,{}))//]]></script><div class='clear'/></div>
      </b:if>
    5. Paste is just after closing <b:section class='main' id='main' showaddelement='no'> with </b:section>.For easily finding it in the Blogger template editor look for <b:section class='main' id='main' showaddelement='no'> and left-click on the line number in the left side of the template editor and you will see something like the below image. It will be like this see both the image and code example.
      blogger numbered pagination code

      <b:section class='main' id='main' showaddelement='no'>
      <b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>.....</b:widget>
      </b:section>
      <!-- paste pagination code -->
    6. Click “Save template“.

Now your Blogger blog is equipped with a numbered pagination.

Disabling “Older Posts” and “Newer Post” Buttons in Blogger

But job’s not done. Still you will see the “Older Posts” and “Newer Posts” buttons even after adding the pagination. In my opinion they are quite unnecessary after adding the pagination. So for disabling these buttons follow the instructions below;

    1. Again go to Blogger dashboard > Template > I recommend you to backup your template > click “Edit HTML“.
    2. This time look for <b:includable id='nextprev'>.
    3. Inside it look for <div class='blog-pager' id='blog-pager'>. All the codes inside it are for the “Home“, “Older Posts” and “Newer Posts“.Here can do two things.Completely disabling them; therefore “Home“, “Older Posts” and “Newer Posts” buttons will not show in any pages of the blog i.e.. post pages. This is recommended if you are using a custom solution for “Older Posts” / “Previous Post” and “Newer Posts” buttons. For this implement step-4, ignore step-5.Stop loading of it in the index pages so that “Home“, “Older Posts” and “Newer Posts” buttons will not load in the index pages but will load in the post pages. For this ignore step-4 go directly to step-5.
    4. Put the entire <div class='blog-pager' id='blog-pager'> inside a noscript tag. It will be something like this (see the code and image).
      blogger template numbered pagination code edit

      <b:includable id='nextprev'>
      <noscript>
      <div class='blog-pager' id='blog-pager'>...</div>
      </noscript>
      <div class='clear'/>
      </b:includable>
    5. Put the entire <div class='blog-pager' id='blog-pager'> inside a conditional tag which tells the blogger not to load this in the index pages. It will be something like this (see the code and image).
      blogger template edit code numbered pagination

      <b:includable id='nextprev'>
      <b:if cond='data:blog.pageType != "index"'>
      <div class='blog-pager' id='blog-pager'>...</div>
      </b:if>
      <div class='clear'/>
      </b:includable>
    6. Step-4 or step-5 which have you followed after implementing click “Save template”.

This will stop the unnecessary loading of “Older Posts” and “Newer Posts” buttons in the index pages. However this is optional and it will not block loading of the used pagination.

Stylish Numbered Pagination for Blogger Blog

Here are some pagination styles. Use one which matches with your template color(s). You can also customize them.

Style-1

blogger-pagination-style-1-green

/* Blogger Pagination by TechInfoKnow.com */.pagenavi {clear: both;text-align: center;margin: 25px auto 15px;}
.pagenavi span,.pagenavi a {margin: 0 5px 0 0;padding: 5px 10px 5px;text-decoration: none;color: #fff;background: #038D1A;-moz-border-radius: 2px;-khtml-border-radius: 2px;-webkit-border-radius: 2px;border-radius: 2px;-webkit-transition: all .3s ease-in;-moz-transition: all .3s ease-in;-o-transition: all .3s ease-in;transition: all .3s ease-in;}
.pagenavi a,.pagenavi a:link,.pagenavi a:visited {color: #fff;}
.pagenavi a:hover {color: #fff;text-decoration: none;background: #000;}
.pagenavi .current {color: #fff;text-decoration: none;background: #000;}
.pagenavi .pages, .pagenavi .current {font-weight: bold;}
.pagenavi .pages {color: #fff;background: #038D1A;}

Style-2

blogger-pagination-style-2-Red

/* Blogger Pagination by TechInfoKnow.com */.pagenavi {clear: both;text-align: center;margin: 25px auto 15px;}
.pagenavi span,.pagenavi a {margin: 0 5px 0 0;padding: 5px 10px 5px;text-decoration: none;color: #fff;background: #CF0101;-moz-border-radius: 2px;-khtml-border-radius: 2px;-webkit-border-radius: 2px;border-radius: 2px;-webkit-transition: all .3s ease-in;-moz-transition: all .3s ease-in;-o-transition: all .3s ease-in;transition: all .3s ease-in;}
.pagenavi a,.pagenavi a:link,.pagenavi a:visited {color: #fff;}
.pagenavi a:hover {color: #fff;text-decoration: none;background: #000;}
.pagenavi .current {color: #fff;text-decoration: none;background: #000;}
.pagenavi .pages, .pagenavi .current {font-weight: bold;}
.pagenavi .pages {color: #fff;background: #CF0101;}

Style-3

blogger-pagination-style-3-skyblue

/* Blogger Pagination by TechInfoKnow.com */.pagenavi {clear: both;text-align: center;margin: 25px auto 15px;}
.pagenavi span,.pagenavi a {margin: 0 5px 0 0;padding: 5px 10px 5px;text-decoration: none;color: #fff;background: #03ABCA;-moz-border-radius: 2px;-khtml-border-radius: 2px;-webkit-border-radius: 2px;border-radius: 2px;-webkit-transition: all .3s ease-in;-moz-transition: all .3s ease-in;-o-transition: all .3s ease-in;transition: all .3s ease-in;}
.pagenavi a,.pagenavi a:link,.pagenavi a:visited {color: #fff;}
.pagenavi a:hover {color: #fff;text-decoration: none;background: #000;}
.pagenavi .current {color: #fff;text-decoration: none;background: #000;}
.pagenavi .pages, .pagenavi .current {font-weight: bold;}
.pagenavi .pages {color: #fff;background: #03ABCA;}

Style-4

blogger-pagination-style-4-orangred

/* Blogger Pagination by TechInfoKnow.com */.pagenavi {clear: both;text-align: center;margin: 25px auto 15px;}
.pagenavi span,.pagenavi a {margin: 0 5px 0 0;padding: 5px 10px 5px;text-decoration: none;color: #fff;background: #FF4500;-moz-border-radius: 2px;-khtml-border-radius: 2px;-webkit-border-radius: 2px;border-radius: 2px;-webkit-transition: all .3s ease-in;-moz-transition: all .3s ease-in;-o-transition: all .3s ease-in;transition: all .3s ease-in;}
.pagenavi a,.pagenavi a:link,.pagenavi a:visited {color: #fff;}
.pagenavi a:hover {color: #fff;text-decoration: none;background: #000;}
.pagenavi .current {color: #fff;text-decoration: none;background: #000;}
.pagenavi .pages, .pagenavi .current {font-weight: bold;}
.pagenavi .pages {color: #fff;background: #FF4500;}

Style-5

blogger-pagination-style-5-darkgrey

/* Blogger Pagination by TechInfoKnow.com */.pagenavi {clear: both;text-align: center;margin: 25px auto 15px;}
.pagenavi span,.pagenavi a {margin: 0 5px 0 0;padding: 5px 10px 5px;text-decoration: none;color: #fff;background: #A9A9A9;-moz-border-radius: 2px;-khtml-border-radius: 2px;-webkit-border-radius: 2px;border-radius: 2px;-webkit-transition: all .3s ease-in;-moz-transition: all .3s ease-in;-o-transition: all .3s ease-in;transition: all .3s ease-in;}
.pagenavi a,.pagenavi a:link,.pagenavi a:visited {color: #fff;}
.pagenavi a:hover {color: #fff;text-decoration: none;background: #000;}
.pagenavi .current {color: #fff;text-decoration: none;background: #000;}
.pagenavi .pages, .pagenavi .current {font-weight: bold;}
.pagenavi .pages {color: #fff;background: #A9A9A9;}

Pick one which matched with your template color and style. Of course you can change and customize them in any way you want.

If you need help in implementing or customizing the pagination for Blogger but do not know how, then do put them forward using the comments scetion. Hope all information here helped your cause. Do share and subscribe.