Add hover style numbered page navigation in blogger.

Hello friends now add this special hover style numbered page navigation in blogger blog.

Follow simple and easy step to adding this numbered page navigation in blogger ---->>>> * First go to your blogger Dashboard.

* Now click in design tab and edit HTML.

* Click in small box to expand your blogger template.

* Now find this code ]]</b:skin> by CTRL+F key.

* Copy below codde and paste before ]]</b:skin>

/*----------NAV PAGE------------*/
.showpageArea {
font-family:verdana,arial,helvetica;
color: #000;
font-size:11px;
margin:10px;
}
.showpageArea a {
color: #fff;
}
.showpageNum a {
padding: 3px 8px;
margin:0 4px;
text-decoration: none;
background: #333 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeOj2xB6T4qmFyZSnFJYyzjep2R9wC_XDhYZ437pwzJ3eXSIKwZAwJfyH3vjoqH8NyBRrfg_wWN-4C6NcqbWky-NIIHAG1P3Qzt82BNDiAh2JWtGRvOBF2hgoHdDTUaQsGq93qlN6rZdA/s1600/wp5.jpg) 0 -50px repeat-x;
}
.showpageNum a:hover {
background: #666 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeOj2xB6T4qmFyZSnFJYyzjep2R9wC_XDhYZ437pwzJ3eXSIKwZAwJfyH3vjoqH8NyBRrfg_wWN-4C6NcqbWky-NIIHAG1P3Qzt82BNDiAh2JWtGRvOBF2hgoHdDTUaQsGq93qlN6rZdA/s1600/wp5.jpg) 0 -25px repeat-x;
}
.showpagePoint {
color:#fff;
padding: 3px 8px;
margin: 2px;
font-weight: 700;
background: #06a2b9 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeOj2xB6T4qmFyZSnFJYyzjep2R9wC_XDhYZ437pwzJ3eXSIKwZAwJfyH3vjoqH8NyBRrfg_wWN-4C6NcqbWky-NIIHAG1P3Qzt82BNDiAh2JWtGRvOBF2hgoHdDTUaQsGq93qlN6rZdA/s1600/wp5.jpg) 0 0 repeat-x;
text-decoration: none;
}
.showpageOf{
margin:0 8px 0 0;
}

* Now again find this code </head> by CTRL+F key .

* Copy below code and paste before </head>

<script type='text/javascript'>

var home_page_url = location.href; 


var pageCount=10;
  var displayPageNum=6;
  var upPageWord ='Previous';
  var downPageWord ='Next';


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"> 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"><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"> 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;
  }


}
</script>

* Again find this code </body> by CTRL+F key .

* Copy below code and paste before </body>

<script type='text/javascript'>

 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>

* Now click to save your blogger Template now you are done.