Numbered Page Navigation For Blogger

Page numbered widget makes visitors easy to navigate the pages in your blog it look nice as shown in below image.

Lets see how to add this widget....

Follow below steps how to install it :-

Login To Your Blogger And Then Click On Settings And Navigate To Layout Section.

Then Click On Add Page Element.


A new Window Will Open in Which Select Add Html/Javascript.
It will ask For Javascript.

Now Copy The Whole Javascript Below And Paste in it.


<style>



.showpageArea a {



text-decoration:underline;



}



.showpageNum a {



font-weight: bold;



text-decoration:none;



border: 1px solid #000;



background-color:#fff;



margin:0 3px;



padding:3px;



}



.showpageNum a:hover {



border: 1px solid #000;



background-color:#057BD3;



}



.showpagePoint {



color:#fff;



font-weight: bold;



text-decoration:blink;



border: 1px solid #000;



background: #057BD3;



margin:0 3px;



padding:3px;



}



.showpageOf {



text-decoration:none;



padding:3px;



margin: 0 3px 0 0;



}



.showpage a {



text-decoration:none;



border: 1px solid #000;



padding:3px;



}



.showpage a:hover {



text-decoration:none;



}



.showpageNum a:link,.showpage a:link {



text-decoration:none;



color:#333;



}





</style>











<script type="text/javascript">





function showpageCount(json) {



var thisUrl = location.href;



var htmlMap = new Array();



var isFirstPage = thisUrl.substring(thisUrl.length-14,thisUrl.length)==".blogspot.com/";



var isLablePage = thisUrl.indexOf("/search/label/")!=-1;



var isPage = thisUrl.indexOf("/search?updated")!=-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 pageCount=10;



var displayPageNum=3;



var firstPageWord = 'First';



var endPageWord = 'Last';



var upPageWord ='Previous';



var downPageWord ='Next';











var labelHtml = '<span class="showpageNum"><a href="/search/label/'+thisLable+'?&max-results='+pageCount+'">';





for(var i=0, post; post = json.feed.entry[i]; i++) {



var timestamp = post.published.$t.substr(0,10);



var title = post.title.$t;



if(isLablePage){



if(title!=''){



if(post.category){



for(var c=0, post_category; post_category = post.category[c]; c++) {



if(encodeURIComponent(post_category.term)==thisLable){



if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){



if(thisUrl.indexOf(timestamp)!=-1 ){



thisNum = postNum;



}





postNum++;



htmlMap[htmlMap.length] = '/search/label/'+thisLable+'?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;



}



}



}



}//end if(post.category){





itemCount++;



}





}else{



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+'T00%3A00%3A00%2B08%3A00&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){



if(isLablePage){



upPageHtml = labelHtml + upPageWord +'</a></span>';



}else{



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"><u>'+thisNum+'</u></span>';



}else{



if(p==0){



if(isLablePage){



html = labelHtml+'1</a></span>';



}else{



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++;



}



}//end if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){



}//end for(var p =0;p< htmlMap.length;p++){





if(thisNum>1){



if(!isLablePage){



html = '<span class="showpage"><a href="/">'+ firstPageWord +' </a></span>'+upPageHtml+' '+html +' ';



}else{



html = ''+labelHtml + firstPageWord +' </a></span>'+upPageHtml+' '+html +' ';



}



}





html = '<div class="showpageArea"><span style="padding: 2px 4px 2px 4px;margin: 2px 2px 2px 2px;border: 1px solid #333; background-" class="showpage">Page '+thisNum+' of '+(postNum-1)+': </span>'+html;





if(thisNum<(postNum-1)){



html += downPageHtml;



html += '<span class="showpage"><a href="'+htmlMap[htmlMap.length-1]+'"> '+endPageWord+'</a></span>';



}





if(postNum==1) postNum++;



html += '</div>';





if(isPage || isFirstPage || isLablePage){



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>





<script src="http://YourBlogName.blogspot.com/feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999" type="text/javascript"></script>

<spam><a href="http://rilwanblog.blogspot.com/2009/10/numbered-page-navigation-for-blogger.html" target="_blanck">Grab This</a></sapm>




Page Navigation Menu Widget



In the above code you can edit the below lines into your wish .

1 : var pageCount = 10;

The digit in red represents number of posts to be shown in single page. Change the digit to show as many pages you want.


2 : var displayPageNum = 3;

here the digit in red represents number of pages to be listed.


3.YourBlogName.blogsopt.com is replace with blog url.

Now save your template .

2 comments :

sasikumar said...

it's not working please help me .... http://indiawire.blogspot.com/

Anderson said...

Thanks man it finally worked and it looks great :)

Post a Comment