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

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

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.

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

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.


number page navigation demo


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.

You may like these posts

86 Comments

  1. Tech Admin
    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 - http://www.ankk.in/
    • BloggerSpice
      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.

      http://www.bloggerspice.com/2016/01/Installing-lightweight-robust-elegant-syntax-highlighting-widget-in-Blogger-template.html
  2. Sandro de Castro
    Very good tutorial, worked perfectly on my blog with your template ( http://opcaolinux.blogspot.com ), 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...
    • BloggerSpice
      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
  3. iN4sser
    amazing
    but not working with the search
    • BloggerSpice
      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. ^_^
  4. iN4sser
    in the search
    it show only, Older - Home
    • BloggerSpice
      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. :(
  5. tasboladotcom
    thank you so much...its 100% working on my blog
    • BloggerSpice
      Hi Tas-bola, I am very glade to hear that you are using my widget. :sp
  6. LifeHelm
    Cool... Used this to replace the other I had in here Blogtrovert
    • BloggerSpice
      Thanks for your feedback..:up
  7. KrystèL Yaacoub
    Hello. I already have another number page navigation widget script but I don't know how to remove it since I don't know how to code. Can you please help me removing it and adding your code?
    • BloggerSpice
      Hi Krystel Yaacoub, Which template you are using? you can follow the the steps and delete the script from your current template. :t
  8. Techredefining
    you are amazing man...
    i will never forget you for this awesome work..
    it worked 100% for me
    thank you so much bro...
    • BloggerSpice
      Thanks Ankit for your inspiring feedback. :)
  9. Zafar
    Thanks dear. But Please can you tell me how to make it smaller in size. Its too BIG in size both in pc and mobile version of site. Please Reply.
    • BloggerSpice
      Hi Zafar Ahmad,
      Simply use lower digit for For size from CSS script

      font-size:15px;

      if will decrease the font size. and to change border size just change the value of

      padding:5px 8px;

      now it will become smaller. :)
  10. Enoc
    Hello, it worked without problems, but I would like to know how to extend the code to a tag search, thanks
    • BloggerSpice
      Hi Enoc, If you limit the post number to display per label then this problem will solve. you can follow the tutorial from below-

      http://www.bloggerspice.com/2014/12/How-to-Set-The-Number-Of-Posts-display-On-blog-Labels-Pages.html

      :t
  11. Saffroel
    I have 2

    First..





    Second





    Which one to replace?
    • BloggerSpice
      Hi Safruz Zamal, Every template has only one script like below. If you have 2 that means that script comes from another Pagination widget.

      <b:include name='nextprev'/>

      So if possible then remove previous widget code and after that apply this widget script. If not possible then take a backup first and after that simply try the script with first one. If doesn't work then try with second one. I hope it will work.
      ^_^
  12. Swaranjeet Singh Nanda
    hello brother, unfortunately there isn't any sort of tag in my template, my homepage is designed in such a way that it only shows labels, on clicking on a label it shows list of posts with number navigation

    is there any way to show number widget on homepage under any label widget?
    • BloggerSpice
      Hi Swaran, Probably You are using news type template. In your template please can locate code like below

      .post-pagination{display:none}

      or

      #blog-pager{display:none}

      if you find any just remove the code then Blogger default page navigation will be visible. After that simply use this widget. I hope number page navigation will work.

      Thank you. :)
  13. Brenners
    Thanks. It's Beautiful for me
    • BloggerSpice
      Welcome Davidson Brenner. I hope you would love this widget. :)
  14. Unknown
    Help me please , I followed your tutorial but it not work on my template blogger
    i tried to replace load more post instead with navigation page but it seem not work
    Please check http://jongmerl24.blogspot.com/
    • BloggerSpice
      Hi TopFans, You are using a clone Blogger template and major script has encrypted, so it will be hard to apply new script for pagination. Original author of your template is MKR. Your template's original name is-

      "Rifqiy - Responsive Magazine/News Blogger Template by MKRdezign"

      If you use that template then you can easily add pagination, even you don't have to use this pagination, because that template has built-in both pagination and infinity load option.

      Thank you. :)
  15. Unknown
    I'm new with blogger , have any free template for look like my recent theme ? i really appreciate :)
    • BloggerSpice
      You can have a look on my designed template. first 4 templates are premium and rest of them are free. there are all together 31 Blogger template. Try to pick a responsive blogger template.


      http://www.bloggerspice.com/search/label/Blogger%20Template?&max-results=10

      Thank you. :up
  16. Unknown
    Thanks for your always reply my question :)
    Can i you one more question ?
    Is there any way to show post date and view count for example

    6 hours ago eye 5400

    like this post >> http://www.khmernews.info/archives/37245
    • BloggerSpice
      To do this you have to use 2 JavaScript. For 6 hours ago there are a JavaScript name "Time Ago" and for view you can use 'firebase'.

      But I didn't shared any tutorial for this. you can search through search engine. But if you use more JavaScript your site will become slow.
      :)
  17. abouhilalbadr
    It's not working when i click to one of my labels
    • BloggerSpice
      Hi Abouhilal Badr, I didn't test this widget in RTL version. Your template is an RTL version. Another thing you can do.. first add the all above script one by one and after adding then press "Save template" button. If you click save after adding each script then this widget may not work. :(
  18. Hi Rabbi, Thanks for this amazing post. I already have a numbered navigation on my template. I would like to remove that and replace with an infinite scroll with load more button. It would be great to see any help on this. I would appreciate, if you can share any of your post shares on the same :) Cheers
    • BloggerSpice
      Hi Ashu,
      Thanks for your request. If I get time then I will share. But honestly said infinity load is not SEO friendly. Google Web crawler often face obstacle to visit all of your post for infinity scroll.

      For getting more pageviews number page navigation is best. :up
  19. JJSantoro
    Thank You so Much. I love the way it looks and it works great.
    • BloggerSpice
      Welcome Jason. Love to see you here. :)
  20. Mehroz Ali
    working on my blog thanks bro
    http://mehroz717.blogspot.com
    • BloggerSpice
      Hi Mehroz Ali,
      I am very glade to hear that. :)
  21. Aufani Yukzanali
    Thank you..
    • BloggerSpice
      Welcome Aufani. Thanks for dropping your comment here. :)
  22. Unknown
    Hey, i followed the instructions but getting a blank rectangle instead of the page numbers.
    can you have a look? https://testalexblog.blogspot.co.il/
    • BloggerSpice
      Hi Game Advisor :(
      Maybe this script conflict with your other script. Or FontAwesome is not supporting your Blogger theme.
  23. shaikh iliyas
    Thank you work perfect
    • BloggerSpice
      Welcome Bro :up
  24. mr.Poneis
    Tried and it was working well until I discovered that the code doesn´t go well with blogger default archive gadget... In the main page it bugs the toggle function... although it works well with any other page...

    Até mais ver
    mr. Poneis
    • BloggerSpice
      Hi Mr. Poneis,
      Thanks for your feedback. This widget is compatible with 80% Blogger theme. But rest of 20% i can't give guarantee that it will work.
  25. Максимилиан Эдельман
    СПАСИБО!!!
    • BloggerSpice
      добро пожаловать :-bd
  26. This don't work in private mode! :(

    Thanks anyway!
  27. How can i get this to work in blogger private mode?

    Thank you in advance!
    • BloggerSpice
      I didn't find any problem in private mode. Can you explain what sort of problem are you facing? :t
  28. Wriddhi
    Ohw it's working fine. Thanks a lot for your efforts.
    • BloggerSpice
      Thanks for your feedback bro. :dn
  29. Sebutik Edutoys
    thank rabbi khan, with this article i have done fix my problem. before, the page navigation result is error when the button next is clicked. the result is not change, still display the same post. then i try this script, and ...voilaaa... error has been gone. thank you rabbi khan. keep posting :)
    • BloggerSpice
      Thank you SeButik, I am very glade to hear that. :up
  30. Unknown
    100% Working...
    Thank You so Much,
    Liked, Shared, Subscribed
    Regards
    • BloggerSpice
      Thank you :up
  31. Hello, I try your code and work, but don't work if I set "private blog", do you know what I have to do?
    Thanks for support
    • BloggerSpice
      Hi Giacomo :sd
      Unfortunately this widget won't work in private blog. Because this widget use Blog feed. So if you use Blog private then this widget won't get any support from Blogger feed and stop working.
  32. Mustafa Bulut
    Thannks, it worked.
    • BloggerSpice
      Hi Mustafa :)
      I am very glade to hear that.
  33. Kamsan2day
    My blog have some error, when I need 20 post by pagination, Page 1 is show 20 post, but pages 2 show only 17 posts, How can I fix it? Thank in advance Admin.
    • BloggerSpice
      Hi Kamsan2Day :re
      This is not a problem about Pagination. This is problem in Blogger Platform.

      When you write post in blogger then it automatically save the Blog post. And if your Internet connection speed to low or it can't save your blog post automatically while writing the post then this error occur.

      The solution is you have to take the faulty blog post in draft and check the Blog that everything is working fine or not.

      When you find the faulty article then you have to republish that blog post.
  34. Sir, I have a problem with my numbered page navigation that is limit only to no 17. I have google it to overcome the problem and try every numbered page navigation but non of it works. But fortunately yours have solved my problem. Now my pagenavi align drop down not left to right. why?
    • BloggerSpice
      Hi There :)
      You have to add a small css code like below. But i have to check your site.


      clear:both;


      Thank you
  35. SKLPL
    Hello!
    Is there any change to make it work under labels pages; If i choose label page, blog-pager loads older posts. When click Older post link suddenly the pagination activated. Is there a workaround for this;
    Thanks in advance.
    • BloggerSpice
      Hi There
      This script will work only on Blog pager not in label page. If you want then you can modify by yourself for further use.

      Thank you.
  36. hhhyt
    My labels are hidden. Only the links in certain categories are available in the menu. You can work Page Navigation on label pages by adding a small code to these specific links.


    THE CODE: ?&max-results=5(Number of 'postperpage' in Page Navigation settings)

    Before:
    Example

    After:
    Example


    Now Page Navigation is working perfectly. Always hide your labels. Just link to some. This makes your blog look more elegant.

    In the meantime, it is impossible for Page Navigation to work on the search results pages. Because we are unable to determine the number of posts to display in the search results. I think it's a limitation of Blogger.

    Thank you so much Khan for this amazing website! This site has helped me with many things.
    • BloggerSpice
      Thanks for your feedback. :sl
  37. i have added these codes correctly but widget doesn't look like yours and sent some screenshots of troubled widget to your fb and email.
  38. My blog is www.htmlfacil.net. I don't know whats wrong. I have another blog where it works fine. But in this one is not working. Please help me.
  39. Atik Bhairabi
    not work any page navigation on my blog. please see my blog end solve my problem.

    www.banglatips.ml
  40. ItsNotYouItsMeMedia
    Is this script still working? I installed and nothing. I also had a code similar to this but it just stopped working this past week. Hope to hear from you soon!
    • BloggerSpice
      Hi,
      Yes this is working. I think your theme doesn't have jquery file. However jquery file required for running this widget. I have added the 'Troubleshoot (Optional Step)'. So you can add jquery file in your theme.

      I have applied the code in Blogger Default theme 'Simply Simple'

      Before applying the Page Navigation widget

      https://1.bp.blogspot.com/-krn5g41nwJY/YGwkpJY9_TI/AAAAAAAAAcc/ihif4VaxQWIdHvEdDxg0DvlxgmDPCopTQCLcBGAsYHQ/s731/simple%2Bblogger%2Btheme%2Bnumber%2Bpage%2Bnavigation.JPG


      https://1.bp.blogspot.com/-s5q3gMeI0NE/YGwkpCfk3oI/AAAAAAAAAcY/g47FN11ykgM_2FrCcQtgswDfG-ssJw6iQCLcBGAsYHQ/s722/simple%2Bblogger%2Btheme.JPG
  1. To insert a code use <i rel="pre">code_here</i>
  2. To insert a quote use <b rel="quote">your_qoute</b>
  3. To insert a picture use <i rel="image">url_image_here</i>
Go Up