Responsive Number Page Navigation Widget for Over 10,000 Blog Posts

Is your Blog containing more than 1,000 or 3,000 blog posts? 

Are you worried about your number page navigation?

Then don’t worries just use this awesome number page navigation widget. This number page navigation works like charms. If you have over 5000 or 10000 Blog posts, even then this number page navigation will work. Most of the number page navigation widget stops working when the Blog posts reaches over 500. 

As a result, Blog visitors are not able to visit older posts from your Blog and ultimately you are losing your Blog page views. So the solution is to use unlimited page navigation widget.

How to Add Numbered Page Navigation Widget on Blogger Theme?

The latest trend of any Blog design is responsiveness. So don’t worry this number page navigation widget is completely responsive. As well as you can add any colour to it. Sounds great! Isn’t it? 

Please below the Live Demo in Gif format. Let’s proceed to the widget installation tutorial.

Step #1: Go to “https://www.blogger.com” and Sign in to your account

Step #2: From “Blogger Dashboard” click on ->Theme ->Edit HTML 

Step #3: And locate the </body> section in your Blogger template

Step #4: After that copy following "CSS" and "JavaScript" code and paste it above/before </body> one by one.

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<style type='text/css'>
/* Page Navigation widget by http://www.bloggerspice.com */
#blog-pager{background:#fff;clear:both;width:auto;padding:22px;line-height:normal;position:relative;display:block;text-align:left;overflow:visible;margin:20px 0 5px 0}
.showpage a,.showpageNum a,.showpagePoint,.showpageOf{position:relative;background:#fff;display:inline-block;font-family:'Arial', Helvetica,font-size:15px;color:rgba(0,0,0,.8);padding:5px 8px;margin:0 4px 0 0;border: 1px solid #F1F1F1;transition:all .3s}
  .showpageOf{float:right;background:#FB9543;color:#fff;}
.showpageNum a:before{content:' ';position:absolute;top:0;bottom:0;left:0;right:0;box-shadow:inset 0 -2px 2px rgba(0,0,0,0.02);transition:box-shadow 0.5s}
.showpage a:hover,.showpageNum a:hover,.showpagePoint:hover{background:#FB9543;color:#FFFFFF;position:relative; border: 1px solid #FB9543;}
.showpagePoint{background:#FB9543;color:#fff;}
@media screen and (max-width:640px) {
#blog-pager {padding:12px;}
.showpage a,.showpageNum a,.showpagePoint,.showpageOf{margin:0 2px 2px 0;box-shadow:0 1px 2px 1px rgba(0,0,0,0.1);}}
@media screen and (max-width:320px) {
.showpage a,.showpageNum a,.showpagePoint,.showpageOf{padding:3px 6px}}
</style>
</b:if>
</b:if>

Please alter #FB9543 colour code to change the Number page navigation colour. You can get unlimited colour code from here. Better to choose a colour that matches your Blogger theme.

<b:if cond='data:blog.pageType == &quot;index&quot;'>
<script type='text/javascript'>
/*<![CDATA[*/
var postperpage=6;
var numshowpage=3;
var upPageWord ='< Prev';
  var downPageWord ='Next >';
var bspagenavi=location.href;
var home_page="/";
/*]]>*/
</script>
<script type='text/javascript'>
//<![CDATA[
function looppagenavi(a){var e=" ";numberleft=parseInt(numshowpage/2),numberleft==numshowpage-numberleft&&(numshowpage=2*numberleft+1),start=pagenumber-numberleft,start<1&&(start=1),maximum=parseInt(a/postperpage)+1,maximum-1==a/postperpage&&(maximum-=1),end=start+numshowpage-1,end>maximum&&(end=maximum),e+="<span class='showpageOf'>Page "+pagenumber+" of "+maximum+"</span>";var s=parseInt(pagenumber)-1;pagenumber>1&&(e+=2==pagenumber?"page"==type?'<span class="showpage"><a href="'+home_page+'">'+upPageWord+"</a></span>":'<span class="showpageNum"><a href="/search/label/'+lblname1+"?&max-results="+postperpage+'">'+upPageWord+"</a></span>":"page"==type?'<span class="showpageNum"><a href="#" onclick="redirectpage('+s+');return false">'+upPageWord+"</a></span>":'<span class="showpageNum"><a href="#" onclick="redirectlabel('+s+');return false">'+upPageWord+"</a></span>"),start>1&&(e+="page"==type?'<span class="showpageNum"><a href="'+home_page+'">1</a></span>':'<span class="showpageNum"><a href="/search/label/'+lblname1+"?&max-results="+postperpage+'">1</a></span>'),start>2&&(e+="...");for(var r=start;r<=end;r++)e+=pagenumber==r?'<span class="showpagePoint">'+r+"</span>":1==r?"page"==type?'<span class="showpageNum"><a href="'+home_page+'">1</a></span>':'<span class="showpageNum"><a href="/search/label/'+lblname1+"?&max-results="+postperpage+'">1</a></span>':"page"==type?'<span class="showpageNum"><a href="#" onclick="redirectpage('+r+');return false">'+r+"</a></span>":'<span class="showpageNum"><a href="#" onclick="redirectlabel('+r+');return false">'+r+"</a></span>";end<maximum-1&&(e+=""),end<maximum&&(e+="page"==type?'<span class="showpageNum"><a href="#" onclick="redirectpage('+maximum+');return false">'+maximum+"</a></span>":'<span class="showpageNum"><a href="#" onclick="redirectlabel('+maximum+');return false">'+maximum+"</a></span>");var n=parseInt(pagenumber)+1;pagenumber<maximum&&(e+="page"==type?'<span class="showpageNum"><a href="#" onclick="redirectpage('+n+');return false">'+downPageWord+"</a></span>":'<span class="showpageNum"><a href="#" onclick="redirectlabel('+n+');return false">'+downPageWord+"</a></span>");for(var t=document.getElementsByName("pageArea"),l=document.getElementById("blog-pager"),p=0;p<t.length;p++)t[p].innerHTML=e;t&&t.length>0&&(e=""),l&&(l.innerHTML=e)}function arithmetictotaldata(a){var e=a.feed,s=parseInt(e.openSearch$totalResults.$t,10);looppagenavi(s)}function pagenaviblogger(){var a=bspagenavi;-1!=a.indexOf("/search/label/")&&(lblname1=-1!=a.indexOf("?updated-max")?a.substring(a.indexOf("/search/label/")+14,a.indexOf("?updated-max")):a.substring(a.indexOf("/search/label/")+14,a.indexOf("?&max"))),-1==a.indexOf("?q=")&&-1==a.indexOf(".html")&&(-1==a.indexOf("/search/label/")?(type="page",pagenumber=-1!=bspagenavi.indexOf("#PageNo=")?bspagenavi.substring(bspagenavi.indexOf("#PageNo=")+8,bspagenavi.length):1,document.write('<script src="'+home_page+'feeds/posts/summary?max-results=1&alt=json-in-script&callback=arithmetictotaldata">')):(type="label",-1==a.indexOf("&max-results=")&&(postperpage=20),pagenumber=-1!=bspagenavi.indexOf("#PageNo=")?bspagenavi.substring(bspagenavi.indexOf("#PageNo=")+8,bspagenavi.length):1,document.write('<script src="'+home_page+"feeds/posts/summary/-/"+lblname1+'?alt=json-in-script&callback=arithmetictotaldata&max-results=1" >')))}function redirectpage(a){jsonstart=(a-1)*postperpage,nopage=a;var e=document.getElementsByTagName("head")[0],s=document.createElement("script");s.type="text/javascript",s.setAttribute("src",home_page+"feeds/posts/summary?start-index="+jsonstart+"&max-results=1&alt=json-in-script&callback=finddatepost"),e.appendChild(s)}function redirectlabel(a){jsonstart=(a-1)*postperpage,nopage=a;var e=document.getElementsByTagName("head")[0],s=document.createElement("script");s.type="text/javascript",s.setAttribute("src",home_page+"feeds/posts/summary/-/"+lblname1+"?start-index="+jsonstart+"&max-results=1&alt=json-in-script&callback=finddatepost"),e.appendChild(s)}function finddatepost(a){post=a.feed.entry[0];var e=post.published.$t.substring(0,19)+post.published.$t.substring(23,29),s=encodeURIComponent(e);if("page"==type)var r="/search?updated-max="+s+"&max-results="+postperpage+"#PageNo="+nopage;else var r="/search/label/"+lblname1+"?updated-max="+s+"&max-results="+postperpage+"#PageNo="+nopage;location.href=r}var nopage,type,pagenumber,lblname1;pagenaviblogger();
//]]>
</script>
</b:if>

Please alter var postperpage=6; for displaying the number of posts per page. And var numshowpage=3; code for displaying the number of page navigation to show off in homepage.

Step #5: Again Locate the below code snippet

<!-- navigation --> <b:include name='nextprev'/>

Step #6: Now replace the above code with the below code block.

<!-- navigation by www.bloggerspice.com -->
    <b:if cond='data:blog.pageType == &quot;index&quot;'>
        <b:include name='nextprev'/>
    <b:else/>
    <b:if cond='data:blog.pageType == &quot;archive&quot;'>
        <b:include name='nextprev'/>
    <b:else/>
        <b:if cond='data:blog.homepageUrl != data:blog.url'>
<!-- navigation -->
<b:include name='nextprev'/>
</b:if>
    </b:if>
    </b:if>

Step #7: Finally click the “Save theme” button from the top.

Troubleshoot (Optional Step)

If your number page navigation is not working then probably you need to add a jquery file for running the script. Please add the below jquery file before </head> 

  <script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> 

 And save your blogger theme. I hope Now it will work.

Great! You have done. Now check your Blogger template and see a responsive number page navigation widget that able to display over 10,000 posts.

If you face any trouble then please feel free to leave a comment below. I will try to solve the issue.