Complete Solution

How to Add Page Number in Blogger to As a Widget to Navigate Page? Page number is very necessary to navigate page of blog. It make more easier to navigate site for site visitors. With page number they can easily go to their desire page. You can do it from template or widget. I think widget is more easier. Here I show it--







1. Login to your blogger account.



2. Go to Design >> Page Element.



3. Click Add Gadget and select 'HTML/Javascript'.



4. Copy and Paste below code.



<style type='text/css'><br /><br />.showpageArea a {<br />text-decoration:underline;<br />}<br />.showpageNum a {<br />border:1px solid #aeaeae;<br />margin:0 3px;<br />padding:3px 7px;<br />text-decoration:none;<br />}<br />.showpageNum a:hover {<br />background-color:#0a8be5;<br />border:1px solid #000000;<br /><br />}<br />.showpagePoint {<br />-moz-background-clip:border;<br />-moz-background-inline-policy:continuous;<br />-moz-background-origin:padding;<br />background:#aeaeae none repeat scroll 0 0;<br />border:1px solid #aeaeae;<br />color:#333333;<br />margin:0 3px;<br />padding:3px 7px;<br />text-decoration:none;<br />}<br />.showpageOf {<br />margin:0 3px 0 0;<br />padding:3px 7px;<br />text-decoration:none;<br />}<br />.showpage a {<br />border:1px solid #aeaeae;<br />padding:3px 7px;<br />text-decoration:none;<br />}<br />.showpage a:hover {<br />text-decoration:none;<br />}<br />.showpageNum a:link, .showpage a:link {<br />color:#333333;<br />text-decoration:none;<br />}<br /><br /></style><br /><br /><br /><script type='text/javascript'><br /><br />var home_page_url = location.href;<br /><br />var pageCount=1;<br />var displayPageNum=3;<br />var upPageWord ='Previous';<br />var downPageWord ='Next';<br /><br />function showpageCount(json) {<br />var thisUrl = home_page_url;<br />var htmlMap = new Array();<br />var thisNum = 1;<br />var postNum=1;<br />var itemCount = 0;<br />var fFlag = 0;<br />var eFlag = 0;<br />var html= '';<br />var upPageHtml ='';<br />var downPageHtml ='';<br /><br />for(var i=0, post; post = json.feed.entry[i]; i++) {<br /><br />var timestamp1 = post.published.$t.substring(0,19)+post.published.$t.substring(23,29);<br />timestamp = encodeURIComponent(timestamp1);<br /><br />var title = post.title.$t;<br /><br />if(title!=''){<br />if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){<br />if(thisUrl.indexOf(timestamp)!=-1 ){<br /> thisNum = postNum;<br />}<br /><br />if(title!='') postNum++;<br />htmlMap[htmlMap.length] = '/search?updated-max='+timestamp+'&max-results='+pageCount;<br />}<br />}<br />itemCount++;<br /><br />}<br /><br />for(var p =0;p< htmlMap.length;p++){<br />if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){<br />if(fFlag ==0 && p == thisNum-2){<br />if(thisNum==2){<br /> upPageHtml = '<span class="showpage"><a href="/">'+ upPageWord +'</a></span>';<br />}else{<br /> upPageHtml = '<span class="showpage"><a href="'+htmlMap[p]+'">'+ upPageWord +'</a></span>';<br />}<br /><br />fFlag++;<br />}<br /><br />if(p==(thisNum-1)){<br />html += '<span class="showpagePoint">'+thisNum+'</span>';<br />}else{<br />if(p==0){<br /> html += '<span class="showpageNum"><a href="/">1</a></span>';<br /><br />}else{<br /> html += '<span class="showpageNum"><a href="'+htmlMap[p]+'">'+ (p+1) +'</a></span>';<br />}<br />}<br /><br />if(eFlag ==0 && p == thisNum){<br />downPageHtml = '<span class="showpage"> <a href="'+htmlMap[p]+'">'+ downPageWord +'</a></span>';<br />eFlag++;<br />}<br />}<br />}<br /><br />if(thisNum>1){<br />html = ''+upPageHtml+' '+html +' ';<br />}<br /><br />html = '<div class="showpageArea"><span class="showpageOf"> Pages ('+(postNum-1)+')</span>'+html;<br /><br />if(thisNum<(postNum-1)){<br />html += downPageHtml;<br />}<br /><br />if(postNum==1) postNum++;<br />html += '</div>';<br /><br />var pageArea = document.getElementsByName("pageArea");<br />var blogPager = document.getElementById("blog-pager");<br /><br />if(postNum <= 2){<br />html ='';<br />}<br /><br />for(var p =0;p< pageArea.length;p++){<br />pageArea[p].innerHTML = html;<br />}<br /><br />if(pageArea&&pageArea.length>0){<br />html ='';<br />}<br /><br />if(blogPager){<br />blogPager.innerHTML = html;<br />}<br /><br />}<br /><br />function showpageCount2(json) {<br /><br />var thisUrl = home_page_url;<br />var htmlMap = new Array();<br />var isLablePage = thisUrl.indexOf("/search/label/")!=-1;<br />var thisLable = isLablePage ? thisUrl.substr(thisUrl.indexOf("/search/label/")+14,thisUrl.length) : "";<br />thisLable = thisLable.indexOf("?")!=-1 ? thisLable.substr(0,thisLable.indexOf("?")) : thisLable;<br />var thisNum = 1;<br />var postNum=1;<br />var itemCount = 0;<br />var fFlag = 0;<br />var eFlag = 0;<br />var html= '';<br />var upPageHtml ='';<br />var downPageHtml ='';<br /><br />var labelHtml = '<span class="showpageNum"><a href="/search/label/'+thisLable+'?&max-results='+pageCount+'">';<br />var thisUrl = home_page_url;<br /><br />for(var i=0, post; post = json.feed.entry[i]; i++) {<br /><br />var timestamp1 = post.published.$t.substring(0,19)+post.published.$t.substring(23,29);<br />timestamp = encodeURIComponent(timestamp1);<br /><br />var title = post.title.$t;<br /><br />if(title!=''){<br />if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){<br />if(thisUrl.indexOf(timestamp)!=-1 ){<br /> thisNum = postNum;<br />}<br /><br />if(title!='') postNum++;<br />htmlMap[htmlMap.length] = '/search/label/'+thisLable+'?updated-max='+timestamp+'&max-results='+pageCount;<br /><br />}<br />}<br />itemCount++;<br />}<br /><br />for(var p =0;p< htmlMap.length;p++){<br />if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){<br />if(fFlag ==0 && p == thisNum-2){<br />if(thisNum==2){<br /> upPageHtml = labelHtml + upPageWord +'</a></span>';<br />}else{<br /> upPageHtml = '<span class="showpage"><a href="'+htmlMap[p]+'">'+ upPageWord +'</a></span>';<br />}<br /><br />fFlag++;<br />}<br /><br />if(p==(thisNum-1)){<br />html += '<span class="showpagePoint">'+thisNum+'</span>';<br />}else{<br />if(p==0){<br /> html = labelHtml+'1</a></span>';<br />}else{<br /> html += '<span class="showpageNum"><a href="'+htmlMap[p]+'">'+ (p+1) +'</a></span>';<br />}<br />}<br /><br />if(eFlag ==0 && p == thisNum){<br />downPageHtml = '<span class="showpage"> <a href="'+htmlMap[p]+'">'+ downPageWord +'</a></span>';<br />eFlag++;<br />}<br />}<br />}<br /><br />if(thisNum>1){<br />if(!isLablePage){<br />html = ''+upPageHtml+' '+html +' ';<br />}else{<br />html = ''+upPageHtml+' '+html +' ';<br />}<br />}<br /><br />html = '<div class="showpageArea"><span class="showpageOf"> Pages ('+(postNum-1)+')</span>'+html;<br /><br />if(thisNum<(postNum-1)){<br />html += downPageHtml;<br />}<br /><br />if(postNum==1) postNum++;<br />html += '</div>';<br /><br />var pageArea = document.getElementsByName("pageArea");<br />var blogPager = document.getElementById("blog-pager");<br /><br />if(postNum <= 2){<br />html ='';<br />}<br /><br />for(var p =0;p< pageArea.length;p++){<br />pageArea[p].innerHTML = html;<br />}<br /><br />if(pageArea&&pageArea.length>0){<br />html ='';<br />}<br /><br />if(blogPager){<br />blogPager.innerHTML = html;<br />}<br /><br />}<br /><br /></script><br /><script type='text/javascript'><br /><br />var thisUrl = home_page_url;<br />if (thisUrl.indexOf("/search/label/")!=-1){<br />if (thisUrl.indexOf("?updated-max")!=-1){<br />var lblname1 = thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?updated-max"));<br />}else{<br />var lblname1 = thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?&max"));<br />}<br />}<br /><br />var home_page = "/";<br />if (thisUrl.indexOf("?q=")==-1){<br />if (thisUrl.indexOf("/search/label/")==-1){<br />document.write('<script src="'+home_page+'feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999" ><\/script>')<br />}else{document.write('<script src="'+home_page+'feeds/posts/full/-/'+lblname1+'?alt=json-in-script&callback=showpageCount2&max-results=99999" ><\/script>')<br />}<br />}<br /></script>




Note: Change based on your blog setting :

var pageCount=1;

var displayPageNum=3;

pageCount : How many Post every Page for your blog

displayPageNum : how Many number will show in Your page Navigation



5. Save HTML/Javascript and you are done.

Subscribe to Get Newest Articles By Email!

Follow us!