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.

Comments: 58
data:blog.title
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 “https://www.blogger.com” 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 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 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'>
/*<![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 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: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 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. 

Speak Your Mind

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/

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

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...

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

amazing
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

Cool... Used this to replace the other I had in here Blogtrovert

Thanks for your feedback..:up

Hi Tas-bola, I am very glade to hear that you are using my widget. :sp

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?

Hi Krystel Yaacoub, Which template you are using? you can follow the the steps and delete the script from your current template. :t

you are amazing man...
i will never forget you for this awesome work..
it worked 100% for me
thank you so much bro...

Thanks Ankit for your inspiring feedback. :)

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.

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. :)

Hello, it worked without problems, but I would like to know how to extend the code to a tag search, thanks

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

I have 2

First..





Second





Which one to replace?

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.
^_^

I replace the first one and it work great on my site :-bd . Thanks for the help Mohammad :-d .

Hi Safruz Zamal, You are most Welcome.:)

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?

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. :)

Thanks. It's Beautiful for me

Welcome Davidson Brenner. I hope you would love this widget. :)

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/

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. :)

So i should buy this template ? for full

I suggest to buy this template, because you should pay for the designer's hard work. And for Paid you will get life time update, even any kinds of problem you can share with developer. He will solve as soon as possible.

But if you want free without any support then you will find tons of pirated website where this template is available for download.

Thank you. ^_^

I'm new with blogger , have any free template for look like my recent theme ? i really appreciate :)

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

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

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.
:)

It's not working when i click to one of my labels

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. :(

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

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

Thanks Rabbi for your valuable input , whats your thought about load more option instead. My blog is tikli.in and it has a grid layout. Please suggest me something that can be helpful. Currently my numbered is destroying the look. :(

Please suggest.

Hi Ashu
Infinity scroll means "LoadMore" option. And don't worry about this. If you see world's no. #1 brand site like Amazon, ebay and even top fashion blogger sites are using number page navigation.

nothing has destroyed. even many blogger don't use any numberpage navigation to get more pageviews, I just visited your site, it is looking great.

But you are using themexpose's free template, for this reason this template hasn't any "Next and Previous Post" navigation option. this is really bad for users. because they have to navigate in your homepage to visit another post. And ultimately you daily pageview will affect for this.

So I recommend to use premium version or change the template. :re

Thanks Rabbi

Thank You so Much. I love the way it looks and it works great.

Welcome Jason. Love to see you here. :)

working on my blog thanks bro
http://mehroz717.blogspot.com

Hi Mehroz Ali,
I am very glade to hear that. :)

Welcome Aufani. Thanks for dropping your comment here. :)

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/

Hi Game Advisor :(
Maybe this script conflict with your other script. Or FontAwesome is not supporting your Blogger theme.

Thank you work perfect

Welcome Bro :up

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

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.

Well probabiblity weren´t one my strong points anyways (at least lucky wise)...

The bad thing about this is that your code was the best up to know... all other sites I tried link their javascript to some random cloud with a dead link...

Thanks for the reply, até mais ver
mr. Poneis


Thank you Mr. Poneis for dropping your lovely feedback. :)

Facebook Group Community Code ConverterHide Code Converter Show EmoticonHide Emoticon

If you Got questions? Ask ’em below! While we’re here, you might like to leave a comment and let me know if you have any stories or questions.

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

Name

Email *

Message *