New And Easy Numbered Page Navigation for Blogger

Page Navigation for Blogger,add a nice page number navigation hack blogger. The default navigation links (i.e Older Posts) is not the friendly visitor. Now here is a completely new script and work for numbered page navigation for Blogger.This new script allows you to add numbered page navigation to blogger/ blogspot blog with page numbers starting(1, 2, 3, 4 ….) like those of a book.











Step 1 : Apply Style

1. Login to Blogger Dashboard and navigate to Template> Edit Html
2. Don't click the checkbox which says “Expand Widget Templates” Find this
3. Find this

]]></b:skin>

 and replace it with

/*------- pages-numbers-www.bloggertofree.blogspot.com/-----------*/
.showpageArea{font-family:verdana,arial,helvetica; color:#000; font-size:18px; margin:10px}
.showpageArea a{color:#000; padding-top:40px; text-shadow:0 1px 2px #fff; font-weight:400}
.showpageNum a{padding:0px 8px 0px; margin:1px 4px; text-decoration:none; border:2px solid #0090D5; -webkit-border-radius:3px}
.showpageNum a:hover{background-color:#000; color:#fff; padding:0px 8px 0px; border:1px solid #6F6F6F}
.showpageOf{margin:0 8px 0 0}
.showpagePoint{color:#fff; text-shadow:0 1px 2px #333; padding:0px 8px 0px; margin:2px; font-weight:400; -webkit-border-radius:3px; border:1px solid #2A2A2A; background-color:#ff0000; text-decoration:none}
/*------- pages-numbers -----------*/

Step 2 : Aplly Javascript
Find This :

</body>

Replace with :

 <script style='text/javascript'>
var pageCount=3;
var displayPageNum=5;
var upPageWord=&quot;<img onmouseout='this.style.opacity=0.80;this.filters.alpha.opacity=80' onmouseover='this.style.opacity=1;this.filters.alpha.opacity=100' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3ue4ENsFqPvQgr1cGqOflHQWolvmKslGNucqBaUIZ11GsRh0Jke6BQ6j_4N9uZrhrdLLmqpHgOSOU2vN_mHMSQAxdxjex4L7Ozxa9BTn3redHNjSGR-4G4M-k8Xuk8Ae9XImRlLGEYmE/s1600/leftarrow.png' style='opacity:0.80;filter:alpha(opacity=80)'/>&quot;;
var downPageWord=&quot;<img onmouseout='this.style.opacity=0.80;this.filters.alpha.opacity=80' onmouseover='this.style.opacity=1;this.filters.alpha.opacity=100' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQcvfv3YCcDHfgybStuoTCpgUaY_rKhaC3L6husTpXMjOe7jxFJiXufYe9MGOXuPxojFmqY1vMx2A_Coac1q6IIy-OOwWO93M3Jz5js4JL1JPTK8n7mM9f2HXAgk55Wk6Vx39L_4ZRuiY/s1600/rightarrow.png' style='opacity:0.80;filter:alpha(opacity=80)'/>&quot;;
</script>
<script type='text/javascript'>
//<![CDATA[
var home_page_url=location.href;function showpageCount(json){var thisUrl=home_page_url;var htmlMap=new Array();var thisNum=1;var postNum=1;var itemCount=0;var fFlag=0;var eFlag=0;var html='';var upPageHtml='';var downPageHtml='';for(var i=0,post;post=json.feed.entry[i];i++){var timestamp1=post.published.$t.substring(0,19)+post.published.$t.substring(23,29);timestamp=encodeURIComponent(timestamp1);var title=post.title.$t;if(title!=''){if(itemCount==0||(itemCount%pageCount==(pageCount-1))){if(thisUrl.indexOf(timestamp)!=-1){thisNum=postNum}if(title!='')postNum++;htmlMap[htmlMap.length]='/search?updated-max='+timestamp+'&max-results='+pageCount}}itemCount++}for(var p=0;p<htmlMap.length;p++){if(p>=(thisNum-displayPageNum-1)&&p<(thisNum+displayPageNum)){if(fFlag==0&&p==thisNum-2){if(thisNum==2){upPageHtml='<span class="showpage"><a href="/">'+upPageWord+'</a></span>'}else{upPageHtml='<span class="showpage"><a href="'+htmlMap[p]+'">'+upPageWord+'</a></span>'}fFlag++}if(p==(thisNum-1)){html+='<span class="showpagePoint">'+thisNum+'</span>'}else{if(p==0){html+='<span class="showpageNum"><a href="/">1</a></span>'}else{html+='<span class="showpageNum"><a href="'+htmlMap[p]+'">'+(p+1)+'</a></span>'}}if(eFlag==0&&p==thisNum){downPageHtml='<span class="showpage"> <a href="'+htmlMap[p]+'">'+downPageWord+'</a></span>';eFlag++}}}if(thisNum>1){html=''+upPageHtml+' '+html+' '}html='<div class="showpageArea"><span style="COLOR: #000;" class="showpageOf">('+(postNum-1)+')</span>'+html;if(thisNum<(postNum-1)){html+=downPageHtml}if(postNum==1)postNum++;html+='</div>';var pageArea=document.getElementsByName("pageArea");var blogPager=document.getElementById("blog-pager");if(postNum<=2){html=''}for(var p=0;p<pageArea.length;p++){pageArea[p].innerHTML=html}if(pageArea&&pageArea.length>0){html=''}if(blogPager){blogPager.innerHTML=html}}function showpageCount2(json){var thisUrl=home_page_url;var htmlMap=new Array();var isLablePage=thisUrl.indexOf("/search/label/")!=-1;var thisLable=isLablePage?thisUrl.substr(thisUrl.indexOf("/search/label/")+14,thisUrl.length):"";thisLable=thisLable.indexOf("?")!=-1?thisLable.substr(0,thisLable.indexOf("?")):thisLable;var thisNum=1;var postNum=1;var itemCount=0;var fFlag=0;var eFlag=0;var html='';var upPageHtml='';var downPageHtml='';var labelHtml='<span class="showpageNum"><a href="/search/label/'+thisLable+'?&max-results='+pageCount+'">';var thisUrl=home_page_url;for(var i=0,post;post=json.feed.entry[i];i++){var timestamp1=post.published.$t.substring(0,19)+post.published.$t.substring(23,29);timestamp=encodeURIComponent(timestamp1);var title=post.title.$t;if(title!=''){if(itemCount==0||(itemCount%pageCount==(pageCount-1))){if(thisUrl.indexOf(timestamp)!=-1){thisNum=postNum}if(title!='')postNum++;htmlMap[htmlMap.length]='/search/label/'+thisLable+'?updated-max='+timestamp+'&max-results='+pageCount}}itemCount++}for(var p=0;p<htmlMap.length;p++){if(p>=(thisNum-displayPageNum-1)&&p<(thisNum+displayPageNum)){if(fFlag==0&&p==thisNum-2){if(thisNum==2){upPageHtml=labelHtml+upPageWord+'</a></span>'}else{upPageHtml='<span class="showpage"><a href="'+htmlMap[p]+'">'+upPageWord+'</a></span>'}fFlag++}if(p==(thisNum-1)){html+='<span class="showpagePoint">'+thisNum+'</span>'}else{if(p==0){html=labelHtml+'1</a></span>'}else{html+='<span class="showpageNum"><a href="'+htmlMap[p]+'">'+(p+1)+'</a></span>'}}if(eFlag==0&&p==thisNum){downPageHtml='<span class="showpage"> <a href="'+htmlMap[p]+'">'+downPageWord+'</a></span>';eFlag++}}}if(thisNum>1){if(!isLablePage){html=''+upPageHtml+' '+html+' '}else{html=''+upPageHtml+' '+html+' '}}html='<div class="showpageArea"><span style="COLOR: #000;" class="showpageOf">('+(postNum-1)+')</span>'+html;if(thisNum<(postNum-1)){html+=downPageHtml}if(postNum==1)postNum++;html+='</div>';var pageArea=document.getElementsByName("pageArea");var blogPager=document.getElementById("blog-pager");if(postNum<=2){html=''}for(var p=0;p<pageArea.length;p++){pageArea[p].innerHTML=html}if(pageArea&&pageArea.length>0){html=''}if(blogPager){blogPager.innerHTML=html}}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&&thisUrl.indexOf(".html")==-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></body>

Change based on your blog setting :
var postperpage=5;
var numshowpage=3;

Postperpage : How many Post every Page for your blog
numshowpage : how Many number will show in Your page Navigation

I hope to gain your admiration , develop by me