Add best numbered page navigation with stylish hover effect in your blog.

Hello friends this page navigation have best hover effect and it is very stylish so add this page navigation menu in your blog and replace newer post and older post because it is not make your blog effective for your visitor.
Follow simple step to add this page navigation menu in your blogger blog ----->>>>
* First go to your blogger Dashboard.
* Now click in design tab and edit HTML.
* Click small box to expand your blogger template.
* Now find this code ]]</b:skin> by CTRL+F key from your browser.
* Copy below code and paste before ]]</b:skin>

/* -- NUMBER PAGE NAVIGATION BY BLOGGER9.COM-- */
.showpageArea {float:left;}
.showpageNum a{font:12px Arial,Verdana;padding:3px 6px;margin:0 4px;text-decoration:none;background:#6f6f6f;color:#fff;border:1px solid #39312e}
.showpageOf{margin:0 8px 0 0;color:#222;font:12px Arial,Verdana}
.showpageNum a:hover{color:#fff;background:#0282dd;border:1px solid #00558f}
.showpageArea{margin:10px 0;font:12px Arial,Verdana;color:#111}
.showpagePoint{color:#fff;padding:3px 6px;margin:2px;border:1px solid #00558f;background:#0282dd;text-decoration:none}
.showpage{padding:3px 3px;margin:0 4px;text-decoration:none;background:#6f6f6f;color:#fff;border:1px solid #39312e;font:12px Arial,Verdana}
.showpage a{text-decoration:none;color:#fff;border:0px solid 39312e;font:12px Arial,Verdana}
.showpage:hover{padding:3px 6px;margin:0 4px;text-decoration:none;background:#0282dd;color:#fff;border:1px solid #00558f;font:12px Arial,Verdana}
.showpage a:hover{text-decoration:none;background:#0282dd;color:#fff;border:0px solid #00558f;font:12px Arial,Verdana}

* After above step now find </body> by CTRL+F key .
* Now copy below code and paste before </body>

<!-- PAGE NAVIGATION BY BLOGGER9.COM-->

<script type='text/javascript'>
var pageCount=6;
var displayPageNum=3;
var upPageWord =&#39;&#171; &#39;;
var downPageWord =&#39; &#187;&#39;;
</script>
<script type='text/javascript'>
//<![CDATA[
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" style="padding: 3px 6px;margin:0 4px;text-decoration:none;font-family: Arial, Verdana;font-size: 12px;text-align:center;"><a href="/">'+upPageWord+'</a></span>'}else{upPageHtml='<span class="showpage" style="padding: 3px 6px;margin:0 4px;text-decoration:none;font-family: Arial, Verdana;font-size: 12px;text-align:center;"><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" style="padding: 3px 6px;margin:0 4px;text-decoration:none;font-family: Arial, Verdana;font-size: 12px;text-align:center;"> <a href="'+htmlMap[p]+'">'+downPageWord+'</a></span>';eFlag++}}}if(thisNum>1){html=''+upPageHtml+' '+html+' '}html='<div class="showpageArea"><span style="COLOR: #fff;background:#6f6f6f;border: 1px solid #39312e;font-size: 12px;padding:3px 6px;margin:0 4px;" class="showpageOf"> Pages '+(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" style="padding: 3px 6px;margin:0 4px;text-decoration:none;background:#6f6f6f;color:#fff; border:1px solid #39312e;font-family: Arial, Verdana;font-size: 12px;text-align:center;"><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" style="padding: 3px 6px;margin:0 4px;text-decoration:none;font-family: Arial, Verdana;font-size: 12px;"> <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: #999;" class="showpageOf"> Pages ('+(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 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>

<!-- PAGE NAVIGATION BY BLOGGER9.COM-->

* Now save your blogger template now and refresh your blog and you are now done.