Numbered Page Navigation For Blogger

Page Navigation is a really awesome and long awaited feature. You might have seen numbered page navigation on many wordpress blogs(wp-pagenavi by Lester Chan). Muhammad Rias of Techie Blogger had already developed a page navigation system for blogger.It really was an awesome trick which was made at a time when nobody could even think of implementing it on blogger.It had some minor bugs and now Abu Farhan has perfected it and he has now given us the perfect page navigation solution.Here is a little screenshot of what this is all about. blogger page navigation

When you use this hack,you will see this kind of navigation on your blog’s home page and label pages(needs little customization).

Implementation of Blogger Page Navigation

Those who are bad at HTML modifications can use my one click installer :)

Add Recent Posts Widget 

After installing this widget proceed to the label fix.

The Complex Method. :P

If you installed the widget you shouldn’t be here.. Scroll down to the label fix.

1.Login to Blogger Dashboard and navigate to Layout > Edit Html

2.Don’t click the checkbox which says ‘Expand Widget Templates’

3.Now find

]]></b:skin>

and replace it with

.showpageArea a {
text-decoration:underline;
}
.showpageNum a {
text-decoration:none;
border: 1px solid #cccccc;
margin:0 3px;
padding:3px;
}
.showpageNum a:hover {
border: 1px solid #cccccc;
background-color:#cccccc;
}
.showpagePoint {
color:#333;
text-decoration:none;
border: 1px solid #cccccc;
background: #cccccc;
margin:0 3px;
padding:3px;
}
.showpageOf {
text-decoration:none;
padding:3px;
margin: 0 3px 0 0;
}
.showpage a {
text-decoration:none;
border: 1px solid #cccccc;
padding:3px;
}
.showpage a:hover {
text-decoration:none;
}
.showpageNum a:link,.showpage a:link {
text-decoration:none;
color:#333333;
}
]]></b:skin>

This is the CSS part which defines the look and feel of the page navigation.You can modify it according to your need

4.Next is the JavaScript part. Find

</body>

and replace it with

<!--Page Navigation Starts-->
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<script type='text/javascript'>
var pageCount=5;
var displayPageNum=5;
var upPageWord =&#39;Previous&#39;;
var downPageWord =&#39;Next&#39;;
</script>
<script src='http://bloggergadgets.googlecode.com/files/blogger_pagenavi_min.js' type='text/javascript'/>
</b:if>
</b:if>
<!--Page Navigation Ends -->
</body>

As you can see,there are some customizable parameters in this code

var pageCount=5;

This code determines the number of posts that would be displayed per page.

var displayPageNum=5;

This code determines the number of additional page navigation numbers that will be displayed on the page.

var upPageWord =&#39;Previous&#39;;
var downPageWord =&#39;Next&#39;;

These two lines determine the text that would be shown for the previous page and next page respectively.

Label Fix

Now we have another problem.By default,the blogger label pages will show 20 posts.We will have to cut this down to the value that we gave for the variable pageCount (or the posts per page).For this we will have to edit our template

How to Edit the template to cut short the posts per page?

Go to the Edit HTML page and expand the Widget Templates

Now find each occurrence of

'data:label.url'

(including the quotes) and replace each of it with

'data:label.url + &quot;?&amp;max-results=5&quot;'

Here 5 is the number of posts to be displayed per page.

Now if you are using the label cloud widget by phydeaux3,then find

a.href = &#39;/search/label/&#39;+encodeURIComponent(t);

and replace it with

a.href = &#39;/search/label/&#39;+encodeURIComponent(t)+&#39;?&amp;max-results=5&#39;;

 

Here also 5 is the number of posts to be displayed per page.

Now you should have the Blogger Page Navigation working perfectly on your blog. :)

This tutorial is based on Codes from Abu Farhan and Muhammad Rias. So if you plan to write this tutorial on your blog,do link back to them also.

Permalink: Numbered Page Navigation For Blogger

Update 30/03/2012  : If Page Navi is not working, change http://blogergadgets.googlecode.com/files/blogger-page-navi.v1.js to http://bloggergadgets.googlecode.com/files/blogger_pagenavi_min.js

475 comments :

  1. dude nothing works..
    http://www.mobilesoftzz.co.cc

    ReplyDelete
  2. @Shrinath
    i don't see the page navigation code in your blog..

    ReplyDelete
  3. Hi Aneesh,

    I was waiting for this hack since long.

    Thanks a lot :)

    ReplyDelete
  4. It's working great.You can see it on my blog
    www.hacks-mk.blogspot.com

    ReplyDelete
  5. comment ça marche ??

    ReplyDelete
  6. show a demo, if it works...

    ReplyDelete
  7. @Anonymous ,
    you can see the demo on my label pages.. I have disabled it on my home page

    See ,

    ReplyDelete
  8. @♥Willa♥
    you are welcome!
    but you forgot to do the label fix..

    ReplyDelete
  9. Really good one. Definitely gonna make use of it.

    ReplyDelete
  10. Following the second method (complex one), after adding second code, i m getting XML error.

    When first method is used, the widget does not properly placed.

    Plz Help !!!

    ReplyDelete
  11. @Ms Hetal Patil , did step 3 give any error?
    and did you replace </body> in step 4

    btw the widget and the other one will place the navigation at the same place..

    ReplyDelete
  12. Yeah step 3 was perfect, but after going on fourth step to replace body tag, it is showing error.

    ReplyDelete
  13. @Ms Hetal Patil ,
    there was a missing hyphen when i updated the post last time..
    fixed it now.. :)

    ReplyDelete
  14. still it showing this error : Your template could not be parsed as it is not well-formed. Please make sure that all XML elements are closed properly.
    XML error message: XML document structures must start and end within the same entity.

    ReplyDelete
  15. @Ms Hetal Patil ,
    refresh the tutorial page and try again..

    ReplyDelete
  16. It is working fine, but CSS effects are not visible. http://shirdisaibababhajan.blogspot.com/

    ReplyDelete
  17. @Ms Hetal Patil,
    that is because you didn't add the CSS part properly.

    ReplyDelete
  18. i again placed CSS but still it is not working fine :(

    ReplyDelete
  19. not works in my blog.. - http://hot-current-news-trends.blogspot.com/

    please help

    ReplyDelete
  20. @Ms Hetal Patil ,
    as i said earlier. You haven't placed the CSS properly. CSS means every code in step 3 excluding the last line. This CSS is now placed near some javascript codes.

    place the code at the right place..
    If you still can't figure out where to place,then paste the code of step 3(excluding the last line) above
    #newnavbar ul li{
    in your template

    ReplyDelete
  21. Thanks
    I was waiting for this hack since long.
    See http://fonts-guru.blogspot.com/

    ReplyDelete
  22. It is working for me now. Thanks a lot for your help.

    ReplyDelete
  23. @hcnt ,
    your blogs blog pager, the defult blogger one is hidden using some CSS rules in your template. So the page navi is hidden. You will have to remove the CSS rules used for hiding the blog pager.

    #blog-pager {
    text-align: center;
    display:none;
    }

    remove the line display:none; so that it looks like

    #blog-pager {
    text-align: center;
    }
    @Ms Hetal Patil ,
    you are welcome. :)

    ReplyDelete
  24. it's not working in my site. plz help me.
    my site is http://sanguine-ctg.blogspot.com/

    ReplyDelete
  25. hi,
    it's din't worked so removed..pls help me..
    i really need it..i hv lot of posts..pls help me..

    get my templete here

    http://sites.google.com/site/shriuploads/templat.xml

    i'l b waitin fr ur repl..
    thank you..

    shrinath.gongani@gmail.com

    ReplyDelete
  26. even the label showing error with the templt.when we browse through label's the older n newer post link will be disappear.
    pls kindy fix the bug..
    i wil b very thankful to you..

    ReplyDelete
  27. @guru,
    your blog has a template with many things removed. The blogger's default page navigation is located in a div with id 'blog-pager' but your template misses it..So this script is not able to locate where it should place the page navi.. and so it fails..So if you want it to waork you should enclose the olderpage and newer page links withn a div with id blog-pager

    @Shrinath,
    yours is also a similar problem.. Your template uses a div with class navigation instead of blog-pager So if you change that to blog-pager,it will work

    ReplyDelete
  28. hi Aneesh,
    thank you for replying but I not understood the actual problem.what is the blog pager.R u telling to change the template?

    ReplyDelete
  29. @Shrinath ,
    yesi am talking of editing your template so that it follows the basic structure of a normal blogger template.

    in your template,
    there are two lines like
    .navigation {
    change both of them to
    .blog-pager {
    then there is this line in your template
    <div class='navigation'>
    change it to
    <div class='blog-pager' id='blog-pager'>

    and then follow my page navi tutorial on this post..

    ReplyDelete
  30. hi Aneesh,

    u r excellent,genius,..
    thanks yar..it worked..
    thanks for helping..

    ReplyDelete
  31. hi,
    Aneesh,if u don't mind pls can u fix the label bug?
    after limiting label to particular posts consider 2 or 4 ,the previous next tab wil disappear and further unable to get remaining posts in same label.
    please...

    ReplyDelete
  32. @Shrinath
    show me a label page link which you are talking of.

    ReplyDelete
  33. just for reference see this blog.i use dis blog for test..
    http://premium-rapidshare-id.blogspot.com

    look at Labels
    i made limit of 1 post per page..and wen we use through labels or search
    d next n prev tab get invisible..

    and even if we not put any post limit,it shows only 20posts n nxt prev tab get hide.

    ReplyDelete
  34. @Shrinath ,
    yes it will show 20 posts per page..Thats why i have mentioned the label fix..

    This one appends a ?&max-results=number_of_posts to every label url in the blog.. Which means that you can limit the posts per page..
    for example see this page which limits the posts to 3
    http://premium-rapidshare-id.blogspot.com/search/label/test??&max-results=3

    BTW your template is malformed and it does not have the default blog pager(Previous and Next Links) on label pages.Thats why page navi ddoesn't show up(page navi finds the next and prev links and replaces it with pagination.. but its not present .. so it can't replace) on the link that i mentioned above.. You will need to fix your template..

    ReplyDelete
  35. actually its a wordpress template n converted to blogger temp.i tried but it does'n get fixed label error,showing the same..
    anyways thanks bro,

    ReplyDelete
  36. @Shrinath ,
    if you use that template and if a label has more than 20 posts,your readers wont be able to navigate to the 21st post under that label.(even if you don't use page navi)

    ReplyDelete
  37. ya that's the actual problem.
    now the one n only soln is to change d template.. :-)

    ReplyDelete
  38. @Shrinath ,
    there is actually a simple fix but you may loose some of the customizations on the template(sometimes you may not loose any :) )..

    So its worth testing it on your test blog..Just goto template edit html and revert widget templates to default.. It will clean up the widget codes to give you a neater code..Now you should see the previous and next links properly..Try Page Navi again on that template and it should work properly..

    ReplyDelete
  39. ya i did it..
    have a look @ http://premium-rapidshare-id.blogspot.com

    its showing..
    but newerPosts Home olderposts are joined..

    :-)

    ReplyDelete
  40. that is probably because you have
    .navigation {
    instead of
    .blog-pager {
    BTW now you are using the original techie blogger version..It has a little bug(posts made on same day will get missing) and Rias hasn't updated that post.. So it would be better to use the newer version from Abu Farhan's blog or from here..

    ReplyDelete
  41. i have fixed it..now hav a look at that rapidsh blog..

    now i will upload it to my original blog

    http://www.mobilesoftzz.co.cc

    thank you..
    good night.. :)

    ReplyDelete
  42. Wow. Thanks so much. I had previously used the first version, but this version is so much simpler and more versatile. Thanks again.

    ReplyDelete
  43. hi aneesh..
    fixed all bug..now my blog is looking superb :)

    just see
    http://www.mobilesoftzz.co.cc

    thank you..

    ReplyDelete
  44. comment ça marche ??

    ReplyDelete
  45. i am trying it in my another site but it is not working. please help me
    http://blogger-designz.blogspot.com/

    ReplyDelete
  46. first of all your blog feed has some problem
    http://blogger-designz.blogspot.com/feeds/posts/default

    it shows a single post and that too with some probs..

    And by the way how can you expect navigation to work on a blog with 3 posts ?? and if you make many test posts at the same minute,then also this wont work.. This script doesnt expect different posts at the same minute..

    ReplyDelete
  47. thnx for ur reply . i have made about 10 posts of different times. and i am yet to see navigation bar. how many posts i have to make to see it. i have formatted from my dashboard of showing 3 posts per page. will it make any problem?
    http://blogger-designz.blogspot.com/

    ReplyDelete
  48. Hi aneesh,
    I found one small error with my navigation :)
    navigation works perfect,but every 2nd post get skipped..
    ex-from my blog select computer category..there are 2 posts but shows only one n 2nd page shows blank.
    pls kindly help:-)

    http://www.mobilesoftzz.co.cc

    ReplyDelete
  49. @Guru,
    your post feed has some problem see http://blogger-designz.blogspot.com/feeds/posts/default

    @Shrinath,
    i will look into it..

    ReplyDelete
  50. can you try with 2 posts per page?

    ReplyDelete
  51. ya tried..
    but got the same error..
    2nd post skipped to 3rd..

    ReplyDelete
  52. Great Post !!! Blogger Plugins the Best and Nice Work

    ReplyDelete
  53. Please solve the error.
    please.....

    ReplyDelete
  54. hi..your trick is the best of all..it worked fine..

    but the problem is that after replacing all "'data:label.url'" i am getting 20 posts on a page...

    Reply
    Thanks...

    ReplyDelete
  55. @prashant,
    you have tweaked the template properly and i see that the tweak has now appended an ?&max-results=5 so that label pages will show only 5 per page.. But if some one manually enter your long label page url manually(without clicking the label links on your site),then it will display 20 per page and wont display page navi. I don't think anyone will do like that

    ReplyDelete
  56. I think my problem is harder to solve..

    ReplyDelete
  57. Thank you very much it works in my blog... but i can't do label fix, help me please

    ReplyDelete
  58. @Lana,
    do you use labels?? The label fix is for tweaking all existing label links on your blog.. This fix will append a max-results=something to every label link on the blog to restrict the number of posts on label pages..If you don't use labels or if you don't have any label links on your blog,then there is no need to do this fix..

    ReplyDelete
  59. not working for me.
    http://mahaprasad.blogspot.com/
    please help.

    ReplyDelete
  60. is it the error with Timestamp Format?
    or error in template code.
    the last tab shows empty..
    please tell something..
    I tried to find the error @last night(full) :))
    but got zero result:))

    I sure you will fix the error.

    ReplyDelete
  61. @Shrinath ,
    give me some time.. i am little busy with a new design for this blog.. will try to fix your issue soon(if its possible).Leave me your google talk id using the contact form at the top menu..

    ReplyDelete
  62. I tried with other template also n even I checked for original blogger templates,
    I saw the same error.
    I think its not fault with template.

    ReplyDelete
  63. @Shrinath,
    in that code try changing blogger-page-navi.v1.js to blogger-page-navi.v2.js

    This is Abu Farhan's fix and it should work..

    ReplyDelete
  64. WOW...
    Its fixed..
    it was error with java script..
    THANK YOU SO MUCH...
    Thanks again
    :-)

    ReplyDelete
  65. say your thanks to Abu and not to me.. :)

    ReplyDelete
  66. but caused to Recent Posts..
    showing white strip..

    ReplyDelete
  67. @Shrinath ,
    use the widget version of that gadget using method 2 specified here.

    ReplyDelete
  68. Really you are doing great job..:))
    keep up..

    ReplyDelete
  69. @Aneesh
    I didn't understood...can u tell me in details...check out my site is http://www.prashdownload.com/

    ReplyDelete
  70. Hi Aneesh..how are doing..i hope every thing good..!!!
    Well i pop in to thank you for that stuning hacks.. not long a go i was about to ask you .. of it.. but i felt shye to do it,, kkkkk and for my surpise ... you just once more you done ti for us.. and i hope and wish all the best for... and thank for the index... my blog in you other directory.... and will for sure link it back but if you dont mind i prefer to link back the blogger plugins .. if think is it more usefull for my readers....cheers...thank for all Aneesh !!!!!

    ReplyDelete
  71. its not working plzz help me how to try this

    www.vijayendra57.blogspot.com

    ReplyDelete
  72. Ok....thank buddy.
    I was tried it and it's really working in my place.
    www.bloggertemplateplace.com

    ReplyDelete
  73. This only displays 51 pages which is not even half of my blog posts. Any idea how I could get it to be able to go past 51 pages?

    ReplyDelete
  74. @Andrew ,
    yes you are right..By default blogger feeds display only latest 500 posts.. That why it stops there. Will fix that and will let you know.

    ReplyDelete
  75. Thank you, Aneesh, I'll be waiting for an update

    ReplyDelete
  76. i have corrected my feed. would u plz go to my site ans help me.
    http://blogger-designz.blogspot.com/

    ReplyDelete
  77. Hi,Aneesh. This numbered page navigation do not work under custom domain when display with internet explorer 8 but it work with firefox 3.5. You can view my website http://j-cutie.com

    Is there anything I need to edit the codes o it work with Internet explorer 8?

    ReplyDelete
  78. Hi Aneesh, is me again Nathan. I also have tried to view your blog under IE8 and it also have the problem, the page navigation do not display. So please fix this. Thanks.

    ReplyDelete
  79. thx. so much for the excellent tutorial... Really appreciate it!

    ReplyDelete
  80. Thank you. I have added it to my Blog and it works on the frontpage, but i didn't get it on the lables pages. The lable fix works, there are only 5 posts showed now, but the numbers are missing.

    ReplyDelete
  81. aneesh I got it to work on my blog, and replaced the code for the labels..
    but the labels are not working

    http://greenlivingpro.blogspot.com

    lend me a helping hand? :)

    ReplyDelete
  82. aneesh, I commented a while ago.. I figured out why the labels fix does not work, its because of my template. The same fix works on another template. However, because I dont have the technical knowledge, I cant fix it. You have the expertise, you think you can figure out some fix? Maybe some code has to be removed, or added..

    ReplyDelete
  83. No use of pix..........working fine by simply using widget

    TFS :-)

    See it :-> http://windowxp09.blogspot.com/

    ReplyDelete
  84. Why doesn't number navigation seem on my blogger page when i click a LABEL ?
    In homepage, its ok. But when i click a label, it goes!

    I couldn't do it.
    Please help me.
    Thanks.

    http://www.kelimelerbenim.com
    sezeriltekin@gmail.com

    ReplyDelete
  85. Thanks,to all,its working with mozilla but not with IE 8,however doesn't working with posts under labels,working only with posts on main menu, any idea to fix thats?
    Thanks yah..

    ReplyDelete
  86. It worked great, very easy. Thanks so much!

    ReplyDelete
  87. it does not work i dont know why? i have done every thing how u said to do.............see www.desicracks.blogspot.com it dsnt work.............plz help...

    ReplyDelete
  88. Excellent MERCI pour votre travail

    ReplyDelete
  89. help, how do I delete this widget?, I installed it on using the one click installer , now i do not know how to delete it, ...

    ReplyDelete
  90. @alexiel,
    got the layout page and find the appropriate page element and remove it(Edit Widget >Remove)

    ReplyDelete
  91. Hi there,
    can you tell me why it is not working on my site..

    My site: http://www.prashdownload.com/

    Pls reply....

    ReplyDelete
  92. Thank for your works... Page navigation is an important tool for my blog.

    Best Regard
    One-4-All

    ReplyDelete
  93. Hi, I tested using One Click. I have total 2,000 posts or 333 pages(6 posts per page) but it only shows 84 pages, around 504 posts only. How to make it shows actual no. of posts?

    Another suggestion, can it be added "Last Page" instead of clicking one-by-one until the last page?

    Thanks so much for this cool widget.

    ReplyDelete
  94. hi there..
    i solved the problem of my site Prashdownload.com. it was same as srinath's problem...but i want to ask that i want to add a small image in the background of that widget can you tell me how can i add that image...

    ReplyDelete
  95. why i cant add this item to my blog ?? can anybody fix it ??

    ReplyDelete
  96. tidak berhasil saya.......gimana caranya...ya
    http://otoyyasin.blogspot.com

    ReplyDelete
  97. Thanks! i've added to my blog
    www.hclmelaptop.blogspot.com

    ReplyDelete
  98. I have been able to install nav tab in front page but in the label page it is not working. I didnt find your hacks like "a.href = '/search/label/'+encodeURIComponent(t);" in my template though it was broaden. How to solve it? Help me plz

    ReplyDelete
  99. Getting it on my blog was as easy as an eye wink. Thanks very much.

    ReplyDelete
  100. Thanks, tips and triks

    ReplyDelete
  101. Ok tab is working on my site. The label pages also have been limited to my expected numbers in post. But the nav icon is not showing on label page. How i will go the next set of post in label page? Please ans it.

    ReplyDelete
  102. Doesn't work for my blog though. I hope we'll get a better one from you soon :) love your work. I've already used one of your code for related posts ;)

    ReplyDelete
  103. ah yes - the great Abu Farhan , he finally did it . The diff I believe is the var unpage Up & Down which should make most of the difference , I have the original script on my other blog MiaZoe.com , I had customized it a bit, but I havent had much time lately to go in and do the modification it requires. I had discussed it with Abu , but I wont tell him I havent gotten around to it yet - shhh....:))
    Ok, lets see if you can figure out the " Bumpbox" Mootools script now :)) catch you in cyberspace :)

    ReplyDelete
  104. not working in my blog ,I did with "one click installer"
    when I installed with 2nd method showing xml errors


    check once :http://demo123blog.blogspot.com/

    ReplyDelete
  105. thx man. for useful widget.
    there's only one problem occuring with labels. I have done the label fix method but it is showing 20 posts in the labels but it is working fine when i click on the older posts.Plz tell what is problem there.?

    ReplyDelete
  106. Thanks for the useful post....
    i added it in my page
    http://freeindiansms.blogspot.com its looking cool....
    the thing is i would like to add images in page number button is it possible?? pls help...

    ReplyDelete
  107. why are there xml errors? and i tried the one click installer, it doesn't work.

    ReplyDelete
  108. Hi Aneesh - 24x7yrzone.blogspot.com is my blog - your steps PERFECTLY work for google chrome - but then when i see it in explorer .. i see something like Pages (7)123456 Next without the CSS. Appreciate your help in getting this resolved. Thanks.

    ReplyDelete
  109. Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
    XML error message: XML document structures must start and end within the same entity.

    ReplyDelete
  110. thank you so much.........it works!

    ReplyDelete
  111. I can't apply your fix, it kills my Blogumulus and I also get that "XML error message: XML document structures must start and end within the same entity." error. :-(

    Any ideas?
    Thanks in advance.

    ReplyDelete
  112. nice article, thank's for your tips..!!!

    ReplyDelete
  113. the widget does not work in my blog...
    http://pxrcreations.blogspot.com/

    pls help....
    bcoz i really love this feature...

    ReplyDelete
  114. thank you very much for this tutorial. i've been looking it for a long time.

    ReplyDelete
  115. Hey,aneesh get error when i done it all.

    XML document structures must start and end within the same entity.

    What to do i try few times and all did 100% correct.Please help

    Find me here http://goalscentre.blogspot.com/

    ReplyDelete
  116. is there someone who can help me because I added this widget but half of the contents of page 1 appears again on page 2. Any idea what I did wrong or how to change it?
    Thanks. The site is http://2edd.blogspot.com

    ReplyDelete
  117. Hello, I have put it. I have tried to remove it because i have a bug. It shows 65 pages ! And when we clic to next : it shows only 2 articles.
    How can i remove it? i do not find the code?
    http://tomatejoyeuse.blogspot.com/

    ReplyDelete
  118. This hack worked great for me (I have tried a few). I just used the widget this time. I didn't even need to do the label fix. Its @ my blog: http://www.documentaryarea.com

    Thankyou
    Claza

    ReplyDelete
  119. Hello, its very nice, thanks a lot,
    I notice that I can't replace body tag with your code! But I copy it with out start & end tags and paste it before body tag. Then works good...
    I already change next and previous words, but how can I change pages word? And can I center the all navigation, and make it start from right?
    Please, I wait your assistance... with out saying you don't know Arabic^_^
    my blog

    ReplyDelete
  120. @srhan
    you will have to edit the JavaScript file(js file) and change Pages to whatever you want it to be,then upload it somewhere and use yourown version of the js file instead of using mine..

    ReplyDelete
  121. dear Aneesh,
    many thanks upon to you for quickly help, and sorry if distribute, is this the only way? I'm not professional in java, but I'll try.
    did you mean this
    http://blogergadgets.googlecode.com/files/blogger-page-navi.v1. js
    can you give me site for upload java, or tutorial about this -if you made-.
    I found tow "pages" words in this file, can I change them, no problem?
    and what about make it in center and start form right, from this file also?
    last, can i copy all file in the same place in edit html. Rather than java file? how?
    I hope that my visit don't upset you.
    thanks at all....

    ReplyDelete
  122. @سرحان,

    yea i meant that js file. I am not too sure if you can type Arabic into a javascript file(i have never tried it :P). Anyway try changing "Pages" to whatever you want. You can upload js files at http://hotlinkfiles.com

    ReplyDelete
  123. thanks Aneesh,
    I already try change text but failed, I'll try another way..
    thank you

    ReplyDelete
  124. what a posts bro,,,, thx 4 the info you gave

    ReplyDelete
  125. its only work on main page,.
    but when on labels page,the navigation not shown...
    can u help me please..alot of people have same problem with me,,

    take a look this..

    ReplyDelete
  126. Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
    XML error message: XML document structures must start and end within the same entity.

    nothing works.. :( www.balburam.com

    ReplyDelete
  127. Dear Aneesh,
    Is it possible to place this widget on my blog (moneycycle21.blogspot.com)? I've tried all your steps correctly with no result (including delete 'display:none;" on #blog-pager { ). Please, help me. Thank you in advance.

    NB: Step 3 run properly but step 4 results XML error message.

    ReplyDelete
  128. hahaha))
    don't work with default Minima Lefty Stretch Template!

    ReplyDelete
  129. I cannot get this to show up on my site and I have tried every different hack I can find out there. Help please!
    Blog: www.simplesavingsblog.com

    I have a WP converted theme. Is that the issue?

    ReplyDelete
  130. not working, i try this in my blog, plz check wahts the prob.
    http://bestsheroshayri.blogspot.com/

    ReplyDelete
  131. It doesn't work on my template. Any ideas? Help, thanks!

    ReplyDelete
  132. "Aneesh said...

    @prashant,
    you have tweaked the template properly and i see that the tweak has now appended an ?&max-results=5 so that label pages will show only 5 per page.. But if some one manually enter your long label page url manually(without clicking the label links on your site),then it will display 20 per page and wont display page navi. I don't think anyone will do like that"

    Dear Aneesh,
    first of all a big salute from my part you are really superb.If it is posible please help me in solving a problem. I am using "label" in the menu item of my blog for page navigation.(www.sanathanan.blogspot.com)So it is just like manually entering label page url. So whenever i click menu (label) item it will show 20 posts per page. Is there any fix for this. And further more how can we remove the "showing results for label....." at the top while we click label in blogger.
    Thank you

    ReplyDelete
  133. I've tried adding it, following your instructions to the letter, but get this message: XML document structures must start and end within the same entity.

    I don't get what is wrong, Should I place the code somewhere else or..? Any help would be greatly appreciated! http://schlagerexperience.blogspot.com

    ReplyDelete
  134. This works perfectly.... thnx a ton!!!
    God bless u! :D

    ReplyDelete
  135. Thanks... it worked great with the one click installer...

    ReplyDelete
  136. How can I center the page navigation links? It appears on the left.

    ReplyDelete
  137. i was try at my blog and very good

    ReplyDelete
  138. Your "one click installer" does great work!!
    Thanx but can you tell me how to change the background / text and hover collors? Because my template is dark?!

    http://psydex-mgc.blogspot.com

    ReplyDelete
  139. Abid here
    its not working..giving error we are unable to save ur template

    ReplyDelete
  140. Pete here.
    It doesnt' work. Can't save the template as it says there is an XML error. I had to erase the "/body" part so skip the error. (http://culturatic1.blogspot.com)
    Why is it some people can and some cannot? Depends on the template we are using?
    Thank you for you help, Aneesh.

    ReplyDelete
  141. Please correct the error below and submit your template again.
    Your template could not be parsed as it is not well-formed. Please make sure that all XML elements are closed properly.
    XML error message: The string "--" is not permitted within comments.

    WHY I HAVING THIS PROBLEM? HOW 2 CORRECT IT? HELP ME!

    ReplyDelete
  142. Thank you for the post :) i neeedet it

    ReplyDelete
  143. I really like the page navigation thank you very much. For the problems that people are facing I have solved it for step #4.

    When you place this in your template, take out the:
    PAGE NAVIGATION STARTS
    and the
    PAGE NAVIGATION ENDS

    it works perfectly fine then.

    ReplyDelete
  144. Hi Aneesh how can I change the color oh the text "PAGES (num)" as it is black as the background of my blog>??
    Thanks for the great widget.
    Stroo.

    ReplyDelete
  145. Thank you, work fine, i have only a problem, when I click an item in the Label Cloud in the first page is not in my turns Numbered Page Navigation, pressing Older posts normally occurs

    I hope to help you

    My blog is :http://www.lovefortechnology.com

    ReplyDelete
  146. Thank You!
    I love it so much but one minor problem.
    It only show maximum 21 pages where it should be 55 pages.
    I have it list 25 posts per page and I have total 1362 at time I am writing this.
    Can you please have and help me show all pages from my site from here on..
    Here have a look: http://www.spotlightdeals.ca

    Thanks in advance.

    ReplyDelete
  147. Just so you know, I changed it to show 50 post now and max page is only 11.

    ReplyDelete
  148. Thank you so much for your hard work.

    I am giving up on this because there are still too many bugs.
    1) Max. 550 posts
    2) Doesn't coordinate with Labels or single post view
    3) Skipping 1 post on every page advancing.

    I probably will check back again in the near future and hope to see the ultimate version.
    I in the meanwhile, I will change Old post text to Graphical and live with it.

    ReplyDelete
  149. I've done everything (installing the widget and replacing the label fix), but the page navigation still doesn't appear in my blog.

    Thanks.

    My blog: http://acapawn7.blogspot.com

    ReplyDelete
  150. I added this widget through your one-click-installer, but now I want to remove this widget. Since i don't know what to look for in html code, I'd like to ask you for help... Tnx

    ReplyDelete
  151. @Pokliči - you can goto the Layout > Page Elements tab and remove the HTML/Javascript widget that you added..

    ReplyDelete
  152. Hello, that doesn't work on my blog.
    I try on my blog http://letilor.blogspot.com/ but also on my private blog test with a basic template "Minima theme" and it does not work !
    I try with "Add to blogger" link and also with the code.Not error code but nothing appears
    Could you help me???

    ReplyDelete
  153. hey aneesh...my problem is same as "BrAnD_NeW"...I can see it on Internet Explorer, but in Firefox i cant not see it. Please help.

    ReplyDelete
  154. I've tried both versions - none is working for me.

    http://www.przemekspider.com/

    ReplyDelete
  155. brother i used it in my blog but only 510 posts are indexed with this widget, all pages are not shown, i have more than 3500 posts so how can i make it work in my blog???
    http://moviegod.tk

    ReplyDelete
  156. thanks dude , the one click installer work great !

    ReplyDelete
  157. It did all the steps but I didn't get where "data:label.url" is... I can't see it in my template.. Plz help..
    My blog: http://www.offerz4free.blogspot.com/

    ReplyDelete
  158. Wow man amazing. its really very good. thanks.

    ReplyDelete
  159. I've tried both versions - none is working for me.

    http://thomsoft.blogspot.com

    ReplyDelete
  160. twew thanks for this pages topic about numbering a post page..
    although i've use label instead of archive ^_^

    anyways here is my blog and the result of the codes I plugin in my sites codes.

    http://solomode.blogspot.com/

    hmmm just click on the RECENT/OLDER POST in the tab menu and you will witness the result....

    ReplyDelete
  161. Hey, I'm having a serious problem with my blog page navigation. When I click on labels, navigation does'nt work, and my clients does not nitice older and newer post links... my blog www.tau-patiks.blogspot.com
    This problem occured when I changed my template, but I like this one so mouch, I dont want to change it.

    I someone could tell me how to delete existing navigation to that one which works on labels too, I would be so glad! my clients too !!!

    ReplyDelete
  162. HI, this one works for me. Just a quick question though, I was wondering why I always have an extra page. Like right now, I have a total of 6 posts with 2 posts to be shown per page. Of course, there should only be 3 pages in the navigation, but I see a page 4 and when i click on it, it returns me a post saying, "no posts found".

    Basically my problem is that the pages seem to not coincide to my expected number of pages (6 posts by 2 posts per page) which is 3 pages only. My blog is: http://howdoigetto.blogspot.com/

    ReplyDelete
  163. Boss it didnot worked for me... please help..

    I tried it here : http://hindimp3sdownload.blogspot.com

    changed everything as u said.. but nothing worked..

    ReplyDelete
  164. thank you so much!! many time i've tried to find this thread :D

    ReplyDelete
  165. thank's work , great :) awesome

    ReplyDelete
  166. Yeah, working fine for me.
    Goof job man, no problems at all with a very complicated piece of code.

    I wish I could change the colour of the font for the word "page". But I'm struggling with html and css as it is. I'm far too scared of javascript to get into it!

    Thanks.

    ReplyDelete
  167. @ET

    I have just solved your problem.

    Change "var pageCount=5" to the number of posts per page you require. I had the same problem where posts where missing.

    Now no posts are missing and the correct number of pages is displayed.

    I changed "var pageCount=5" to "var pageCount=7"


    I hope this helps you all

    Daniel James

    Webexploits - Helping Expose Web Exploits and Vulnerabilities

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

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

    ReplyDelete
  170. why yours is a fixed width and mine isn't? if I click on 11 it messes up the whole thing

    ReplyDelete
  171. Aneesh,

    This hack sounds really good. But is not working for my blog. I am testing it using a test blog and the URL is : http://experimentaltests.blogspot.com/

    My actual issue is that the previous post link was missing in my home page. So I thought I would use your hack to replace it with numbered navigation. But now I am still facing the same issue. Nothing is showing up in my home page. Can you please help me out in this issue. I would be more than grateful if you can fix it for me.

    My original blog url is: http://www.4thsensecooking.com/

    Plzzzzz help me out.

    ReplyDelete
  172. @Nithya - This trick replaces the older post newer post links with the numbered page navi.As you don't have those, the trick wont work. If you want to make it working, add an HTML/JavaScript Widget with the following content
    <div class='blog-pager' id='blog-pager'></div>

    and do the template edits as mentioned in this post. You will get to see the numbered navigation links. You can position the Gadget from the Layout > Page Elements page. (You can position the gadget below the Blog Posts Widget)

    @ELo Designer - adjust var displayPageNum=5;

    ReplyDelete
  173. Thank you ... but I don't want to display more than one post per page. So I will have add a read more hack.

    Aneesh. How do I fing tutorials to place comments in bubble like yours and the post bubboe counter? I added to mine but it's just a counter not clicable yours is more interesting and takes right to the comments.Would you please tell me where I find it?. take a look at my blog

    http://thinksmartdesigns.blogspot.com/

    ReplyDelete
  174. Hi Aneesh.
    I am your fan. I have a question here. My question is about blogger pages such as about,contact form and disclaimer for example.

    I am using numbered page navigation. I tried to add About page in this template. Everything is fine but when I click on the link of ABOUT page, I can't view it at all. It shows only image, a few of texts and read more. I can't view this page. Same goes to diclaimer and contact form pages. My purpose is to show this page without read more. Is it possible to implement this? I have had googling this hack for quite sometimes but until now I can't find it.

    I hope you can solve this problem. Thanks in advance for your help now and then.

    Jimmy

    ReplyDelete
  175. Hello!

    Wondeful hack. But unfortunately it only words on IE8. It doesn't work on Mozila and Google Chrome. Do you have some hint about it?
    I was wonfering if this is because my template never has the pagination function...

    Please helpe me.

    Thanks very much,

    Eduardo ( from Brazil )

    ReplyDelete