403 Numbered Page Navigation for Blogger
August 12, 2008 /

The ability to 'paginate' Blogger blogs has been a long requested feature. Pagination allows us to number blog pages like those of a book, offering readers the ability to navigate deeper into the archives with ease when compared to the 'newer' and 'older' post links.

After many failed attempts, I was almost ready to admit defeat with this function until I discovered this excellent script by Mohamed of Blogger Accessories. This script replaces the default blog pager (links to newer, older and home pages) with numbered page navigation. Furthermore, it offers the ability to customize the number of page links and the number of posts displayed on each page.


Mohamed's Blogger pagination script may be installed using two different methods:
Both of these installation methods will achieve a similar effect. I personally find adding the code directly to the template makes it easier to customize the style of the pagination links, but if you feel uncomfortable editing your template, the widget installation may be much easier for you.

Here is how the finished installation will appear in your blog:


Once installed, these "page numbers" will appear on your home, archive and labels pages, allowing your readers to easily access pages in your archives. However, the page numbers will not appear on individual post pages. I've noticed many blogs which use pagination like this, and among them none displayed these page links beneath individual posts.

To learn more about using the numbered pagination script for Blogger, pop over to Blogger Accessories to read the useful tutorials Mohamed has posted.


My Slightly Modified Version

As you may have noticed, I'm using a slightly modified version of this script here on Blogger Buster. When customizing the style of Mohamed's original version, I noticed a few elements which I preferred to change for my own preferences, and also modified the CSS for how the numbered links are displayed.


If you would prefer to use this slightly different version instead, here is what you should do.


Add the CSS code to your style section

Firstly, copy all of the code below and paste this just before the closing </b:skin> tag in your template:



.showpageArea a {
text-decoration:underline;
}
.showpageNum a {
text-decoration:none;
border: 1px solid #ccc;
margin:0 3px;
padding:3px;
}
.showpageNum a:hover {
border: 1px solid #ccc;
background-color:#ccc;
}
.showpagePoint {
color:#333;
text-decoration:none;
border: 1px solid #ccc;
background: #ccc;
margin:0 3px;
padding:3px;
}
.showpageOf {
text-decoration:none;
padding:3px;
margin: 0 3px 0 0;
}
.showpage a {
text-decoration:none;
border: 1px solid #ccc;
padding:3px;
}
.showpage a:hover {
text-decoration:none;
}
.showpageNum a:link,.showpage a:link {
text-decoration:none;
color:#333;
}
This should change the colors of text and links in the pagination to match the styles already present in your blog template. So if your default text is white against a dark background, the "Pages (#)" section of the script should appear the same way. The color for the background and hover effects of the numbers can be altered according to your preferences by editing the hex values to match the style of your own template.

Add the JavaScript code beneath your posts

The second part of the installation is to add the JavaScript code beneath your posts which will locate and replace the existing "Newer/Older Posts" link. To add this script, go to Layout>Edit HTML in your Blogger dashboard, and do not tick the "expand widget templates" box (it's much easier to add the code while the widgets are contracted). Then find this section of code (or similar) in your template:
<b:section class='main' id='main' showaddelement='yes'> <b:widget id='Blog1' locked='false' title='Blog Posts' type='Blog'/> </b:section>
Immediately after the closing </b:section> tag, add the following section of code:


&lt;script type=&quot;text/javascript&quot;&gt;

function showpageCount(json) {
var thisUrl = location.href;
var htmlMap = new Array();
var isFirstPage = thisUrl.substring(thisUrl.length-5,thisUrl.length)==&quot;.com/&quot;;
var isLablePage = thisUrl.indexOf(&quot;/search/label/&quot;)!=-1;
var isPage = thisUrl.indexOf(&quot;/search?updated&quot;)!=-1;
var thisLable = isLablePage ? thisUrl.substr(thisUrl.indexOf(&quot;/search/label/&quot;)+14,thisUrl.length) : &quot;&quot;;
thisLable = thisLable.indexOf(&quot;?&quot;)!=-1 ? thisLable.substr(0,thisLable.indexOf(&quot;?&quot;)) : thisLable;
var thisNum = 1;
var postNum=1;
var itemCount = 0;
var fFlag = 0;
var eFlag = 0;
var html= &#39;&#39;;
var upPageHtml =&#39;&#39;;
var downPageHtml =&#39;&#39;;

var pageCount = 5;
var displayPageNum = 5;
var upPageWord = &#39;Previous&#39;;
var downPageWord = &#39;Next&#39;;



var labelHtml = &#39;&lt;span class=&quot;showpageNum&quot;&gt;&lt;a href=&quot;/search/label/&#39;+thisLable+&#39;?&amp;max-results=&#39;+pageCount+&#39;&quot;&gt;&#39;;

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!=&#39;&#39;){
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] = &#39;/search/label/&#39;+thisLable+&#39;?updated-max=&#39;+timestamp+&#39;T00%3A00%3A00%2B08%3A00&amp;max-results=&#39;+pageCount;
}
}
}
}//end if(post.category){

itemCount++;
}

}else{
if(title!=&#39;&#39;){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}

if(title!=&#39;&#39;) postNum++;
htmlMap[htmlMap.length] = &#39;/search?updated-max=&#39;+timestamp+&#39;T00%3A00%3A00%2B08%3A00&amp;max-results=&#39;+pageCount;
}
}
itemCount++;
}
}

for(var p =0;p&lt; htmlMap.length;p++){
if(p&gt;=(thisNum-displayPageNum-1) &amp;&amp; p&lt;(thisNum+displayPageNum)){
if(fFlag ==0 &amp;&amp; p == thisNum-2){
if(thisNum==2){
if(isLablePage){
upPageHtml = labelHtml + upPageWord +&#39;&lt;/a&gt;&lt;/span&gt;&#39;;
}else{
upPageHtml = &#39;&lt;span class=&quot;showpage&quot;&gt;&lt;a href=&quot;/&quot;&gt;&#39;+ upPageWord +&#39;&lt;/a&gt;&lt;/span&gt;&#39;;
}
}else{
upPageHtml = &#39;&lt;span class=&quot;showpage&quot;&gt;&lt;a href=&quot;&#39;+htmlMap[p]+&#39;&quot;&gt;&#39;+ upPageWord +&#39;&lt;/a&gt;&lt;/span&gt;&#39;;
}

fFlag++;
}

if(p==(thisNum-1)){
html += &#39;&lt;span class=&quot;showpagePoint&quot;&gt;&#39;+thisNum+&#39;&lt;/span&gt;&#39;;
}else{
if(p==0){
if(isLablePage){
html = labelHtml+&#39;1&lt;/a&gt;&lt;/span&gt;&#39;;
}else{
html += &#39;&lt;span class=&quot;showpageNum&quot;&gt;&lt;a href=&quot;/&quot;&gt;1&lt;/a&gt;&lt;/span&gt;&#39;;
}
}else{
html += &#39;&lt;span class=&quot;showpageNum&quot;&gt;&lt;a href=&quot;&#39;+htmlMap[p]+&#39;&quot;&gt;&#39;+ (p+1) +&#39;&lt;/a&gt;&lt;/span&gt;&#39;;
}
}

if(eFlag ==0 &amp;&amp; p == thisNum){
downPageHtml = &#39;&lt;span class=&quot;showpage&quot;&gt; &lt;a href=&quot;&#39;+htmlMap[p]+&#39;&quot;&gt;&#39;+ downPageWord +&#39;&lt;/a&gt;&lt;/span&gt;&#39;;
eFlag++;
}
}//end if(p&gt;=(thisNum-displayPageNum-1) &amp;&amp; p&lt;(thisNum+displayPageNum)){
}//end for(var p =0;p&lt; htmlMap.length;p++){

if(thisNum&gt;1){
if(!isLablePage){
html = &#39;&#39;+upPageHtml+&#39; &#39;+html +&#39; &#39;;
}else{
html = &#39;&#39;+upPageHtml+&#39; &#39;+html +&#39; &#39;;
}
}

html = &#39;&lt;div class=&quot;showpageArea&quot;&gt;&lt;span style=&quot;COLOR: #000;&quot; class=&quot;showpageOf&quot;&gt; Pages (&#39;+(postNum-1)+&#39;)&lt;/span&gt;&#39;+html;

if(thisNum&lt;(postNum-1)){
html += downPageHtml;

}

if(postNum==1) postNum++;
html += &#39;&lt;/div&gt;&#39;;

if(isPage || isFirstPage || isLablePage){
var pageArea = document.getElementsByName(&quot;pageArea&quot;);
var blogPager = document.getElementById(&quot;blog-pager&quot;);

if(postNum &lt;= 2){
html =&#39;&#39;;
}

for(var p =0;p&lt; pageArea.length;p++){
pageArea[p].innerHTML = html;
}

if(pageArea&amp;&amp;pageArea.length&gt;0){
html =&#39;&#39;;
}

if(blogPager){
blogPager.innerHTML = html;
}
}

}
&lt;/script&gt;

&lt;script src=&quot;/feeds/posts/summary?alt=json-in-script&amp;callback=showpageCount&amp;max-results=99999&quot;; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;


Once you have added this code, attempt to preview your template to ensure there are no code errors. You will not be able to see the script in action on the preview, but this step ensures no adverse effects to your layout.

In the code above, you will notice that I have highlighted three sections of code in bold red. You may need to customize these sections to better suit your preferences:

On line 5, you may need to change the ".com" to reflect your domain extention if you use a custom domain.

var isFirstPage = thisUrl.substring(thisUrl.length-5,thisUrl.length)==&quot;.com/&quot;;

This default installation should work fine for anyone hosted on Blog*Spot or a dot.com domain, but you will need to alter this section if your custom domain ends in .co.uk or .info for example.

In lines 19 and 20, you can change these values to alter how many posts are displayed on each page, and how many links will be visible at the same time.

The var pageCount = 5; section defiines the number of posts displayed on each page, while var displayPageNum = 5; defines the number of links which are displayed (eg: 1 - 2 - 3 - 4 - 5) beneath the posts section.

Once you have added this JavaScript code and made any changes nescessary for your needs, save your template and open up your blog in your browser. Now you should see the pagination links appear beneath your main posts section, and also on Labels and Archive pages.


Your thoughts?

I hope this post has helped you learn about how numbered page navigation can be achieved in Blogger powered blogs using Mohamed's original methods or my slightly modified script.

Please let me know what you think of these methods, or if you experience any problems, by leaving your comments below.

Author: Amanda Kennedy

Amanda is a professional blogger and web designer living in Sheffield, United Kingdom.

In addition to curating Blogger Buster, you can find Amanda on Twitter, Facebook or add her to your circle on Google+.

Like to share?

You may also like to subscribe to Blogger Buster's RSS feed or receive free email updates of our latest posts.

403 comments:

  1. Thanks a lot!!!

    I have been craving for this function in blogger!

    ReplyDelete
  2. I love it.. I love it.. i love it!!!

    Thanks soooo much!!

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

    ReplyDelete
  4. Amanda and Mohamed, you are my idols.. :))

    I'd like yr permission (I'll also ask to Mohamed ) to translate this for my readers in portuguese, of course linking you back.

    ReplyDelete
  5. Hi Amanda ,

    Thanks for linking me. We need to modify the Labels widget to show as many posts we made in Page navigation hack or Else when we click a particular Label all posts belonging to that label will be shown.I have written about it here
    http://rias-techno-wizard.blogspot.com/2008/08/show-only-specific-number-of-posts-in.html . Have a look at that hack.

    Once again Thanks for spreading the Page Navigation Hack.

    regards,
    Blogger Accessories

    ReplyDelete
  6. I'd LOVE to know how to make this work in a Classic Blogger template-based blog. Can it be done?

    ReplyDelete
  7. and I want to know if this script works on classic blogger templates.

    ReplyDelete
  8. Another fantastic piece--many thanks!
    Blessings!

    ReplyDelete
  9. It is a greaT HACKING TIPS, I will give it a try for my blogspot. Thanks

    ReplyDelete
  10. I'm no blogger expert. I'm just a free-ready-to-use-made-template user. So, this is a useful tutorials for me. Thanks a bunch, Amanda..

    ReplyDelete
  11. Thank you Amanda

    Another great post! I'm going to try it right now..

    I'm going to visit Mohamed site to check it out.

    Thanks
    Bobby

    ReplyDelete
  12. Great!!! There's a lot of people waiting for this hack here in Brazil!

    []'s
    Compulsivo

    ReplyDelete
  13. Didn't work for me :(

    ReplyDelete
  14. Jumble Blogger13 August 2008 14:27

    Thanks for yet another never seen new tips...

    ReplyDelete
  15. Nice hack! thank you both

    But its not working as it should, ive setup a demo blog with five post and selected to show 2 posts per page and 5 links at the bottom, if i select "2" at the bottom it goes to page number 3 and doesnt show the 2nd page with the remaining 2 posts.

    Also on Mohamed blog when using the pagination hack some posts are not showed, if we put 2 windows one with the rss feed and on the other one the blog, i can see that posts are missed using the pagination hack, i navigated from page 1 to 4 and 3 posts werent shown but were visible on the feed, something is not right.

    ReplyDelete
  16. Congratulations on this further work.

    His blog is great!!!

    ReplyDelete
  17. works really well, thanks

    I used your version, just didn't like the look of the other one

    ReplyDelete
  18. Hy there you are on the good way but this hack needs more tweaking. I`v tried to install it on 2 blogs with custom templates without success. It just does not appear. Anyway thanks for the effort put in the realisation.

    ReplyDelete
  19. Yahooooooooooo! I was longing for this one. Thanks a lot. :D

    Btw, would u permit to publish this one in my language in my blog with proper citation of u?

    ReplyDelete
  20. Ops! Got a problem! :( I dont get any boxes! All the page numbers are in very closed position! No gap between them. :(

    ReplyDelete
  21. I've got the same problem with ????? too! How can I make them look more farther apart?

    ReplyDelete
  22. Thank you very much... nice script and excellent blog.

    http://venuzcomplex.blogspot.com // Chile

    ReplyDelete
  23. THANKS AMANDA,

    IT'S REALLY GOOD TRICK FOR BLOGGER.

    ReplyDelete
  24. I followed the exact steps. My blog is hosted on Blogger with tis link www.nampblog.com

    Nothing is coming up for me, need help.

    ReplyDelete
  25. I'm glad to see most of you are enjoying the page navigation so far :)

    @Rô It's fine by me, though you should also conform with Mohamed too.

    @Mohamed: I see what you mean with the labels. I think it's fairly simple to alter the number of posts displayed on labels pages, so I will investigate and update this post once we're sure. I'm wondering if this issue may also be causing the problem Ricardo mentioned. In any case, I'll email you about this later today.

    @Rob and Lori: I think it should be possible for Classic templates, though we would need to change some elements of the script. I will post about this if I can make it work on a classic template :)

    @Timethy Jones: Which versions did you try to install? On occasion, I found the widget version did not display, though both of the script in template versions worked in the test blogs I installed on. The only other problem may be the domain extension. If yours do not end in .com, you would need to edit this on line 5.

    ReplyDelete
  26. @রাশেদ I just took a look at your blog and the numbers seem to have spacing between them now. Did you manage to fix the problem?

    @Bengt: I'm not sure which of your blogs you had installed this on. Could you send me the URL please and I'll take a look. Most likely this problem can be solved with some additional CSS :)

    @Vikram: Which version are you trying to use? Let me know if it is the widget or one of the script based versions and I'll take a look to see what the problem may be.

    ReplyDelete
  27. Hey Amanda.. Here's my blog's URL: http://ilvoelv.blogspot.com/


    I hope this trick would work on my blog coz i'm so envious with the others who have this.. :(

    ReplyDelete
  28. @Bengt: Thanks for sending the details. I see what you mean about the numbers being so close together. It's strange because when I look at your source code, the correct style is there. For some reason, the script is not picking up on the style, and displaying the numbers as normal links.

    I'll look into this now for you, and will update here as soon as I know more.

    ReplyDelete
  29. No, I just installed the Mohamed's widget. But, I want to use yours. I'm copying the code again. Plz take a look after 5 minutes. :)

    ReplyDelete
  30. All the numbers are placed together without any gap among them. :(

    ReplyDelete
  31. It seems to be Bengt and I are using the same template.

    Btw, I get the same result without copying the css code from step 1! How weird it is! :((

    ReplyDelete
  32. রাশেদ and Bengt: you both seem to be using the same template (Ads Theme) so I think the best option would be for me to download this theme and install in a test blog so I can better adapt the CSS to the template.

    It seems this template has many issues when trying to customize the CSS! We had problems with the tabbed navigation widget too :)

    No worries though. The worst case scenario would be adding inline CSS to the JavaScript if no other method will work.

    I'll get on with this ASAP

    ReplyDelete
  33. Thats a great news. I also think we may need inline CSS like the tabbed nav panel. :) I removed the whole CSS part and still I can see the page nav. :|

    ReplyDelete
  34. Sorry, my name is not in Eng. :) It's Rashed. :)

    ReplyDelete
  35. Thanks so much Amanda! That would be a great help!

    ReplyDelete
  36. Good Script Amanda!Thanks i will try to install it on my blog

    http://templatestreasure.blogspot.com/

    ReplyDelete
  37. Hey Amanda!

    I've sorted it out! I just combined your code and from Blogger Accessories and poof, it's ok now! :D

    Thanks so much!

    ReplyDelete
  38. Hi Amanda, is there any way this will work for a classic template??

    ReplyDelete
  39. Hi Amanda! Thanks! I've translated to portuguese and published it on my Blog. It's a success once many bloggers in Brazil are anxious to have this tool.

    Some of my readers intend to host the script externally. Is it possible? That way, what changes I need in the codes?

    Another point: Ricardo Santos is right - I didn't notice if that problem is occuring on your blog, but some older posts on my blog are not shown when I navigate through the pages. The same is occuring on Blogger Accessories and other blogs. I've contacted Mohamed to be informed whether he knows how to fix it.

    Anyway, it's a great hack.

    ReplyDelete
  40. Hey Amanda-
    I've installed as you suggested, three times! But when I push preview, I get an error message stating that XML document structures must start and end with the same entity. Cannot figure out what to do. Can you help, please!!

    ReplyDelete
  41. @ Bengt...Can u help me plz. I also have the same problem. How did u fix it?


    Amanda, if u get some time, plz look into the problem. This theme is killing me! :(

    ReplyDelete
  42. This sounds interesting, but puting a java script to create the numbering pages... How about the users surfing the pages with firefox + noscript? By default, they won't see the numbered page navigation, am I right?

    ReplyDelete
  43. I Love this... I just put it on and I love it. Thank you so much

    ReplyDelete
  44. With the help of Bengt, finally I got it working. He added a script element and it worked fine.

    Thanks to Amanda, Bengt and Mohamed. :)

    ReplyDelete
  45. This is the code I got from Bengt. He permitted me to publish. :)

    At first, copy the JAvascript code from above.

    Now, add a page element of HTML/JavaScript with the following code.

    http://www.mamunrashed.com/CodefromBengt.txt

    ReplyDelete
  46. Amanda and Mohamed, my undying gratitude to you both for your tireless work helping us create a better blog!

    I managed to upload the beautiful "aspire" template. I followed Amanda's hack for the page numbers, but it didn't work. I placed the javascript under the following in my template:

    Well, apparently I can't post what it says, as I keep getting told that the HTML is not allowed!

    Could it be that I need to change the shadowelement "yes" to "no" and locked from "true" to "false"? I've left the hack in place, in hopes that the answer is something simple like that.

    Best,
    Dano

    ReplyDelete
  47. thanks...it work as well.

    ReplyDelete
  48. Hey Amanda! :) Thanks for the hack.

    I didn't get it to work, but will try to futz around with it later this afternoon.

    blog is here if you want to look...
    melissabitter.blogspot.com

    ReplyDelete
  49. Thanks you!
    But I have a problem
    www.adeur.net --> working ok
    www.cyberespia.com --> no work :-(

    Ideas??

    ReplyDelete
  50. thanks you...now is working www.cyberespia.com
    Cool!

    ReplyDelete
  51. Hey Amanda, Thanks a bunch. I was looking for something like this for a while, but have a bit of a problem.

    When I click on '2' or 'Next', it skips to the first post page all the way at the other end.

    The only things I changed were the Java's 'var pageCount' to reflect the number of posts on the page, and the CSS. Any thoughts?

    See it here: rrbtb.blogspot.com

    ReplyDelete
  52. Really useful add-on, Amanda, and it worked first time. Many thanks to you and to Mohamed.

    ReplyDelete
  53. I added this one to my blog and written a post about it as well! :) thanks! ^_^

    ReplyDelete
  54. i have more than 400 post and this wasting the blog loading time... huhuhuhu i can't simply take it on my blog

    ReplyDelete
  55. Hi Amanda,

    I do know that every time you install a script it may slow down the loading of your blog. However, I still want to give it a shot, and it's running on 'education & tech' but the PREVIOUS and NEXT are overlaping after the third page. Is there any way we can fix the issue in our particular page?

    Regards,

    ReplyDelete
  56. Try reducing the page numbers by changing var displayPageNum = 5;

    Its a problem with width of the widget. When u see page no. 10, there's no extra space and so "next" moves to bottom row.

    ReplyDelete
  57. Hi amanda.
    How bout if we want to hide some of previous page that had been viewed..
    I mean that, we have set the number of page viewed is 5, and once we done with the 5 and we only want to see the next ten page in the tab...
    the previous 5 page were hidden already, we just can see it by clicking on back button or whatever..
    so, the next page started from 6 until 10 can be seen in the tab navigation.

    do u have any solution for this..??

    ReplyDelete
  58. ......But its not working as it should, ive setup a demo blog with five post and selected to show 2 posts per page and 5 links at the bottom, if i select "2" at the bottom it goes to page number 3 and doesnt show the 2nd page with the remaining 2 posts.

    Also on Mohamed blog when using the pagination hack some posts are not showed, if we put 2 windows one with the rss feed and on the other one the blog, i can see that posts are missed using the pagination hack, i navigated from page 1 to 4 and 3 posts werent shown but were visible on the feed, something is not right......

    I have the same problem... any solution?

    ReplyDelete
  59. Hi Amanda,

    This is a great post! Thanks for sharing.

    You might wanna check this out. I had the same problem: some posts were not showing.

    It might be that the value of var pageCount needs to be the same as under Layout>Page Elements>Blog Posts(Edit)>Number of posts on main page. It seems to work fine after that for me. No more missing posts. Hope that helps.

    ReplyDelete
  60. @Adi
    As I've posted before, I have the same problem. I have several posts, and it's set up for one post per page, but clicking 'Next' or '2' skips all posts, going to the last one.

    @Ashes
    I double checked the code and the number of posts on the page, and still no go.

    (T_T)'

    ReplyDelete
  61. Ya. One of my friend got the same problem. Some posts of his blog is missing on a certain page number. Clicking on that page number skips to next page.

    ReplyDelete
  62. Hi Amanda,
    Someone just copied and pasted this entire post on his/her blog. Have a look:
    http://www.lazyfile.com/customize-blog/numbered-page-navigation-for-blogger/#more-307
    In the last it has mentioned a source though. But it is just a plain Plagiarism I think.
    He has done the same thing for lot of other sites/blogs as well including mine.

    I am gonna bring this site down with Google.

    ReplyDelete
  63. Пипец как круто!
    Спасибки, Аманда.

    ReplyDelete
  64. Dear Author,

    Thanks your posting. But its not working with my site. I used Adding as an HTML/JavaScript widget (gadget) below the main posts section.
    What is the reason. However the site already have heavy archive.Plaese let me know what can i do
    www.srilankaguardian.org. Its my domain.

    And contact me slglanka@gmail.com

    ReplyDelete
  65. Hi Amanda,

    Would love for you to create a solution for Blogger Classic users! I will be waiting. Thanks so much!

    I am soooooo happy I found your blog. :)

    ReplyDelete
  66. That was great! Thanks so much for posting this. I'm a newbie in blogging and am usually overwhelmed with html and csss scripting. Your post was sooo helpful!

    ReplyDelete
  67. Thank you very much. Your blog is an inexhaustible and amazing resource.

    ReplyDelete
  68. العاب شمس الدين23 August 2008 23:47

    thank very much . very nice collection of templates .

    ReplyDelete
  69. It's a nice tips. I will try it. Thank's

    ReplyDelete
  70. nice post.....
    love ur website so much

    great work amanda!!!

    -youngistan.blogspot.com

    ReplyDelete
  71. Hi Amanda & Mohamed,

    Thank you for the help you make the bloggers.

    My problem is as follows:
    on my blog, I have 2190 posts (The 08/ 24 /08)
    I have 8 messages per page.
    By inserting your script, I have 63 pages altogether.
    63 x 8 = 504

    I have lost over 1600 posts
    Why ?

    thank you in advance for your reply

    ReplyDelete
  72. Wonderful, thank you: I was looking for this and it works fine ^_____^

    ReplyDelete
  73. I love this feature! However for Labels with spaces (%20) or non-English characters, I found the page numbers failing to show on Safari on Mac, allowing no access to articles on older pages of a Label.

    ReplyDelete
  74. exellent work thank you very much :)))

    http://mimariz.blogspot.com

    ReplyDelete
  75. Hi mine doesnt seem to work well either
    the first post doesnt show the page numbers,
    instead it appears 'older posts' as usual
    just the first page, why would this happen? help!

    http://hxx.kr

    ReplyDelete
  76. Dear Amanada:

    I always read your blog mostly because your tips and hacks for my blog work all the time. This tips sounds great so I tried to use it with my own but it has not worked. It doesn't show the oagintaion numbers. Could you take a look.

    Love

    Olin

    ReplyDelete
  77. amanda, thanks again.. i have this hack installed in my blog.. thank you so much..

    ReplyDelete
  78. Hi Amanda,

    is possible to install code for classic old templates?

    Thanks from Italy :)

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

    ReplyDelete
  80. Hi Amanda
    I am a user in the pattern
    "Lemon Twist Blogger Template"

    I have problem to add
    "Numbered Page Navigation"

    I will be happy if will examine and tell me
    http://www.dosmusic.co.il/

    ***Does not talk good English

    ReplyDelete
  81. I have tried to implement this code however the numbers are not there, PLUS I can no longer go from page to page. Did i accidentally delete something? Anyone have an idea?

    http://your-product-review.blogspot.com/

    ReplyDelete
  82. It works perfectly, thanks a lot.

    ReplyDelete
  83. amanda, you are God's gift! thanks!

    ReplyDelete
  84. I Have problem with more than 500 post on my blog :(

    My Blog: 627 post, and I set var pageCount = 5; ( 5 posts displayed on each page ) , But It show only 100 pages(=500post)...

    there is this problem? -->
    "/feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999"

    Amanda, Please help me...

    ReplyDelete
  85. Hi Amanda. Thanks for this great tutorials, as i was wondering how can i alter the CSS code to make the navigation look exactly like the image you've posted? is there any way of doing so?

    ReplyDelete
  86. I wonder if there's code for classic template too
    i really want this function on my blog
    but i prefer sticking to classic template
    it's easier for me to modify - -

    ReplyDelete
  87. Just what I've been searching for! Thank you so much! And: is there a way to make the Navbar appear above my posts?

    ReplyDelete
  88. Implemented it without a hitch... Thanks!

    ReplyDelete
  89. Thank you for pointing me to this hack. I implemented the original hack, but yours also looks good!

    ReplyDelete
  90. Hi , Thanks For This Post .

    I Want You To Helping Me :

    How Can We Use Another Style Like The Picture You Insert At Top Of Post ?
    And How Can I Set This Code Center Of My Site , In Your Site The Code Is At Left ?

    Sorry For My English .

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

    ReplyDelete
  92. Thanks for this tip.

    I followed your instructions and I didn't get any error message when I saved it. The problem is that I can't see it. The only thing that changed is that instead of the usual Home - Older Posts at the end of my page, it now only shows Older Posts.

    Please help me.

    http://isla-de-nebz.blogspot.com/

    ReplyDelete
  93. it is wonderfull i search fot this for ages
    visit my huge comix archive
    http://eroticcomix.blogspot.com

    ReplyDelete
  94. Hi Amanda, I'm having the same problem as Nebz. When I first implemented this on a tester blog, it worked fine. However, when I uploaded the template to use on another site, it's showing "older posts" link, but no pagination.

    Any ideas?

    ReplyDelete
  95. don't add this gadget to your page because this doesn't works good, not showing all post some post are hided...etc

    ReplyDelete
  96. It works great! I have been looking for this for a long time. Thank you!!

    ReplyDelete
  97. Is there a way to get the customized pagination bar the same as the one demonstrated at the top of the page? The orange shiny bar would go perfect with my site design at www.electricvagabond.com. Can someone please let me know if this is possible. Thanks!

    ReplyDelete
  98. yap, i have the same problem with this, it some posts dissapear from listing. To buggy, I'll have to remove it...

    ReplyDelete
  99. dude...is it possible to get the page navigation hack with the same image showing on the top.......that really suits my template...thanks.

    http://idledownloads.blogspot.com

    ReplyDelete
  100. dude...is it possible to get the page navigation hack with the same image showing on the top(orange and white one).......that really suits my template...thanks.

    http://idledownloads.blogspot.com

    ReplyDelete
  101. Hi, It worked very well, the only thing is that color dont match. How to change them? Thanks.

    ReplyDelete
  102. Hi Amanda,
    Please tell me how to change colors. They don't match my template. Thanks

    ReplyDelete
  103. hi Amanda!

    I was implementing this hack in my blog (http://www.abuzzado.com.br), but, I couldn´t... And as You can see, it is because of my domain and the following line:

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

    So, To fix this problem You just have to do this: Replace that line for:

    var isFirstPage = thisUrl=="http://www.yourdomain.com/";

    Should work! I hope that I could help!

    Kisses! Keep the goob job!

    =)

    ReplyDelete
  104. And sorry, my name is Joseph, by the way... =)

    ReplyDelete
  105. Hi Amanda,

    I've kept the code in my template and its working fine for all posts....however, when i select cateogories view there are only 20 posts though i have more posts....cud u plz fix this....

    URL: http://idledownloads.blogspot.com

    ReplyDelete
  106. the script not working in my blog
    http://midnitewanderer.blogspot.com
    Have followed each step properly

    ReplyDelete
  107. Hi Amanda. I already tried Muhammad's method, which only worked on my inner pages - it did not appear on my main page.

    Now I'm going to try your method....

    ReplyDelete
  108. The CSS is not overriding my site's CSS...I cannot add a border or change the background.
    Anyway to force this

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

    ReplyDelete
  110. Hmm, when I click the different page numbers some posts will repeat from the previous pages.

    ReplyDelete
  111. not working. it's the same page problem. nobody is answering anything regarding that issue. and those who know and solved it by themselves are keeping quiet.

    ReplyDelete
  112. شكرا لكم على الإيضاح..أتمنى لكم التوفيق

    Thank you

    ReplyDelete
  113. I -think- I've got it all working, but I can't seem to get rid of the 'Subscribe to: Posts (Atom)' link underneath my lovely new page numbers. I couldn't find the code I was meant to remove....any hints? Cheers.

    ReplyDelete
  114. Hi Amanda..

    the script is not working in my blog..

    this is the result: http://img236.imageshack.us/my.php?image=errorkl4.jpg

    :-S

    thank you

    ReplyDelete
  115. hello amanda,

    the script results making number close to one another and not the same with your slightly modified version...please help and see at www.caraganon.com

    ReplyDelete
  116. this is not working for my blog !

    http://hclabs.blogspot.com/

    cc0990@gmail.com

    ReplyDelete
  117. I tried installing this on my gaming blog (I made a customized template), and everything appeared to be working; I could see the page numbers and the hover effect worked. Everything worked, but when I tried clicking on page 2, it would only go to page 3 and would add more numbers to the list even though I specified a max amount of numbers at 9. Any thoughts on this? Please help! I really want it to work, but can't add it until it's perfect.

    ReplyDelete
  118. Hey Amanda & Mohamed Bhai,
    Thank you soooo very much for all your efforts to help bloggers globally. What I appreciate most is the user-friendlness of your scripts. It realy makes it a piece of cake for a total blogging dummy like me. Once again I thank you guys from the bottom of my heart.
    God Bless...

    ReplyDelete
  119. BEWARE: BUG CONTAIN

    Day-1 = 10 post
    Day-2 = 8 post
    Day-3 = 10 post

    var pageCount = 5;

    This Nav Hack will make post#6 - post#10 on Day-1, post#6 - post#8 on Day-2, and post#6 through post#10 on Day-3 will dissapear and never shows.

    Because when we click on Page 2 with this Nav Hack, it will shows post #1 on Day-2 (where it should be shows post#6 - post#10 on Day-1).

    And when we click on Page 3 with this Nav Hack, it will only shows post #1 on Day-3.

    The BUG is on:

    http://bug.blogspot.com/search?updated-max=2008-10-31T00%3A00%3A00%2B08%3A00&max-results=20

    Please fix the bug.

    ReplyDelete
  120. When I am clickin on 2nd page its going to 12 th page...PLease Fix this Bug!!!!!

    ReplyDelete
  121. I used the modified version and it worked smoothly on the first try. Thanks a lot. :)

    ReplyDelete
  122. thanks for hack

    blogger-godown.blogspot.com

    ReplyDelete
  123. This is not working for me, can anyone tell me whats wrong? I have done this exactly, no changes to the code whatsoever. (I tried this as a widget and edit the HTML) look at my test blog.

    http://rhbtest.blogspot.com

    and contact me at (leviyoung85 (at)gmail dot com)

    ReplyDelete
  124. How do I do this without first switching over to Layouts format? I'm on the older blogger format.

    ReplyDelete
  125. The end-tag for element type "b:section" must end with a '>' delimiter.


    that's my error message but i don't know how to fix it! :(

    ReplyDelete
  126. i have implement the code in my blog..it work perfectly..

    ReplyDelete
  127. Hi Amanda

    I would really like to use this. I did everything as told but it just doesnt appear.
    I did the widget hack(from mohammed) and the javaScript hacks(yours), both doesnt work..

    @bengt and Rashad..

    Can you tell me what you did exactly..

    I have an Arthemia theme (http://themelib.com/2008/09/arthemia-magazine-blogger-template/)

    Thanks in advance.

    ReplyDelete
  128. I've put the EXACT code at the exact place but it didn't appear on the site?

    I use blogspot and already change the .com into .blogspot.com...

    wat's wrong?
    please tell me :D

    here's my site:
    http://pop-nation.blogspot.com

    //beE

    ReplyDelete
  129. sorry...i've figure it out... :D thanks for the great tutorial

    //beE

    ReplyDelete
  130. Hi,

    I've been following your blog closely since several months, and I'll appreciate if you can help me with this. I am using a custom template in my blog http://shopid.blogspot.com.
    When someone visit my blog and clicked on "older posts" / "previous
    posts" link at the bottom of the main page, the next page shows only
    the posts title (similar to archive page). I want to show full posts
    in all pages, how can i do that?

    Regards

    ReplyDelete
  131. Thank you so much!
    Please check out my blog:
    http://alen4ik-didyouknow.blogspot.com/
    Thank you, I love your add ons and gadgets!

    ReplyDelete
  132. thanks a lot
    don't forget to visit my blog.......

    ReplyDelete
  133. It's not working for me , i have done well But I don't know where the problem is ...plz kindly help me to solve this .

    my blog
    http://www.moviebindas.com/


    Thank you!!!

    ReplyDelete
  134. It's not working, something is wrong!
    Amanda please fix the problem.

    ReplyDelete
  135. I Love you Amanda .. hehehe

    Was in intense need for this. Your site roxx \m/ Keep em coming.

    I'll Get u sum ad clicks :)

    ReplyDelete
  136. Me too. I followed the instructions- I didn't get any errors on the preview, but nothing shows except what was there before, i.e. older, newer, home. Hope you can help.

    ReplyDelete
  137. doesn't work properly i have 5 posts displayed on the main blog page and the blog has at least 10 posts in total so when i click page number 2 it only shows 1 more post and amanda's not answering anyone's comments so its worthless

    ReplyDelete
  138. Not working for me though.. ><
    There should be a forum for this section XD

    ReplyDelete
  139. Thanks I am going to use it on my site

    ReplyDelete
  140. thx for the widget...
    works great for my blog :

    http://warezlinkin.blogspot.com

    ReplyDelete
  141. great... its work.. thankz manda..

    ReplyDelete
  142. Worked great in my blog: www.JMember.tk. Thanks Amanda!

    ReplyDelete
  143. Any way to add a "add to blogger" button -- tried to add myself -- totally lost :) -- Thanks.

    ReplyDelete
  144. Thank you for this!

    I was wondering if you would know how to add the date next to the blog post? I found how to do it online, but it won't work for me. lol

    Thanks for making these things so much easier to understand!

    ReplyDelete
  145. I have the same problem with anonymous above said..
    Anyone can fix it..????
    BTW, it's beuatifull post.

    ReplyDelete
  146. Hi Amanda, and thanks for the script.
    It's working, but not 100%. It's eating 2 of my posts (they are not showing). I copied exactly what was written in your guide, and changed the posts to 10 and display page no. to 5. What should I do?
    http://JMember.blogspot.com

    ReplyDelete
  147. Hi Amanda, and thanks for the script.
    It's working, but not 100%. It's eating 2 of my posts (they are not showing). I copied exactly what was written in your guide, and changed the posts to 10 and display page no. to 5. What should I do?
    http://JMember.blogspot.com

    ReplyDelete
  148. no support is there i have got a problem every thing works fine but it only shows the first page and when i click on the second there are no posts as i add newer ones they replace the old ones and the older ones can't be accessed through your page navigation

    ReplyDelete
  149. Hi Amanda,

    I just discovered this script. WOW!! I love it. One thing though, I'm also having the problem where the numbers are too close together (http://countrycharmgifts.blogspot.com/). I wondered if you were ever able to get this glitch in Ads Theme template figured out?

    ReplyDelete
  150. i'm using template "enlighten"..this hack seems can't be applied on my blog..do you have any suggestions?

    ReplyDelete
  151. very nice......... :) thanks a bunch..

    ReplyDelete
  152. yup i agree with every body.... itts not showing other post... its skipping it.... i dont know how....

    ReplyDelete
  153. Hi friend. I Visit your blog first time. are r u ready Care 4 link exchange...I have added ur blog on my blog .please u can see in my blog list ,n check urs blog' there...
    I hope u also do same for my blog


    Mohit
    http://forextradingisthe.blogspot.com

    ReplyDelete
  154. hello. I Used your page navigation. But, there is a bug and I dont know if it is only me or everyone. It does not show all the posts on the blogs. It hides some posts? Anybody has this problem? It has some problem. Please fix it. It eats some posts.

    ReplyDelete
  155. Since json is used, it gets extremely slow as the number of posts increase. It is not a useful addon.

    ReplyDelete
  156. Hello Mr. Mohamed, my name is nirvan & my blog is http://knight-nirvan.blogspot.com
    I have put the code above,& folled all the steps mentioned and there no results.....
    Please e-mail me at nirvanknight@yahoo.com

    ReplyDelete
  157. well it works but not perfectly as it is not accurate it tends to miss out two post as one navigate to the next page..

    ReplyDelete
  158. I have problem about this.. in my blog can't show at homepage, but its work on label pages. how it happens, last time i make it, work fully, but after i change my blogspot.com to web.id it can;t show on home, but show on label.

    what should i do? change .com/ to .web.id/ on var isFirstPage = thisUrl.substring(thisUrl.length-5,thisUrl.length)==".com/";

    ReplyDelete
  159. HI

    i have tried it in my blog.but the problem occurs when i click on a category it doesn't work

    see here www.tech43.net

    reply awaited

    ReplyDelete
  160. wow, very good, I tried Blogger Accessories's version, but it didn't work too well for some reason, I decided to give it another try and I found your site....I've installed it at moviesgateway.com, it looked great thanks!!!

    ReplyDelete
  161. Thanx amanda,

    This one worked. Before trying your version i have tried the original hack (both types)but they didn't worked and then i tried yours.It worked..... Thanx..

    ReplyDelete
  162. good blog but i have a problem i am having domain .co.cc as yojhakas.co.cc it shows page number but do not restrict posts in any label

    ReplyDelete
  163. Looks nice, but doesn't work. It was skipping posts, and it wasn't working on the labels page.

    ReplyDelete
  164. It has a problem when click " jump page"
    for example , i click 4 it will jump to 7.

    And 1st load my blog , it did not appear the page bar at last, when I click "Older Post" , the page bar appear.
    So much faults , please fix it, my blog is: http://www.zenware.blogspot.com

    ReplyDelete
  165. got the same problem whit missing posts in page2, page elements/post is 5 just as var count, hope the scrpt can be fixed, becouse i realy like it, thanks anyway

    ReplyDelete
  166. Awesome. Works great on www.GoodCarBadCar.net - a lifesaver that should help with pages/visit.

    ReplyDelete
  167. çok güzel ellerine sağlık buster:) thank you.

    ReplyDelete
  168. I think the problem with missing posts, is because it is skipping Even Numbered Pages.

    When I click page 2, it goes to page 3. When I click page 4, it goes to page 5..etc.

    Has anyone found a fix to the page navigation..
    Also, mine looks a bit funny on Internet Explorer. v7

    Take a look. www.moviewatcherz.com
    Thanks

    ReplyDelete
  169. works like a charm.. thanks again Amanda...
    I had done this long back.. but forgot to put in the Hi.. THANKSSSS

    ReplyDelete
  170. works like a charm.. thanks again Amanda...
    I had done this long back.. but forgot to put in the thanks.. THANKSSSS

    ReplyDelete
  171. Thank you Amanda, I love you.

    ReplyDelete
  172. Hi Amanda!
    It didn't work for me.
    Could you help me, please?
    It's installed in http://hotfromthewok.blogspot.com
    Thanks!

    ReplyDelete
  173. Hey Amanda...any idea why it doesn't show up on my front page? Looks wonderful on all other pages, but doesn't show on the front...Thoughts?
    www.napwarden.com

    ReplyDelete
  174. thanx Bro. its working fine
    thanx a lot
    keep it up

    ReplyDelete
  175. bro, what you said about this,..
    i'm really don't understand how to make it easily,..

    ReplyDelete
  176. Does not seem to work on the minima template

    ReplyDelete
  177. hey Amanda ! its not working for me too :(

    ReplyDelete
  178. Hi Amanda

    How are you?

    I install the "Continue here" on my blog, its great and unbelievable for me to put it, but you make it and its great working. If you want to see it. www.articles-homebiz.blogspot.com.

    Thats too nice of you.

    I have some problem my another thing

    I install the Numbering but they are making problems. When I press page no 2 button it goes to 4 or 5, but bringing the contents are of page 2. Only numbers are missing going forward. Please check it and suggest me what to do.

    I also want to align all my post to page center. My template was 2 columns right and left and I want my post to center to make my both columns a little visible, because the right column is hide due to posts left alignment.

    In last I want to change my blog header picture and header writing "Entertainment for you", so please suggest me an amaizing style according to my blog style (you will know a me from your blog, so suggest me according to that) and The footer has a blue line and has no space, I want to add disclaimer to my blog and the statcounter in the last, but when I add them, they come in front on the ad.

    Amanda Its so nice of you guiding and making good thing. Please help me.

    www.movieslinks4you.blogspot.com

    Take care
    Thanks

    ReplyDelete
  179. Hi Amanda Plz help I have tried a lot but its hust not working for my blog....

    http://www.mypikc.blogspot.com

    ReplyDelete
  180. Amanda,
    Lots of good stuff here but this pagination CSS has some serious bugs. On my site Robot Nine, like many others when you click on page two the displayed pages is number 3 and shows posts several postings further down the line, eg. In other words, I have 2 posts on homepage, 2 on each page. Click opage two and you see posts number 8 and 9 rather than 3 and 4. I suspect it it the var timestamp = post.published.$t.substr(0,10); line and have tried various adjustments without success. Changing the variable from 10 makes every page display the home page. It is unfortunate that Mohamed and yourself seem to have stopped answering posts about this code. I will leave it on for a short while maybe, but readers e-mail complaining. Any ideas or suggestions.
    Alan
    RobotNine(@)GMail.com

    ReplyDelete
  181. not working
    amanda i think you should fix some bugs in this code including missing posts and jumping posts

    i think posts with no dates don't appear

    please fix it for us we need this hack so much.

    thx alot

    ReplyDelete
  182. I'm getting the following error error:

    Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
    XML error message: The reference to entity "max-results" must end with the ';' delimiter.

    ReplyDelete
  183. Thanks a lot Amanda and Mohamed. I combined both of your tricks and it's working really well. For those of you who are having problems with missing posts, you should make sure "var pageCount = " is same as the value you set in the dashboard settings.

    ReplyDelete
  184. Thank you very much Amanda... your post is very help me... And it's very nice to know your blog :)

    ReplyDelete
  185. I agree that this code is not working. I used it too. Please post a new code.

    ReplyDelete
  186. This is great!!! Thank you so much for this trick!

    ReplyDelete
  187. Hey,
    Thank you, It works great.

    Only thing is it does come up on the first page, it still has the "older posts" link. This is only on the first page. Is this by design or did i stuff it up. I am just wondering.

    Again thanks.
    It rocks! You rock!

    Chris
    DelayClimax.info

    ReplyDelete
  188. Is it possible to get the page navigation hack with the same image showing on the top. I want to implement that on my blog
    http://tamilposters.blogspot.com

    ReplyDelete
  189. I figured out that the problems with missing posts or repeated posts have to do with posting multiple posts per day.

    The code appears to rely on post timestamps, and if you post two posts on one day, it doesn't recognize this fact. So if the two posts on one day end up spanning two pagination pages, then it repeats the posts and leaves out one other post.

    Unfortunately, I think that this is a problem that can't be fixed, but I may look into it. There has got to be a better way to select the posts other than by date.

    Nathan - Inkweaver Review

    ReplyDelete

Great! You've decided to leave a comment! Please bear in mind that comments are often moderated and that rel="nofollow" is in use and spammy comments will be deleted. Let's have a meaningful conversation instead. Thanks for stopping by!

Advertise on Blogger Buster

Browse through the Archives

All existing posts are still available to view while I'm working on the site, albeit seen in a much simpler interface. Feel free to browse through the archives to find tutorials, templates and articles to help you build a better blog:

Blog Archive

© Blogger Buster 2010 Home | About | Contact | Hire Me | Privacy Policy