How to Add Unlimited Numbered Page Navigation for Blogger

Page Number Navigation Widget for Blogger

By default, only the last 7 posts are shown on the main page of the blog. To view older posts, we need to click on the “Previous” link at the bottom of the page. The other seven blog articles will be shown. Two more links will appear below, "Next" which show more recent posts, and “Home”. So, with the help of links, you can move around the main page back and forth and view seven posts at each step.



The default navigation is not very convenient. It does not allow to evaluate in which part of the main page there are viewed articles. It is impossible to remember where the viewing of the blog is completed, in order to return to the same place tomorrow.

It is generally recognized that navigation is more convenient when the page being viewed with messages has a number that is visible to the reader. In addition, the total number of pages is displayed.

The new numbered page navigation, unlike previous versions, has a lighter script. Another major advantage is that it is unlimited. Older versions display only 150 blog posts. The user can immediately go to the most recent (first) message with one click. You can put this numbered navigation on any Blogger theme, including Contempo Soho Emporio and Notable.

How do I add page numbers to my navigation page in Blogger

Now let's perform the task, replace the navigation with arrows to page numbers by setting new script. DEMO

Go to your dashboard - Theme - Edit HTML find there tag ]]></b:skin> and just above it paste this CSS code:

CSS.showpageOf{display:inline-block;font-size:90%;padding:7px 12px;vertical-align:top;line-height:20px;}
.showpagePoint{background:#333;color:#fff;display:inline-block;vertical-align:top;line-height:20px;padding:7px 12px;margin:0;font-size:14px;text-align:center;border-left:1px solid #f0f0f0;box-shadow:inset 0 1px 1px rgba(0,0,0,0.1);transition:initial}
.showpage a,.showpageNum a{display:inline-block;vertical-align:top;line-height:20px;padding:7px 12px;margin:0;font-size:14px;text-align:center;border-left:1px solid #f0f0f0;transition:color .3s}
.showpage a:hover,.showpageNum a:hover{background-color:#fefefe;color:#454545;box-shadow:inset 0 1px 1px rgba(0,0,0,0.1);transition:color .3s}

After this find in your HTML editor closing tag </body>  before it paste the following JS:

JS<b:if cond='data:blog.pageType != &quot;item&quot;'>
<script type='text/javascript'>
/*<![CDATA[*/
var postperpage=7;var numshowpage=3;var upPageWord ='Prev';var downPageWord ='Next';var urlactivepage=location.href;var home_page="/";
/*]]>*/
</script>
<script>
var _0xc811=["","\x3C\x73\x70\x61\x6E\x20\x63\x6C\x61\x73\x73\x3D\x27\x73\x68\x6F\x77\x70\x61\x67\x65\x4F\x66\x27\x3E\x50\x61\x67\x65\x20","\x20\x6F\x66\x20","\x3C\x2F\x73\x70\x61\x6E\x3E","\x70\x61\x67\x65","\x3C\x73\x70\x61\x6E\x20\x63\x6C\x61\x73\x73\x3D\x22\x73\x68\x6F\x77\x70\x61\x67\x65\x22\x3E\x3C\x61\x20\x68\x72\x65\x66\x3D\x22","\x22\x3E","\x3C\x2F\x61\x3E\x3C\x2F\x73\x70\x61\x6E\x3E","\x3C\x73\x70\x61\x6E\x20\x63\x6C\x61\x73\x73\x3D\x22\x73\x68\x6F\x77\x70\x61\x67\x65\x4E\x75\x6D\x22\x3E\x3C\x61\x20\x68\x72\x65\x66\x3D\x22\x2F\x73\x65\x61\x72\x63\x68\x2F\x6C\x61\x62\x65\x6C\x2F","\x3F\x26\x6D\x61\x78\x2D\x72\x65\x73\x75\x6C\x74\x73\x3D","\x3C\x73\x70\x61\x6E\x20\x63\x6C\x61\x73\x73\x3D\x22\x73\x68\x6F\x77\x70\x61\x67\x65\x4E\x75\x6D\x22\x3E\x3C\x61\x20\x68\x72\x65\x66\x3D\x22\x23\x22\x20\x6F\x6E\x63\x6C\x69\x63\x6B\x3D\x22\x72\x65\x64\x69\x72\x65\x63\x74\x70\x61\x67\x65\x28","\x29\x3B\x72\x65\x74\x75\x72\x6E\x20\x66\x61\x6C\x73\x65\x22\x3E","\x3C\x73\x70\x61\x6E\x20\x63\x6C\x61\x73\x73\x3D\x22\x73\x68\x6F\x77\x70\x61\x67\x65\x4E\x75\x6D\x22\x3E\x3C\x61\x20\x68\x72\x65\x66\x3D\x22\x23\x22\x20\x6F\x6E\x63\x6C\x69\x63\x6B\x3D\x22\x72\x65\x64\x69\x72\x65\x63\x74\x6C\x61\x62\x65\x6C\x28","\x3C\x73\x70\x61\x6E\x20\x63\x6C\x61\x73\x73\x3D\x22\x73\x68\x6F\x77\x70\x61\x67\x65\x4E\x75\x6D\x22\x3E\x3C\x61\x20\x68\x72\x65\x66\x3D\x22","\x22\x3E\x31\x3C\x2F\x61\x3E\x3C\x2F\x73\x70\x61\x6E\x3E","\x3C\x73\x70\x61\x6E\x20\x63\x6C\x61\x73\x73\x3D\x22\x73\x68\x6F\x77\x70\x61\x67\x65\x50\x6F\x69\x6E\x74\x22\x3E","\x70\x61\x67\x65\x41\x72\x65\x61","\x67\x65\x74\x45\x6C\x65\x6D\x65\x6E\x74\x73\x42\x79\x4E\x61\x6D\x65","\x62\x6C\x6F\x67\x2D\x70\x61\x67\x65\x72","\x67\x65\x74\x45\x6C\x65\x6D\x65\x6E\x74\x42\x79\x49\x64","\x6C\x65\x6E\x67\x74\x68","\x69\x6E\x6E\x65\x72\x48\x54\x4D\x4C","\x66\x65\x65\x64","\x6F\x70\x65\x6E\x53\x65\x61\x72\x63\x68\x24\x74\x6F\x74\x61\x6C\x52\x65\x73\x75\x6C\x74\x73","\x2F\x73\x65\x61\x72\x63\x68\x2F\x6C\x61\x62\x65\x6C\x2F","\x69\x6E\x64\x65\x78\x4F\x66","\x3F\x75\x70\x64\x61\x74\x65\x64\x2D\x6D\x61\x78","\x73\x75\x62\x73\x74\x72\x69\x6E\x67","\x3F\x26\x6D\x61\x78","\x3F\x71\x3D","\x2E\x68\x74\x6D\x6C","\x23\x50\x61\x67\x65\x4E\x6F\x3D","\x3C\x73\x63\x72\x69\x70\x74\x20\x73\x72\x63\x3D\x22","\x66\x65\x65\x64\x73\x2F\x70\x6F\x73\x74\x73\x2F\x73\x75\x6D\x6D\x61\x72\x79\x3F\x6D\x61\x78\x2D\x72\x65\x73\x75\x6C\x74\x73\x3D\x31\x26\x61\x6C\x74\x3D\x6A\x73\x6F\x6E\x2D\x69\x6E\x2D\x73\x63\x72\x69\x70\x74\x26\x63\x61\x6C\x6C\x62\x61\x63\x6B\x3D\x68\x69\x74\x75\x6E\x67\x74\x6F\x74\x61\x6C\x64\x61\x74\x61\x22\x3E\x3C\x2F\x73\x63\x72\x69\x70\x74\x3E","\x77\x72\x69\x74\x65","\x6C\x61\x62\x65\x6C","\x26\x6D\x61\x78\x2D\x72\x65\x73\x75\x6C\x74\x73\x3D","\x66\x65\x65\x64\x73\x2F\x70\x6F\x73\x74\x73\x2F\x73\x75\x6D\x6D\x61\x72\x79\x2F\x2D\x2F","\x3F\x61\x6C\x74\x3D\x6A\x73\x6F\x6E\x2D\x69\x6E\x2D\x73\x63\x72\x69\x70\x74\x26\x63\x61\x6C\x6C\x62\x61\x63\x6B\x3D\x68\x69\x74\x75\x6E\x67\x74\x6F\x74\x61\x6C\x64\x61\x74\x61\x26\x6D\x61\x78\x2D\x72\x65\x73\x75\x6C\x74\x73\x3D\x31\x22\x20\x3E\x3C\x2F\x73\x63\x72\x69\x70\x74\x3E","\x68\x65\x61\x64","\x67\x65\x74\x45\x6C\x65\x6D\x65\x6E\x74\x73\x42\x79\x54\x61\x67\x4E\x61\x6D\x65","\x73\x63\x72\x69\x70\x74","\x63\x72\x65\x61\x74\x65\x45\x6C\x65\x6D\x65\x6E\x74","\x74\x79\x70\x65","\x74\x65\x78\x74\x2F\x6A\x61\x76\x61\x73\x63\x72\x69\x70\x74","\x73\x72\x63","\x66\x65\x65\x64\x73\x2F\x70\x6F\x73\x74\x73\x2F\x73\x75\x6D\x6D\x61\x72\x79\x3F\x73\x74\x61\x72\x74\x2D\x69\x6E\x64\x65\x78\x3D","\x26\x6D\x61\x78\x2D\x72\x65\x73\x75\x6C\x74\x73\x3D\x31\x26\x61\x6C\x74\x3D\x6A\x73\x6F\x6E\x2D\x69\x6E\x2D\x73\x63\x72\x69\x70\x74\x26\x63\x61\x6C\x6C\x62\x61\x63\x6B\x3D\x66\x69\x6E\x64\x64\x61\x74\x65\x70\x6F\x73\x74","\x73\x65\x74\x41\x74\x74\x72\x69\x62\x75\x74\x65","\x61\x70\x70\x65\x6E\x64\x43\x68\x69\x6C\x64","\x3F\x73\x74\x61\x72\x74\x2D\x69\x6E\x64\x65\x78\x3D","\x65\x6E\x74\x72\x79","\x24\x74","\x70\x75\x62\x6C\x69\x73\x68\x65\x64","\x2F\x73\x65\x61\x72\x63\x68\x3F\x75\x70\x64\x61\x74\x65\x64\x2D\x6D\x61\x78\x3D","\x3F\x75\x70\x64\x61\x74\x65\x64\x2D\x6D\x61\x78\x3D","\x68\x72\x65\x66"];function loophalaman(_0x70d5x2){var _0x70d5x3=_0xc811[0];nomerkiri= parseInt(numshowpage/ 2),nomerkiri== numshowpage- nomerkiri&amp;&amp; (numshowpage= 2* nomerkiri+ 1),mulai= nomerhal- nomerkiri,mulai&lt; 1&amp;&amp; (mulai= 1),maksimal= parseInt(_0x70d5x2/ postperpage)+ 1,maksimal- 1== _0x70d5x2/ postperpage&amp;&amp; (maksimal-= 1),akhir= mulai+ numshowpage- 1,akhir&gt; maksimal&amp;&amp; (akhir= maksimal),_0x70d5x3+= _0xc811[1]+ nomerhal+ _0xc811[2]+ maksimal+ _0xc811[3];var _0x70d5x4=parseInt(nomerhal)- 1;nomerhal&gt; 1&amp;&amp; (_0x70d5x3+= 2== nomerhal?_0xc811[4]== jenis?_0xc811[5]+ home_page+ _0xc811[6]+ upPageWord+ _0xc811[7]:_0xc811[8]+ lblname1+ _0xc811[9]+ postperpage+ _0xc811[6]+ upPageWord+ _0xc811[7]:_0xc811[4]== jenis?_0xc811[10]+ _0x70d5x4+ _0xc811[11]+ upPageWord+ _0xc811[7]:_0xc811[12]+ _0x70d5x4+ _0xc811[11]+ upPageWord+ _0xc811[7]),mulai&gt; 1&amp;&amp; (_0x70d5x3+= _0xc811[4]== jenis?_0xc811[13]+ home_page+ _0xc811[14]:_0xc811[8]+ lblname1+ _0xc811[9]+ postperpage+ _0xc811[14]),mulai&gt; 2&amp;&amp; (_0x70d5x3+= _0xc811[0]);for(var _0x70d5x5=mulai;_0x70d5x5&lt;= akhir;_0x70d5x5++){_0x70d5x3+= nomerhal== _0x70d5x5?_0xc811[15]+ _0x70d5x5+ _0xc811[3]:1== _0x70d5x5?_0xc811[4]== jenis?_0xc811[13]+ home_page+ _0xc811[14]:_0xc811[8]+ lblname1+ _0xc811[9]+ postperpage+ _0xc811[14]:_0xc811[4]== jenis?_0xc811[10]+ _0x70d5x5+ _0xc811[11]+ _0x70d5x5+ _0xc811[7]:_0xc811[12]+ _0x70d5x5+ _0xc811[11]+ _0x70d5x5+ _0xc811[7]};akhir&lt; maksimal- 1&amp;&amp; (_0x70d5x3+= _0xc811[0]),akhir&lt; maksimal&amp;&amp; (_0x70d5x3+= _0xc811[4]== jenis?_0xc811[10]+ maksimal+ _0xc811[11]+ maksimal+ _0xc811[7]:_0xc811[12]+ maksimal+ _0xc811[11]+ maksimal+ _0xc811[7]);var _0x70d5x6=parseInt(nomerhal)+ 1;nomerhal&lt; maksimal&amp;&amp; (_0x70d5x3+= _0xc811[4]== jenis?_0xc811[10]+ _0x70d5x6+ _0xc811[11]+ downPageWord+ _0xc811[7]:_0xc811[12]+ _0x70d5x6+ _0xc811[11]+ downPageWord+ _0xc811[7]);for(var _0x70d5x7=document[_0xc811[17]](_0xc811[16]),_0x70d5x8=document[_0xc811[19]](_0xc811[18]),_0x70d5x9=0;_0x70d5x9&lt; _0x70d5x7[_0xc811[20]];_0x70d5x9++){_0x70d5x7[_0x70d5x9][_0xc811[21]]= _0x70d5x3};_0x70d5x7&amp;&amp; _0x70d5x7[_0xc811[20]]&gt; 0&amp;&amp; (_0x70d5x3= _0xc811[0]),_0x70d5x8&amp;&amp; (_0x70d5x8[_0xc811[21]]= _0x70d5x3)}function hitungtotaldata(_0x70d5x2){var _0x70d5x3=_0x70d5x2[_0xc811[22]],_0x70d5x4=parseInt(_0x70d5x3[_0xc811[23]].$t,10);loophalaman(_0x70d5x4)}function halamanblogger(){var _0x70d5x2=urlactivepage;-1!= _0x70d5x2[_0xc811[25]](_0xc811[24])&amp;&amp; (lblname1= -1!= _0x70d5x2[_0xc811[25]](_0xc811[26])?_0x70d5x2[_0xc811[27]](_0x70d5x2[_0xc811[25]](_0xc811[24])+ 14,_0x70d5x2[_0xc811[25]](_0xc811[26])):_0x70d5x2[_0xc811[27]](_0x70d5x2[_0xc811[25]](_0xc811[24])+ 14,_0x70d5x2[_0xc811[25]](_0xc811[28]))),-1== _0x70d5x2[_0xc811[25]](_0xc811[29])&amp;&amp; -1== _0x70d5x2[_0xc811[25]](_0xc811[30])&amp;&amp; (-1== _0x70d5x2[_0xc811[25]](_0xc811[24])?(jenis= _0xc811[4],nomerhal= -1!= urlactivepage[_0xc811[25]](_0xc811[31])?urlactivepage[_0xc811[27]](urlactivepage[_0xc811[25]](_0xc811[31])+ 8,urlactivepage[_0xc811[20]]):1,document[_0xc811[34]](_0xc811[32]+ home_page+ _0xc811[33])):(jenis= _0xc811[35],-1== _0x70d5x2[_0xc811[25]](_0xc811[36])&amp;&amp; (postperpage= 20),nomerhal= -1!= urlactivepage[_0xc811[25]](_0xc811[31])?urlactivepage[_0xc811[27]](urlactivepage[_0xc811[25]](_0xc811[31])+ 8,urlactivepage[_0xc811[20]]):1,document[_0xc811[34]](_0xc811[32]+ home_page+ _0xc811[37]+ lblname1+ _0xc811[38])))}function redirectpage(_0x70d5x2){jsonstart= (_0x70d5x2- 1)* postperpage,nopage= _0x70d5x2;var _0x70d5x3=document[_0xc811[40]](_0xc811[39])[0],_0x70d5x4=document[_0xc811[42]](_0xc811[41]);_0x70d5x4[_0xc811[43]]= _0xc811[44],_0x70d5x4[_0xc811[48]](_0xc811[45],home_page+ _0xc811[46]+ jsonstart+ _0xc811[47]),_0x70d5x3[_0xc811[49]](_0x70d5x4)}function redirectlabel(_0x70d5x2){jsonstart= (_0x70d5x2- 1)* postperpage,nopage= _0x70d5x2;var _0x70d5x3=document[_0xc811[40]](_0xc811[39])[0],_0x70d5x4=document[_0xc811[42]](_0xc811[41]);_0x70d5x4[_0xc811[43]]= _0xc811[44],_0x70d5x4[_0xc811[48]](_0xc811[45],home_page+ _0xc811[37]+ lblname1+ _0xc811[50]+ jsonstart+ _0xc811[47]),_0x70d5x3[_0xc811[49]](_0x70d5x4)}function finddatepost(_0x70d5x2){post= _0x70d5x2[_0xc811[22]][_0xc811[51]][0];var _0x70d5x3=post[_0xc811[53]][_0xc811[52]][_0xc811[27]](0,19)+ post[_0xc811[53]][_0xc811[52]][_0xc811[27]](23,29),_0x70d5x4=encodeURIComponent(_0x70d5x3);if(_0xc811[4]== jenis){var _0x70d5x5=_0xc811[54]+ _0x70d5x4+ _0xc811[36]+ postperpage+ _0xc811[31]+ nopage}else {var _0x70d5x5=_0xc811[24]+ lblname1+ _0xc811[55]+ _0x70d5x4+ _0xc811[36]+ postperpage+ _0xc811[31]+ nopage};location[_0xc811[56]]= _0x70d5x5}var nopage,jenis,nomerhal,lblname1;halamanblogger()
</script>
</b:if>

Now save new settings, open the home page of your blog and check the result.

Video Instruction

Settings for Numbered pagenav 

After installing we need to configure our posts system. In the first lines of the script code, selectors postperpage = 7; and numshowpage = 3; determine the number of posts displayed on one page, = 7, and the number of buttons with page numbers displayed in the menu = 3. These numbers can be changed at your desire.

An important condition. The number in the selector postperpage = 7; must match the number set for the number of posts in the theme settings. To check the conditions, in the menu of the blog control panel, open “Design”, in the gadget “Blog posts” - “Change”. In the window that opens, at the top, see “Number of messages on the main page = 7 [Messages]. The condition is met!

Customize paginated navigation on labels page

If open some of the labels page from the Labels gadget in the sidebar, then 20 posts are displayed on the page, and at the end of the page the old navigation buttons Home - Previous appear. And if you click on Previous, a page opens with the other 20 posts, but already with numbered page navigation.

For the correct numbering of labels pages, in the Theme code we look for: 'data: label.url', and change all of them to:

HTML'data:label.url + "?&max-results=7"'

Number 7 is the number of messages that should be displayed on one page of labels and the main.

We open the labels pages and make sure that the new navigation with page numbers works as it should.

We look at the browser window and see that the URL of the page of the section has changed. A tail appeared at the end of the shortcut URL:? & Max-results = 7. Therefore, on the site you need to find all the old links to the headings and change them to new ones.

How to enable navigation with numbers on Archive pages

On the site, you can install the gadget “Archive”, which displays all messages created over a certain period, for example, May 2017. To enable navigation with numbers on the archive pages, in the code for the theme template, look for the code:

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

and change by the following code:

HTML<!-- 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:if>
</b:if>

Now save settings.

Pros and cons of numbered navigation 

It is difficult to talk about some disadvantages, as I said above, when a user loads a site for a long time, making transitions through numbered navigation, it recalls in its head only kind and gentle words. We also take the same problem with bookmarks here.

 Of the advantages, you can highlight quick access to the desired material, unless of course the webmaster takes care of such a setting. In any case, the reader can quickly navigate their location. Using pagination, the user makes real navigations on the site, which increases behavioral factors. 

How to split one post into Multiple Pages 

If your post is too long and you wanna divide it into pages, then follow this instruction.

Add this CSS code into your Edit HTML after closing tag ]]></b:skin>

CSS<style type='text/css'>
.contentin,.pagenum br{display:none}.numpage{text-align:center;margin:30px auto 0 auto;border-top:1px solid rgba(0,0,0,0.1)}.pagenum{position:relative;background:#fff;margin:0 auto 20px auto;text-align:center;padding:20px;font-size:14px}.pagenum .buttonn{background:#ff6e00;font-weight:bold;display:inline-block;color:#fff;text-decoration:none;text-align:center;border-right:0;font-size:14px;padding:.4rem .8rem;border:0;margin:0 4px 0 0;border-radius:3px;transition:all .2s}.pagenum .buttonn:hover,.pagenum .buttonn:active{background:#333;color:#fff}.buttonn.numpage,.buttonn.numpage:hover{background:#333;color:#fff}
</style>

Now find a closing tag </body>  and above it paste this Script:

JS<b:if cond='data:blog.pageType != &quot;index&quot;'>
<script type='text/javascript'>
//<![CDATA[
function get_n(dalam){var o,t,e=decodeURIComponent(window.location.search.substring(1)).split("&");for(t=0;t<e.length;t++)if((o=e[t].split("="))[0]===dalam)return void 0===o[1]||o[1]}$(document).ready(function(){var dalam=get_n("dalam");$(".contentin").hide(),void 0===dalam?$(".split_1").show():$(".split_"+dalam).show();var o=$(".contentin").length;if(0!=o)for(i=1;i<=o;i++){var t=window.location.pathname;$(".pagenum").append($('<a href="'+t+"?dalam="+i+'" class="buttonn n'+i+'"> '+i+" </a>"))}else $(".pagenum").hide();void 0==dalam&&$(".buttonn.n1").toggleClass("numpage"),dalam==dalam&&$(".buttonn.n"+dalam).toggleClass("numpage")});
//]]>
</script>
</b:if>

Save Theme, go to your Post, switch to HTML, for creating pages use this code:

HTML<<div class="contentin split_1">
Your Text
</div>

<div class="contentin split_2">
Your Text
</div>

<div class="contentin split_3">
Your Text
</div>

<div class="contentin split_4">
Your Text
</div>

<div class="contentin split_5">
Your Text
</div>

The final step, at the end of your post, add this HTML:

HTML<div class="numpage">
</div>
<div class="pagenum">
</div>

User Comments and reviews

Mrs. pleasant WOw! Thanks a lot! My previous script stopped working. Thanks to this one, navigation has run again.

Antonio D thanks, all worked well

Frank Moony All information before meeting with your post was outdated and did not work. At first, there were problems with your settings. It displayed "one of the bottom" with 4 posts, although there should have been a second page with a fifth post (in the blogger setting 4 posts per page). But, when I synchronized the number of posts in your code with the blogger, everything worked out. HOORAY! Thank you very much!

Lara Ortiz Thanks! Happened)

Mary Dominguez Thank you !!! rummaged through everything did not fit - and this code is just a delight !!!

Christian Sanderos Hello! I set myself this navigation and still use it, thank you for your efforts.

Joshua Freeman Thank you very much, I really liked this navigation

Alex Morten Greetings! There is a blog on the blogger. Put page-by-page navigation, according to your video, everything works fine. thanks

Alisa Many thanks!!!