Saturday, December 7

Blogger Pagination

If you are running your own blog you must be knowing that on your blog home page there is a link after the post saying "Older Posts" for something similar to it. On some of the other posts it might display both "Newer posts" and "Older Posts".
Well wouldn't it be wonderful for the us to display post number instead of these above pages. There is a simple single code to display it in blogger.

Add the code given below to the blogger's html view, where ever you want the navigation to appear.
<style>
 .showpageArea {
	padding: 0 2px;margin-top:10px;margin-bottom:10px;
}

.showpageArea a {
	border: 1px solid #505050;
	color: #000000;font-weight:normal;
	padding: 3px 6px !important;
	padding: 1px 4px ;margin:0px 4px;
	text-decoration: none;
}

.showpageArea a:hover {
	font-size:11px;
	border: 1px solid #333;
	color: #000000;
	background-color: #FFFFFF;
}

.showpageNum a {
    border: 1px solid #505050;
    color: #000000;font-weight:normal;
    padding: 3px 6px !important;
    padding: 1px 4px ;margin:0px 4px;
    text-decoration: none;
}

.showpageNum a:hover {
    font-size:11px;
    border: 1px solid #333;
    color: #000000;
    background-color: #FFFFFF;
}

.showpagePoint {
    font-size:11px;
    padding: 2px 4px 2px 4px;
    margin: 2px;
    font-weight: bold;
    border: 1px solid #333;
    color: #fff;
    background-color: #000000;
}

.showpage a:hover {
    font-size:11px;
    border: 1px solid #333;
    color: #000000;
    background-color: #FFFFFF;
}

.showpageNum a:link,.showpage a:link {
    font-size:11px;
    padding: 2px 4px 2px 4px;
    margin: 2px;
    text-decoration: none;
    border: 1px solid #0066cc;
    color: #0066cc;
    background-color: #FFFFFF;
}

.showpageNum a:hover {
    font-size:11px;
    border: 1px solid #333;
    color: #000000;
    background-color: #FFFFFF;
}

</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=5;
		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 += ‘&nbsp;<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=”font-size:11px;padding: 2px 4px 2px 4px;margin: 2px 2px 2px 2px;color: #000000;border: 1px solid #333; background-color: #FFFFFF;” 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=”/feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999? type=”text/javascript”></script> 

If you cannot directly copy and paste the code in the blogger html you can try to convert to blogger compatible code from the XML Code Converter

No comments:

Post a Comment

Comment anything you want. Just be polite and give respect to others!
I am simply going to remove the comments which are offensive or are off topic.
And please don't spam your website links in comments. I don't, neither should you.