A page number is a special type of navigation on blog or website, that can provide the other pages to open easily. This kind of navigation provided with number as a link to another list of post articles.Default blogger page navigation is link of Blog pager to Newer Post, Home and Older post, but you can change this. I would recommend blogger to change the default blog pager to something that encourages exploration.
Example Page Number Navigation On My Homepage
Usually this page number navigation added in Bottom of Home page. This element will navigate all your post articles or content and looking better for user experience. Reader might love this kind of method. Demo is almost like in this Homepage.I believe this is one of a better option in comparison to default blog pager (older or newer post entries change with number). A page number displayed as a link, along with a continuation, it can gives the good impression of a page, so this element would be better to increase pageviews.
Add Navigation Element on HTML Template
By using this feature as an option, your blog or website visitors can easily go to an appropriate page as they want. To use a page number element, you must create a navigation component, you just need to apply a few line of CSS and Javascript to your HTML template. If you have some experience in HTML, then you can design this element as you like with modifying the CSS style.In this post tutorial I will try to explain how to add page number navigation in your blog. You just need a few step to do this within a minute. Follow step by step below.
1. Login to Blogger.
2. Backup your template first.
3. Add following few line of CSS style before
]]></b:skin> or </style> in CSS style section.CSS For Number Navigation
.showpageArea {
width:100%;
margin:0 auto;
padding-right:15px;
padding-top:15px;
padding-bottom:25px;
}
.showpageOf {
border:1px solid #7b7c7d;
color:#000;
margin:3px;
padding:3px 8px
}
.showpageNum a,.showpage a{
border:1px solid #7b7c7d;
color:#000;
text-decoration:none;
margin:3px;
padding:3px 8px;
font-size:14px
}
.showpageNum a:hover,.showpage a:hover,.showpagePoint{
border:1px solid #7b7c7d;
background:#256ead;
margin:3px;
padding:3px 8px;
color:#fff;
line-height:50px;
}4. Add following Javascript before
</body>Javascript For Page Number Navigation
<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
<script type='text/javascript'>
var pageCount=6;var displayPageNum=3;var upPageWord ='Previous';
var downPageWord ='Next';
</script>
<script type='text/javascript'>//<![CDATA[
function showpageCount(n){var h=home_page_url;var f=new Array();var m=1;var c=1;var q=0;var s=0;var d=0;var e="";var a="";var o="";for(var l=0,k;k=n.feed.entry[l];l++){var r=k.published.$t.substring(0,19)+k.published.$t.substring(23,29);timestamp=encodeURIComponent(r);var t=k.title.$t;if(t!=""){if(q==0||(q%pageCount==(pageCount-1))){if(h.indexOf(timestamp)!=-1){m=c}if(t!=""){c++}f[f.length]="/search?updated-max="+timestamp+"&max-results="+pageCount}}q++}for(var g=0;g<f.length;g++){if(g>=(m-displayPageNum-1)&&g<(m+displayPageNum)){if(s==0&&g==m-2){if(m==2){a='<span class="showpage"><a href="/">'+upPageWord+"</a></span>"}else{a='<span class="showpage"><a href="'+f[g]+'">'+upPageWord+"</a></span>"}s++}if(g==(m-1)){e+='<span class="showpagePoint">'+m+"</span>"}else{if(g==0){e+='<span class="showpageNum"><a href="/">1</a></span>'}else{e+='<span class="showpageNum"><a href="'+f[g]+'">'+(g+1)+"</a></span>"}}if(d==0&&g==m){o='<span class="showpage"> <a href="'+f[g]+'">'+downPageWord+"</a></span>";d++}}}if(m>1){e=""+a+" "+e+" "}e='<div class="showpageArea"><span style="display:none;COLOR: #f2f2f2;font-weight:normal;text-transform:none;border:1px solid #000;background:#253991;" class="showpageOf">Total Pages ('+(c-1)+")</span>"+e;if(m<(c-1)){e+=o}if(c==1){c++}e+="</div>";var b=document.getElementsByName("pageArea");var j=document.getElementById("blog-pager");if(c<=2){e=""}for(var g=0;g<b.length;g++){b[g].innerHTML=e}if(b&&b.length>0){e=""}if(j){j.innerHTML=e}}function showpageCount2(r){var l=home_page_url;var k=new Array();var g=l.indexOf("/search/label/")!=-1;var d=g?l.substr(l.indexOf("/search/label/")+14,l.length):"";d=d.indexOf("?")!=-1?d.substr(0,d.indexOf("?")):d;var q=1;var e=1;var t=0;var v=0;var f=0;var h="";var a="";var s="";var c='<span class="showpageNum"><a href="/search/label/'+d+"?&max-results="+pageCount+'">';var l=home_page_url;for(var o=0,n;n=r.feed.entry[o];o++){var u=n.published.$t.substring(0,19)+n.published.$t.substring(23,29);timestamp=encodeURIComponent(u);var w=n.title.$t;if(w!=""){if(t==0||(t%pageCount==(pageCount-1))){if(l.indexOf(timestamp)!=-1){q=e}if(w!=""){e++}k[k.length]="/search/label/"+d+"?updated-max="+timestamp+"&max-results="+pageCount}}t++}for(var j=0;j<k.length;j++){if(j>=(q-displayPageNum-1)&&j<(q+displayPageNum)){if(v==0&&j==q-2){if(q==2){a=c+upPageWord+"</a></span>"}else{a='<span class="showpage"><a href="'+k[j]+'">'+upPageWord+"</a></span>"}v++}if(j==(q-1)){h+='<span class="showpagePoint">'+q+"</span>"}else{if(j==0){h=c+"1</a></span>"}else{h+='<span class="showpageNum"><a href="'+k[j]+'">'+(j+1)+"</a></span>"}}if(f==0&&j==q){s='<span class="showpage"> <a href="'+k[j]+'">'+downPageWord+"</a></span>";f++}}}if(q>1){if(!g){h=""+a+" "+h+" "}else{h=""+a+" "+h+" "}}h='<div class="showpageArea"><span style="COLOR: #000;" class="showpageOf">Pages ('+(e-1)+")</span>"+h;if(q<(e-1)){h+=s}if(e==1){e++}h+="</div>";var b=document.getElementsByName("pageArea");var m=document.getElementById("blog-pager");if(e<=2){h=""}for(var j=0;j<b.length;j++){b[j].innerHTML=h}if(b&&b.length>0){h=""}if(m){m.innerHTML=h}}var home_page_url=location.href;var thisUrl=home_page_url;if(thisUrl.indexOf("/search/label/")!=-1){if(thisUrl.indexOf("?updated-max")!=-1){var lblname1=thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?updated-max"))}else{var lblname1=thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?&max"))}}var home_page="/";if(thisUrl.indexOf("?q=")==-1){if(thisUrl.indexOf("/search/label/")==-1){document.write('<script src="'+home_page+'feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999" ><\/script>')}else{document.write('<script src="'+home_page+"feeds/posts/full/-/"+lblname1+'?alt=json-in-script&callback=showpageCount2&max-results=99999" ><\/script>')}};
//]]></script>
</b:if>
</b:if>Blue color is the number of post showing in homepage, you might want to change this.
Note: If You want to reduce this line of javascript, then host this Javascript for example on Google Drive and you can follow the link for the tutorial.
5. You can preview this first.
6. Save the template and see the result.
