Bismillah, Alhamdulillah

Skip to Content

Page Navigation for Blogger (Problems Solved)

September 14th, 2009

Click This for New Script (fix All Error and More than 500 posts) and Many Style

All Posts For New Script of Page Navigation for Blogger

Bismillah, Alhamdulillah, after some of my json hack for blogger. Now, I’ll try to solve most need hack for blogger is Page Navigation for blogger. Actually this hack I solved 2 months ago, but I’m not make tutorial for that because to explain this hack very difficult.

image

If we search about Page navigation for blogger will found to the author Mohamed Rias

Tutorial for Page Navigation for blogger by Mohamed Rias :

Page Navigation Hack for Blogger

Page Navigation Menu Widget for Blogger

I think this hack is the best Hack for blogger because useful and use for many blogger

If we check all comments from many tutorial about this so many question said that it can’t work :

For my Script I used same script from Mohamed Rias (Jazakallahu khoiran ya akhi) but I modified some places.

Now I tried to solve by simple problem first, Page navigation not show, This problem because :

  1. Domain name in first script use only for blogger and Amanda give explanation about this , but in my script no need to change for this problem.
  2. No id name ‘blog-pager’ , to solve this problem you have to change the script base on your ID in blog-pager because some template that not original from blogger they change id name.

Now I’ll explain what is the problem for advanced user. They found these kind of problems :

  1. If we post more than one post in same day, navigation can’t show right result. They solve by only post one post in one day. But it will problem for someone have many post in previous posts and they post more than one in same day, problem because previous hack only use Date not until Time (Insya Allah this problem Solved in my script).
  2. Label problem, if we click the label it will show more than maximum post per page (problem is from blogger.com), If you want know why it can’t solved that problem because Label have different JSON feed (In my script this problem solved insya Allah)

Explanation what I changed inside the script :

  1. Var timestamp , Prev hack only count Date not time, the problem occur when many post in one day.
  2. Separate JSON link and Function script for Page and Label.
  3. Make Max Post for Label.

Follow All tutorial in this post because the script is different from original script. CSS is same with previous hack.

Now tutorial to use my script, I’ll use tutorial from Mohamed Rias

Step 1 : Log in to your blogger account and navigate to Layout section. Now go to the edit HTML subtab.

Step 2 : search this line ]]></b:skin> and add this CSS code above that line.

It must look like this :

image

(Picture source from Mohamed Rias)

Step 3 : Now search for this code or related in your template ( no need to expand widgets )


<b:section class='main' id='main' showaddelement='yes' >
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>

Now Add This script just below the </b:section> .

if you can’t find you can search (ctrl+f) by this key ” id=’main’

Now Add This script just below the </b:section> .

Or if Difficult you can put before closing body tag

My Modification Script already solve the problem for Post more than one and Label Problem.

In the code above you can edit this line only :

var pageCount=10;

var displayPageNum=6;

1 : var pageCount = 10;

The Pagecount represents number of posts to be shown in single page. Change the digit to show as many pages you want.

for example :

In my example I have put that value as 10 . In each page you can see only 10 posts .

The number have to same with your setting

image

The picture show from Setting –> Formatting –> Show –> 10 posts

2 : var displayPageNum = 6;

here the digit 6 represents number of pages to be listed.

For example :

In my example I have chosen 6 , then 6 pages will be shown.

Tutorial from Mohammed Rias only stop here, But for my script have to add modification for label link

Modification Step for Label :

Step 1 : Add Label Gadget (Layout –> page elements –> Add Gadget –> Select Labels)

Step 2 : From Layout –> Edit HTML . Don’t Forget to backup your template (Download Full Template)

Step 3 : Search this

<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>

Change to this And Click “save template”

Finished, I hope it can work and This is Demo :

Demo

Note : If Some blogger one to make Tutorial in their own blog, please give link to my blog (Abu Farhan) or Mohamed Rias to appreciate our work for this hack, and for me Insya Allah I can give some explanation if error or can’t show for the user.


Categories: Blogger Tricks, Featured, Page Navigation

Tags: ,

Enjoyed this Post?

Subscribe to our RSS Feed, Follow us on Twitter or Comments RSS Feed

Donate towards my web hosting bill!

Trackback
Leave a response

235 Responses to “Page Navigation for Blogger (Problems Solved)”

  1. User says:

    Hi Abu Farhan. Thanks, it really helped. But a question: Why do the page navigation only show up on first page? I want it to show on the labels section I created.(over there it shows previous post and newest post) Any idea, please?

  2. thanks great stuff here. Will bookmark so I can find it easy in the future

  3. Ana says:

    Thank you SOOO MUCH! I didn’t know how to solve these problems but your tutorial has been incredibly useful.

    Great work! Thanks!

  4. khawer says:

    I have uploaded new Dione template in blogger and it already have page navigation.And i have more then 3500 post but it shows only 26 pages with 20 post per page in all labels.How to increase pages according to all label post.

  5. vannak says:

    why i can not make page navigation on my blog..?
    i follow by your mention.but still not…

    send me by email: sok.vannak168@yahoo.com

    thank

  6. vannak says:

    why i can not make page navigation on my blog..?
    i follow by your mention.but still not…

    sok.vannak168@yahoo.com

    thank

  7. How do you monetize your website or blog? Have you thought about thinking about it in a different way? Auto Wealth Maker software builds niche specific websites and generates traffic for them on complete autopilot. The software contains easy to follow full video and text tutorials in 12 modules. If you have been looking for a residual passive income that is easy to set up then look no further. Just point and click your way to a residual income. Auto wealth maker software allows you to build thousands of backlinks for your created niche site with the click of a button. This software is designed to work for newbies as well as old pros in the online money making world. Everything that you need to get started is included. It is easy to see how you could even make as much as $30,000 per month, or as little as $300 per month, with this software. Yes, if you just do the minimum and only set up one site, you will only have the ability to make around $300 per month. Fortunately, it only takes about 2 minutes to set up one of these sites. Just set up lots of sites if you want to make lots of money. After all, $10 a day is $300 per month. Just 10 sites could bring you about $3,000 per month and 100 sites could bring in $30,000 per month. Check It Out -> http://cash411.info/go/231

  8. Thanks for sharing awesome post. I would like to visit ur site daily.

  9. Rash says:

    Hello i need your help. i try to follow your instruction still failed. can u please fix it. My page number not show up. Im using facebook 3 column theme thanks

  10. Hary says:

    Assalamu’alaikum Abu Farhan,
    saya udah coba masukin ke blog saya tapi kok gak sukses ya..apakah ada step saya yang salah?

    • Hary says:

      Sudah OK sekarang, setelah saya hapus kode berikut…Sangat Terimakasih

      #blog-pager-newer-link {
      display: none;
      }

      #blog-pager-older-link {
      display: none;
      }
      #blog-pager {
      display: none;
      }

  11. jacky says:

    Hey buddy….Not working for me, so i am fed up with this…i found manual method which is easy to adopt than this…create pages labels and put its links numbered below the blogger post page. Thats it, done. Check mine if you want to see, http://www.civilaviationindia.blogspot.com

  12. kent3stan says:

    tnx 4 sharing
    great!!! working on my blog
    http://freemobilegameshere.blogspot.com/
    many tnx

  13. delphi says:

    Hi Abu. Aku harap anda orang Indonesia. Biar lebih gampang menjelaskan.

    Saya ingin menggabungkan dua model navigasi yaitu spt yg ada di halaman ini (number navigation) untuk halaman umum dan newer older post yg menunjukkan judul post untuk di single post. Spt di blog http://www.bloggersentral.com/2011/01/post-titles-replace-older-newer-post.html
    Pertanyaan saya, apa itu mungkin? Karena telah beberapa kali saya coba selalu gagal. Yang kalah adalah number navigasi nya dan yang satunya jadi dobel.
    Semoga anda mengerti maksud saya. Dan dengan sangat memohon jawaban dari anda. Please….

  14. syafwan says:

    assalamualaikum, this script work perfect but how to change its appearance? anyone know?

  15. i have checked this cool site a few times now and i have to say that i find it quite great actually. continue doing what you’re doing! =p

  16. HEy i install this page navigation in my blog
    http://www.aashuzone.blogspot.com

    i have more than 1000 post but it shows limited posts only

    now i have maxsearchresult 5 and it show only 101 or 100 pages only…………..

    there is any solution

  17. junk hauling says:

    That’s quite a few inspirational things. Never knew that beliefs could be this varied. With thanks for all the excitement to provide such helpful tips here.

  18. ritesh says:

    Still i am not able to add page navigation on my blog estudentsguide.com

  19. [...] Post with Page Numbering‘, the code provided there got some bug. So its not working now. Abu Frhan now fixed this bug. Here is the simple way to implement it in blogger [...]

  20. Geisha says:

    Hello sir, well sir i did try to put ur page nav but see where the older post comes in my blog please help me urgently it doesnt come where i want it to
    see http://teztingz.blogspot.com/ help me please

  21. SMS says:

    I can’t find this code

    Help Plz.

    Thanks

  22. Jayrweblog says:

    It works! Thanks a lot friend..

  23. Eden says:

    sy kok g bsa2 ya… tolong dong d bantu,,, sy sudah menggunakan banyak tutorial d google, dan hasilnya tetap tdk bsa…..

  24. Alois says:

    Hello

    The page nav widget stop working on my blog. I can not see it.

    Thanks

  25. Ihsan says:

    @tashacaa

    Abu-Farhan is my savior too :)

    Thank you so much Farhan!

  26. Hey, I’ve already read this one. see sites with google But well, thank you for sharing. i have bookmarked your site.

  27. Momoe says:

    it work.. but not show all post.. how to fix this..

  28. thupera says:

    Hey it works fine. thank you very much for the post.

  29. KuMia says:

    Dear sirs,

    I try to do this tip properly, but the label can not show Page Navigation. It only shows in Home page. i don’t know how to fix it. Pls help me. Thanks alot.

  30. Where do you find good enough theme for WP? There are enough cool themes, but sometimes complicated in settings. I have tried last versions of Crackatoa, Aparatus, Jarrah, DesignPile, also I have tried also ProSense – simple, but made for adsense. Not very often I can find something normal but rich in settings.

  31. The new script given works with me. Thanks for the astounding tricks you have just shared.

  32. Aqeel says:

    Thnx for widget
    it works on my home page but not shown in any label. all post are shown no page navigation show :(

  33. Waqar Adil says:

    Thanks Dear.. Working perfect with my blog..

  34. bunyawan says:

    nice info, thanks so much bro.

  35. Mr.O says:

    السلام عليكمHello Abu I’ve been at this the whole of the weekend back and forth through all sorts of other posts and web hacks and even so called easy widgets that claim you can do it easily by adding it as a gadget still nothing so I need help I use a practiceblog at

    http://practiseblogging.blogspot.com/

    Before putting anything on my main blog. Please is it possible that you could help me sort this out?

    regards

  36. Hi,I discover that your weblog is very instructive and useful and we were interested if there is really a possibility of acquiring More articles like this on your website. If you willing to support us out, we would be willing to compensate you… Sincerely, Shellie Martorana

  37. Good share, great article, very usefull for us¡­thanks.

  38. Rob Dickens says:

    Isn’t working for :( Pls help.

    • admin says:

      you hide your page navigation
      #blog-pager-newer-link {
      display: none;
      }

      #blog-pager-older-link {
      display: none;
      }
      #blog-pager {
      display: none;
      }

      Delete those lines

  39. Rob Dickens says:

    I don’t know what I’m doing :( I tried everything you said and it’s not showing. Using custom template.

    Thanks for your help, in advance.

  40. Yes thank you for this widget.

  41. Jimmie Milum says:

    I haven’t visited your blog in ages, but really enjoyed this post! Makes a welcome change from the usual stuff I’ve been RSS’ing lately. Can I ask where you got the idea to write about this?

  42. indra says:

    not working.. parsed..??? tuing tuing… any suggestion… please..

  43. the.OCTOBER says:

    worked perfectly on my test page! thank u so much!! :D

  44. Great advice! Loyalty shouldn’t be underestimated. Too often, it’s taken for granted. In the long run, hard work doesn’t go unrewarded.

  45. Nice review. I got to your site with yahoo while i was researching for web hosting services. I will recommend your site to other people and I am sure they hopefully think the same about your writing on this site.Regards

  46. [...] Page Navigation for Blogger (Problems Solved) [...]

  47. I followed the instructions but for some readon nothing changes in my blog..i’m thinking there is something else in this custom template that is messing with what you’re doing. My template is from a theme called “dark news”, but i’ve already been able to make some modifications to…is there a way for me to send you my template or something like that?..has anyone with a custom template experienced these problems as well?

    thanks for any feedback

  48. tashcaa says:

    It work’s now. Thank you. You are genius :)

Leave a Reply

Copyright 2009 - 2010  Choen