Blogger is a great platform for new and also for expert bloggers as well. Blogger has many features that you might not even aware of it. One of such hidden feature is that, if you don’t have page number navigation in your blogger then you can easily set it up by going to Settings menu Post and comments and selecting the Show at most post potion.
When your blog post is greater to the number that is set by default, you will able to see as Older Posts and Newer Posts.
It does not look cool, Right!
So, instead of using such older and newer posts links, you can help you blog readers to directly go and jump to a specific number and navigate as per their wish.
This will also help your visitors to know exactly the total number of the post has been published in that particular category or in your whole blog.
So, you will get some of most stylish, good-looking number navigation widget with just simple steps that will make your blog look dashing and professional. Just follow the steps and you will be done in no time.
Watch the tutorial video before proceeding:
How to add the custom numbered page navigation to your blogger blog
You just need to go only two simple steps
1. Adding the CSS code in your blogger template and
2. Adding the script.
1 Adding the CSS code
a. Login to your Blogger blog and select Template and click on Edit HTML.
b. By pressing Control + F together and type
c. Now select any of the custom designs that you like or that fits your blogger theme color and paste the code above the
code.
1. Page number navigation with Grey current page tabs
1: #blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px;} 2: .blog-pager {background: none;} 3: .displaypageNum a,.showpage a,.pagecurrent{padding: 3px 7px;margin-right:5px;background:#E9E9E9;color: #888;border:1px solid #E9E9E9;} 4: .displaypageNum a:hover,.showpage a:hover,.pagecurrent{background:#CECECE;text-decoration:none;color: #000;} 5: .showpageOf{display:none!important} 6: #blog-pager .showpage, #blog-pager .pagecurrent{font-weight:bold;color: #888;} 7: #blog-pager .pages{border:none;} 2. Page number navigation with Dark and blue current page tabs.
1: #blog-pager{clear:both;margin:30px auto; padding: 7px; text-align:center;font-size: 11px;background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #000000),color-stop(1, #292929));background-image: -o-linear-gradient(top, #000000 0%, #292929 100%);background-image: -moz-linear-gradient(top, #000000 0%, #292929 100%);background-image: -webkit-linear-gradient(top, #000000 0%, #292929 100%);background-image: -ms-linear-gradient(top, #000000 0%, #292929 100%);background-image: linear-gradient(to top, #000000 0%, #292929 100%); padding: 6px;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;} 2: .blog-pager {background: none;} 3: .displaypageNum a,.showpage a,.pagecurrent{padding: 3px 10px;margin-right:5px; color: #fff;} 4: .displaypageNum a:hover,.showpage a:hover,.pagecurrent{background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #59A2CF),color-stop(1, #D9EAFF));background-image: -o-linear-gradient(top, #59A2CF 0%, #D9EAFF 100%);background-image: -moz-linear-gradient(top, #59A2CF 0%, #D9EAFF 100%);background-image: -webkit-linear-gradient(top, #59A2CF 0%, #D9EAFF 100%);background-image: -ms-linear-gradient(top, #59A2CF 0%, #D9EAFF 100%);background-image: linear-gradient(to top, #59A2CF 0%, #D9EAFF 100%);text-decoration: none;color: #000;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;} 5: .showpageOf{display:none!important}.blog-pager-older-link, .home-link, .blog-pager-newer-link {background: transparent;} 6: a.blog-pager-older-link, a.home-link, a.blog-pager-newer-link {color: #fff;} 7: #blog-pager .pages{border:none;background: none;} 3. Page number navigation with Dark and Orange current page tabs.
1: #blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px;} 2: .blog-pager {background: none;} 3: .displaypageNum a,.showpage a,.pagecurrent{padding: 5px 10px;margin-right:5px; color: #F4F4F4; background-color:#404042;-webkit-box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);-moz-box-shadow:0px 5px 3px -1px rgba(50, 50, 50, 0.53);box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);} 4: .displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#EC8D04;text-decoration:none;color: #fff;} 5: #blog-pager .showpage, #blog-pager, .pagecurrent{font-weight:bold;color: #000;} 6: .showpageOf{display:none!important} 7: #blog-pager .pages{border:none;-webkit-box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);-moz-box-shadow:0px 5px 3px -1px rgba(50, 50, 50, 0.53);box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);} 4. Page number navigation with Grey and blue current page tabs.
1: #blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px;} 2: .blog-pager {background: none;} 3: .displaypageNum a,.showpage a,.pagecurrent{font-size: 14px;padding: 5px 12px;margin-right:5px; color: #666; background-color:#eee;} 4: .displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#359BED;text-decoration:none;color: #fff;} 5: #blog-pager .pagecurrent{font-weight:bold;color: #fff;background:#359BED;} 6: .showpageOf{display:none!important} 7: #blog-pager .pages{border:none;} 5. Pagination on a green with orange and pink hover colors.
1: #blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px; } 2: .blog-pager {background: none;} 3: .displaypageNum a,.showpage a,.pagecurrent{font-size: 13px;padding: 5px 12px;margin-right:5px; color: #3E5801; background-color:#E0EDC1;} 4: .displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#FEF6DF;text-decoration:none;color: #E16800;} 5: #blog-pager .pagecurrent{font-weight:bold;color: #D25E71;background:#FFDEDF;} 6: .showpageOf{display:none!important} 7: #blog-pager .pages{border:none;} 6. Page number navigation with Grey and red current page tabs.
#blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px; } .blog-pager {background: none;} .displaypageNum a,.showpage a,.pagecurrent{font-size: 12px;padding: 5px 12px;margin-right:5px; color: #222; background-color:#eee; border: 1px solid #EEEEEE;} .displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#E5E5E5;text-decoration:none;color: #222;} #blog-pager .pagecurrent{font-weight:bold;color: #fff;background:#DB4920;} .showpageOf{display:none!important} #blog-pager .pages{border:none;} 7. Page number navigation with Orange and Red current page tabs.
1: #blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px; } 2: .blog-pager {background: none;} 3: .displaypageNum a,.showpage a,.pagecurrent{font-size: 13px;padding: 5px 12px;margin-right:5px; color: #AD0B00; background-color:#FAB001;} 4: .displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#DB4920;text-decoration:none;color: #fff;} 5: #blog-pager .pagecurrent{font-weight:bold;color: #fff;background:#DB4920;} 6: .showpageOf{display:none!important} 7: #blog-pager .pages{border:none;} 2 Adding the script
a. Now again find by pressing Control + F and Type
</body>
in the search box and hit Enter. b. Then add the below script just above the
1: <b:if cond='data:blog.pageType != "item"'> 2: <b:if cond='data:blog.pageType != "static_page"'> 3: <script type='text/javascript'> 4: /*<![CDATA[*/ 5: var perPage=3; 6: var numPages=3; 7: var firstText ='First'; 8: var lastText ='Last'; 9: var prevText ='« Previous'; 10: var nextText ='Next »'; 11: var urlactivepage=location.href; 12: var home_page="/"; 13: if(typeof firstText=="undefined")firstText="First";if(typeof lastText=="undefined")lastText="Last";var noPage;var currentPage;var currentPageNo;var postLabel;pagecurrentg();function looppagecurrentg(pageInfo){var html='';pageNumber=parseInt(numPages / 2);if(pageNumber==numPages-pageNumber){numPages=pageNumber*2+1} 14: pageStart=currentPageNo-pageNumber;if(pageStart<1)pageStart=1;lastPageNo=parseInt(pageInfo / perPage)+1;if(lastPageNo-1==pageInfo / perPage)lastPageNo=lastPageNo-1;pageEnd=pageStart+numPages-1;if(pageEnd>lastPageNo)pageEnd=lastPageNo;html+="<span class='showpageOf'>Page "+currentPageNo+' of '+lastPageNo+"</span>";var prevNumber=parseInt(currentPageNo)-1;if(currentPageNo>1){if(currentPage=="page"){html+='<span class="showpage firstpage"><a href="'+home_page+'">'+firstText+'</a></span>'}else{html+='<span class="displaypageNum firstpage"><a href="/search/label/'+postLabel+'?&max-results='+perPage+'">'+firstText+'</a></span>'}} 15: if(currentPageNo>2){if(currentPageNo==3){if(currentPage=="page"){html+='<span class="showpage"><a href="'+home_page+'">'+prevText+'</a></span>'}else{html+='<span class="displaypageNum"><a href="/search/label/'+postLabel+'?&max-results='+perPage+'">'+prevText+'</a></span>'}}else{if(currentPage=="page"){html+='<span class="displaypageNum"><a href="#" onclick="redirectpage('+prevNumber+');return false">'+prevText+'</a></span>'}else{html+='<span class="displaypageNum"><a href="#" onclick="redirectlabel('+prevNumber+');return false">'+prevText+'</a></span>'}}} 16: if(pageStart>1){if(currentPage=="page"){html+='<span class="displaypageNum"><a href="'+home_page+'">1</a></span>'}else{html+='<span class="displaypageNum"><a href="/search/label/'+postLabel+'?&max-results='+perPage+'">1</a></span>'}} 17: if(pageStart>2){html+=' ... '} 18: for(var jj=pageStart;jj<=pageEnd;jj++){if(currentPageNo==jj){html+='<span class="pagecurrent">'+jj+'</span>'}else if(jj==1){if(currentPage=="page"){html+='<span class="displaypageNum"><a href="'+home_page+'">1</a></span>'}else{html+='<span class="displaypageNum"><a href="/search/label/'+postLabel+'?&max-results='+perPage+'">1</a></span>'}}else{if(currentPage=="page"){html+='<span class="displaypageNum"><a href="#" onclick="redirectpage('+jj+');return false">'+jj+'</a></span>'}else{html+='<span class="displaypageNum"><a href="#" onclick="redirectlabel('+jj+');return false">'+jj+'</a></span>'}}} 19: if(pageEnd<lastPageNo-1){html+='...'} 20: if(pageEnd<lastPageNo){if(currentPage=="page"){html+='<span class="displaypageNum"><a href="#" onclick="redirectpage('+lastPageNo+');return false">'+lastPageNo+'</a></span>'}else{html+='<span class="displaypageNum"><a href="#" onclick="redirectlabel('+lastPageNo+');return false">'+lastPageNo+'</a></span>'}} 21: var nextnumber=parseInt(currentPageNo)+1;if(currentPageNo<(lastPageNo-1)){if(currentPage=="page"){html+='<span class="displaypageNum"><a href="#" onclick="redirectpage('+nextnumber+');return false">'+nextText+'</a></span>'}else{html+='<span class="displaypageNum"><a href="#" onclick="redirectlabel('+nextnumber+');return false">'+nextText+'</a></span>'}} 22: if(currentPageNo<lastPageNo){if(currentPage=="page"){html+='<span class="displaypageNum lastpage"><a href="#" onclick="redirectpage('+lastPageNo+');return false">'+lastText+'</a></span>'}else{html+='<span class="displaypageNum lastpage"><a href="#" onclick="redirectlabel('+lastPageNo+');return false">'+lastText+'</a></span>'}} 23: var pageArea=document.getElementsByName("pageArea");var blogPager=document.getElementById("blog-pager");for(var p=0;p<pageArea.length;p++){pageArea[p].innerHTML=html} 24: if(pageArea&&pageArea.length>0){html=''} 25: if(blogPager){blogPager.innerHTML=html}} 26: function totalcountdata(root){var feed=root.feed;var totaldata=parseInt(feed.openSearch$totalResults.$t,10);looppagecurrentg(totaldata)} 27: function pagecurrentg(){var thisUrl=urlactivepage;if(thisUrl.indexOf("/search/label/")!=-1){if(thisUrl.indexOf("?updated-max")!=-1){postLabel=thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?updated-max"))}else{postLabel=thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?&max"))}} 28: if(thisUrl.indexOf("?q=")==-1&&thisUrl.indexOf(".html")==-1){if(thisUrl.indexOf("/search/label/")==-1){currentPage="page";if(urlactivepage.indexOf("#PageNo=")!=-1){currentPageNo=urlactivepage.substring(urlactivepage.indexOf("#PageNo=")+8,urlactivepage.length)}else{currentPageNo=1} 29: document.write("<script src=\""+home_page+"feeds/posts/summary?max-results=1&alt=json-in-script&callback=totalcountdata\"><\/script>")}else{currentPage="label";if(thisUrl.indexOf("&max-results=")==-1){perPage=20} 30: if(urlactivepage.indexOf("#PageNo=")!=-1){currentPageNo=urlactivepage.substring(urlactivepage.indexOf("#PageNo=")+8,urlactivepage.length)}else{currentPageNo=1} 31: document.write('<script src="'+home_page+'feeds/posts/summary/-/'+postLabel+'?alt=json-in-script&callback=totalcountdata&max-results=1" ><\/script>')}}} 32: function redirectpage(numberpage){jsonstart=(numberpage-1)*perPage;noPage=numberpage;var nameBody=document.getElementsByTagName('head')[0];var newInclude=document.createElement('script');newInclude.type='text/javascript';newInclude.setAttribute("src",home_page+"feeds/posts/summary?start-index="+jsonstart+"&max-results=1&alt=json-in-script&callback=finddatepost");nameBody.appendChild(newInclude)} 33: function redirectlabel(numberpage){jsonstart=(numberpage-1)*perPage;noPage=numberpage;var nameBody=document.getElementsByTagName('head')[0];var newInclude=document.createElement('script');newInclude.type='text/javascript';newInclude.setAttribute("src",home_page+"feeds/posts/summary/-/"+postLabel+"?start-index="+jsonstart+"&max-results=1&alt=json-in-script&callback=finddatepost");nameBody.appendChild(newInclude)} 34: function finddatepost(root){post=root.feed.entry[0];var timestamp1=post.published.$t.substring(0,19)+post.published.$t.substring(23,29);var timestamp=encodeURIComponent(timestamp1);if(currentPage=="page"){var pAddress="/search?updated-max="+timestamp+"&max-results="+perPage+"#PageNo="+noPage}else{var pAddress="/search/label/"+postLabel+"?updated-max="+timestamp+"&max-results="+perPage+"#PageNo="+noPage} 35: location.href=pAddress} 36: /*]]>*/ 37: </script> 38: </b:if> 39: </b:if> How to configure default page number navigation settings
When you have finished adding the CSS code and the script, you might want to change my default settings as per your requirements. So, in order to change the default settings, just follow the steps.
perPage: 7, numPages: 6, var firstText ='First'; var lastText ='Last'; var prevText ='« Previous'; var nextText ='Next »'; } a. perPage
This will show how many posts will be shown on each page of your blog (7 by default).
b. numPages
This will show how many pages will be shown in the page navigation (6 by default).
c. var firstText, var lastText, var prevText and var nextText
These just the words that will show up to your visitors for navigation. So, you can type your own within the codes. (First, Last, Previous and Next).
Fixing the Labels
Blogger will show up 20 of your blog post on the label pages by default but you can also make this widget appear on label pages by just cutting down the value in perPage variable.
Find each occurrence of the following code snippet:
1: expr:href='data:label.url' Replace it with the below code.
expr:href='data:label.url + "?&max-results=7"' Here 7 is the number of your blog posts that will appear on per page.
Lastly, click on Save Template.
You are done. Now, view your blog and happy blogging.