Sunday, August 12, 2012

How to add Page number in Blogger


Page number is one of the most important tool for web site navigation. It gives  your readers the opportunity of navigate the blog easily. Unfortunately blogger does not provide page number  navigation widget by default. But you can add page number to your blogger. Today I will show you how can you add page number widget to your blogger. Before that just let you know that, you can add page no. to your blogger by two ways. One is editing your blogger’s  HTML code  and another way is adding a page no. widget to your blogger’s  layout. Honestly speaking I don’t like editing HTML and it is bit difficult too. So I will show you how can you add page number to your blogger by just adding a widget. The process is very simple. Just follow the simple step…..


Go to your Blogger’s Dashboard >> Select layout >> Add a Gadget >> Choose HTML/Java Script Gadget >> Paste the code (given below) in your java script. Place the java script widget just below the post section of your blogger's layout. As simple is that.
Note: Just Reminding you; show post per page must be same to your blogger’s settings. Suppose if you select show post per page is 6 to your blogger. You have to select var pageCount 6. Otherwise it will not work properly. Here var page count by default is 5. You can choose how many post you would like show in your Blogger’s per page. Your Java Script code is given below.




<style type='text/css'>

.showpageArea a {
text-decoration:underline;
}
.showpageNum a {
border:1px solid #aeaeae;
margin:0 3px;
padding:3px 7px;
text-decoration:none;
}
.showpageNum a:hover {
background-color:#0a8be5;
border:1px solid #000000;

}
.showpagePoint {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:#aeaeae none repeat scroll 0 0;
border:1px solid #aeaeae;
color:#333333;
margin:0 3px;
padding:3px 7px;
text-decoration:none;
}
.showpageOf {
margin:0 3px 0 0;
padding:3px 7px;
text-decoration:none;
}
.showpage a {
border:1px solid #aeaeae;
padding:3px 7px;
text-decoration:none;
}
.showpage a:hover {
text-decoration:none;
}
.showpageNum a:link, .showpage a:link {
color:#333333;
text-decoration:none;
}

</style>


<script type='text/javascript'>

var home_page_url = location.href;

var pageCount=5;
var displayPageNum=3;
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  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  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>
<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){
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>


40 comments:

  1. A family member linked me to this resource.

    Thanks for the information.
    Also see my site: Remove Decals

    ReplyDelete
  2. This is the third time I've been to your website. Thank you for posting more details.
    Check out my web site ... Belleville Washers

    ReplyDelete
  3. I dont seem to be able to make it work. I set my blogger post per page to 5 as in the default in the code but all I get on the page is either the title that I have the add html and no page numbers. Somewhere I think I must be missing something. Any further suggestions is greatly appreciate. thanks,

    ReplyDelete
    Replies
    1. After your comment I have added this java script to my other blog and it works fine. Make sure you follow this above instruction properly....and don't forget to put this java script widget right under your post section of your blogger's layout.thanks...

      Delete
    2. No on some blogs, the numbered page thing just does not work I have tried probably 100 different codes and many different ways of doing it and it just doesn't work at all.

      Delete
  4. It,s work in my page,,
    Great!
    Thanks a lot

    ReplyDelete
  5. Really nice work :)

    but how to add page numbering in blog pages ? its shown on main index only..

    my blog: http://www.cyber-expertz.net

    ReplyDelete
  6. Ap ka Blog Bht Acha hai! the no.1 blog on the internet in my lists

    ReplyDelete
  7. Thanks for your great post , the above given code works for home page only but not in Labels.

    Check out my blog Tech Capsule

    ReplyDelete
  8. Hi,

    The code does display the page numbers but they are not activated. I mean I can't click on them. Kindly help.

    Thanks,
    Deepti.

    ReplyDelete
    Replies
    1. Just after your comment I have tried this gadget to one of my blog n it's works fine. Please follow the above instruction properly & cheak it from other browser. Thanks..

      Delete
  9. Its working.
    but how to add page numbering in blog pages ? its shown on main index only..pls help..
    this is my mail ID mohanraj.leo93@gmail.com

    ReplyDelete
    Replies
    1. Page no. widget will work on home page & levels only.It will not work on pages.That's why You should use levels on your blog/website instated of pages.Thanks....

      Delete
  10. hi
    http://boulevard-template.blogspot.com/
    https://www.box.com/s/634ca23c42abf6c1412a.....

    i want to add facebook like and add page numbering in all blog pages...
    can u edit and sent to my mail..this is my mail id bharanibepsg@gmail.com...pls....

    ReplyDelete
  11. how to add fb likes in blogger...............

    ReplyDelete
  12. This comment has been removed by the author.

    ReplyDelete
  13. when a comment is given in my website it doesn't get added

    ReplyDelete
  14. Thanks so much!! I've been wanting this for sooo long.. (:

    ReplyDelete
  15. It's work !
    Thanks Rasel Ahmed for your sharing (y)
    My site http://razakpark.blogspot.com is look better now,

    ReplyDelete
  16. Hum, Gud post... Ty so much...
    http://www.itechaleart.com/ ,for Android update & Tech news.

    ReplyDelete
  17. thanks
    my blog http://hinditech4u.blogspot.in/

    ReplyDelete
  18. Hi how to add facebook like button on blog spot...

    ReplyDelete
  19. Thanks Rasel for page no. script.. can you please let us know how to configure levels instead of pages?? thanks in advance..

    ReplyDelete
  20. Thanks a lot for this useful tip. Loving it!! Just wanted to know that can we change the colors of this gadget according to our liking? and how to do that?

    ReplyDelete
  21. Really useful...

    http://www.englishsmsquotes.com/

    ReplyDelete
  22. as salam o alaekum'
    Rasel ahmed sb ap ki help chaeae wo yeh k mei ne blogger banaea hai but pages mein post nahi ho rahi plz plz plz plz plz plz plz plz pl plz plz......help me help....
    mujhe umeed hai ap meri help zaroor kro ge.....

    ReplyDelete
  23. Good post...

    http://www.itechaleart.com/

    ReplyDelete
  24. How didi you make different pages tab like blogging education.....

    ReplyDelete
  25. this is nice but i found out that this page navigation actually missed out some posts. When i tried to navigate, some of my posts are missing when i click next page or the next number page.

    ReplyDelete
  26. This comment has been removed by the author.

    ReplyDelete
  27. Thanks sir, it's really helpful. I have applied it in "http://crickettipsandtutorialhowto.blogspot.com

    ReplyDelete

Recommended Post Slide Out For Blogger

Infolinks In Text Ads