Add hover style numbered page navigation in blogger. 1

Anil Kumar Singh | 11:12 AM | , ,

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

PREVIEW:-




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/AVvXsEjVyP9jK9qdkfhJrWWDZrEzgqMdTCBoD4WRW6r3zsfG2ebYSJfczYLjOwdza92_enRCSwtRz-saGFZoi3aNpxpjm_Y5VtEqQfbiLCGvqFrjzImC5Lrn4R4t7uVbeNBliqCZTske1-Dn9WI/s1600/wp5.jpg) 0 -50px repeat-x;
}
.showpageNum a:hover {
background: #666 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVyP9jK9qdkfhJrWWDZrEzgqMdTCBoD4WRW6r3zsfG2ebYSJfczYLjOwdza92_enRCSwtRz-saGFZoi3aNpxpjm_Y5VtEqQfbiLCGvqFrjzImC5Lrn4R4t7uVbeNBliqCZTske1-Dn9WI/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/AVvXsEjVyP9jK9qdkfhJrWWDZrEzgqMdTCBoD4WRW6r3zsfG2ebYSJfczYLjOwdza92_enRCSwtRz-saGFZoi3aNpxpjm_Y5VtEqQfbiLCGvqFrjzImC5Lrn4R4t7uVbeNBliqCZTske1-Dn9WI/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.

StumpleUpon DiggIt! Del.icio.us Blinklist Yahoo Furl Technorati Simpy Spurl Reddit Google I'm reading: Add hover style numbered page navigation in blogger. ~ Twitter FaceBook

1 Responses So Far:

Anonymous said...

thanks so much

Reply June 19, 2012 at 11:15 PM

Categories

Select Your Categories