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 consist features that allow all possible ways for visitor or users to move around your blog.

One of the key elements that will help you achieve this is a numbered pagination or page navigation.

By default Blogger blog does 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 on 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.
      <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 the 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 on 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 on 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).
        <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 on the index pages. It will be something like this (see the code and image).
        <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 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 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 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 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 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 section. Hope all information here helped your cause. Do share and subscribe.

      MoreBlogger /