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

How to add unlimited page navigation widget in Blogger site? Number page navigation for over 5000 Blog posts for Google Blogger template.

Responsive Number Page Navigation Widget for unlimited 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.

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 color on it. Sounds great! Isn’t it? Please below the Live Demo in Gif format. Let’s proceed to the widget installation tutorial.

number page navigation demo

Step #1: Go to “” and Sign in to your account

Step #2: From “Blogger Dashboard” click on ->Template ->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 */
#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}
.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;}
@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}}

Please alter #FB9543 color code to change the Number page navigation color. You can get unlimited color code from here. Better to choose color that match with your Blogger template.

<b:if cond='data:blog.pageType == &quot;index&quot;'>
<script type='text/javascript'>
var postperpage=6;
var numshowpage=3;
var upPageWord ='< Prev';
  var downPageWord ='Next >';
var bspagenavi=location.href;
var home_page="/";
<script type='text/javascript'>
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();

Please alter var postperpage=6; for displaying 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 bye below code block.

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

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

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

Responsive Number Page Navigation Widget for Over 10,000 Blog Posts.
Responsive Number Page Navigation Widget for Unlimited Blog Posts
If you face any trouble then please feel free to leave a comment below. I will try to solve the issue. 
Responsive Number Page Navigation Widget for Over 10,000 Blog Posts
4 Stars stars - "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 ...

Post a Comment

Hello Rabbi Brother,
I want to know that, in this post you used a code area , horizontal scroll area. to shown the code, can i create like this in my template ? my blog -

Hi Deepak.. This will display automatically. If horizontal line of code snippet is long enough then horizontal scrollbar will visible. Better to use Prism highlighter from below URL.

Very good tutorial, worked perfectly on my blog with your template ( ), even though little more than 30 posts published so far!

Congratulations for the site, I'm always following the news!

Hug and success!!

* Sorry for my English, I'm from Brazil...

Hi Sandro
Como você está Amigo? Thanks for using my Template and this is really good to see that you have successfully install number page navigation in your template. However the previous Number page navigation support over 3000 Blog posts. boa sorte.:sp

but not working with the search

Hi In4sser,
If your Blogger template already containing another number page navigation widget script then first remove it. After that use the above widget code. I hope it will work now. ^_^

i did, and this one is working, but not in the search

in the search
it show only, Older - Home

In search result page it will this widget may not work in your blog. Even in my Blog number page navigation doesn't work in search result page. :(

thank you so much...its 100% working on my blog

Facebook Group Community Disqus Channel Code ConverterHide Code Converter Show EmoticonHide Emoticon

Got questions? Ask ’em below! While we’re here, you might like to give any feedback about this Post, Your comment inspire us to continuous Improvement of This Blog and Contents. Your words are your own, so be nice and helpful if you can. Please, only use your REAL NAME, not your business name or keywords. Using business name or keywords instead of your real name will lead to the comment being deleted. Anonymous commenting is not allowed either. Limit the amount of links submitted in your comment. We accept clean XHTML in comments, but don't overdo it please.

Make sure you tick the Notify Me box below the comment form to be notified of follow up comments and replies. Thank you for commenting

Contact Form


Email *

Message *