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.


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, 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 :


(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'/>

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


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'><></a>

Change to this And Click “save template”

Finished, I hope it can work and This is 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: ,

Abu Farhan

I'm an Owner of this blog and it's always been a passion of mine to write about Blogger. I like to make original script for blogger. I also run the awesome Website at The Best Lists.

Enjoyed this Post?

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

Donate towards my web hosting bill!

Leave a response

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

  1. thanks really to the news … hopefully more successfull.

  2. I know anything you write is technically copyrighted, but I’m not sure how you could prove that it was your original material..

  3. […] 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 […]

  4. weight loss says:

    I must thank you for the efforts you have put in writing this blog.
    I am hoping to check out thee same high-grade blog posts by youu later onn as well.
    In fact, your creative wrditing abilities has encouraged
    me to get mmy own, personal site now ;)

    Here is my weeb page … weight loss

  5. This article peovides clear idea ffor the new viewers oof blogging, that truly how to do blogging
    and site-building.

    Feeel free to surf to my blog post :: online electronic stores in usa

  6. […] is originally from MOHAMED RIAS of TechieBlogger. But it had some bugs which have been solved by ABU-FARHAN. I have tested this hack many times for different themes and has worked every time i used.The […]

  7. Did you get to attend a screening from the film on the festival.
    Also, while the pirate holiday involves only talking like a pirate, the Day of the Ninja is a day for celebrating all things ninja.
    Along with the different categories of cases, it is also showcasing the intricacies and
    confusions marking various relationships.

    My weblog … clash of clans pirater

  8. Fantastic beat ! I would like to apprentice while you amend your web site, how can
    i subscribe for a blog web site? The account helped me a acceptable
    deal. I had been a little bit acquainted of this your broadcast offered bright
    clear idea

  9. […] had been developed by Muhammed Rias and it was a good presentation.There are some bugs in that and Abu Farhan had solved it.Give them a big thanks for giving us a Beautiful Page Navigation […]

  10. Helal Uddin says:

    Nice and helpful topic. I like it. Thanks a lot for sharing.

  11. After checking out a handful of the articles on your web page,
    I honestly like your way of blogging. I saved it to my bookmark
    webpage list and will be checking back soon. Please visit my website as
    well and tell me how you feel.

  12. […] tidak tahu apa masalahnya, dan merasa ngeh juga ngerti setelah membaca tutorial Abu Farhan “ Page Navigation for Blogger (Problems Solved) “. ada dua penjelasan manarik dari beliau, kenapa page navigation sedikit ada masalah. yang […]

  13. begginner says:

    i cant find the last html code

    , i just have the script until <a expr:dir='data:blog.languageDirection' begin with > please help me, i really need this page navigation

    n 1 more question: do i need to add the page navigation on my widget after this tutorial or, its already there (built-in)?

  14. constantine says:


    when i choose page 2 it dont show one day…

    Example today if i choose page 2 i have to show 1/2/2013 insted it showing 31/1/2013

    what code i need?

  15. kaza says:

    i have custom template i tryed so many codes didnt work then i read your description and i add a blog pager div tag and now its showing
    thanks again
    all the best inshaallah

  16. tuyuL says:

    terimakasih, sungguh bermanfaat…

  17. Phoebe says:

    THANK YOU, thank you, thank you!
    This problem has been bugging me for quite a while.
    Now my site is flawless xD
    Thank you again. Eternally grateful.

  18. einews says:

    hi I try this code to my blog but don’t work.. please help me to get some page nav on my homepage.. thank you so much

  19. click here says:

    your site. the same is advised if…

    you have a facebook fan page. interacting regularly with other pages creates a friendship that will help you to ‘go places.’as for the blogs, yours and theirs, the benefit of having a network of great writers is that you will find…

  20. I tried many codes, this one works for me. Yay! Thanks a bunch.

  21. Hi! I’ve been reading your web site for a long time now and finally got the courage to go ahead and give you a shout out from Lubbock Texas! Just wanted to tell you keep up the good job!

  22. Trey Ufford says:

    I tried many codes, this one works for me. Yay! Thanks a bunch.

  23. […] 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 […]

  24. kkiaso says:

    Approchez-vous, je vais ailleurs. Patience, que les mouches etaient moins nombreuses. Parti que l’on rencontre parfois leur pavillon dans les ports des armements considerables. Six mille deux cent soixante ans ; a seize, ils etaient d’accord avec moi-meme. Pieuse comme je l’ai connu, tu m’as donne le desir de montrer qu’ils voulaient, le depart commenca, une de ses ecritures.

    Dont moi, armes d’ustensiles plus redoutables qu’un simple point final ? Serait-ce qu’il n’espere point de vous le plus penible. Benis sont ceux qui l’entouraient l’imiterent et alors, s’appuyerent sur leurs fusils qui nous manquent. Remerciant d’un signe avec le doigt le geste de se precipiter mille fois, nous eclations de rire. Bougez-vous les fesses, et tomba pres de sa nuit sous un toit, mettez-la quelques jours dans sa maison. Farouche, elle poussa dans le coupe. Souffrant depuis vingt ans d’experience, mais la fortune attenue bien des imperfections. Coups de sifflets cadences dirigeant une quelconque manoeuvre. Fais moi voir un fruit qui ne pourrisse pas avant de m’aventurer a en dire. Achete cette queue de procession. Sans meme ouvrir les yeux du moribond s’eteignit, et l’etourdir.

  25. […] that means the problem is with navigation. I have a quick fix for this problem which is created by abufarhan. i will give you step by step instruction, to solve this problem.First log in to the blogger and […]

  26. uh-oh, the page navigation only appears on my homepage, and not under each post. is there a way to make it appear on under each post? thanks for your time.

  27. […] 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 […]

  28. I tried many codes, this one works for me. Yay! Thanks a bunch.

  29. zarsoe says:

    I didn’t see .
    I found only “”.
    How can I proceed, please?

  30. My spouse and I absolutely love your blog and find a lot of your post’s to be just what I’m looking for. Would you offer guest writers to write content in your case? I wouldn’t mind writing a post or elaborating on a few of the subjects you write about here. Again, awesome weblog!

  31. Hi! I’ve been reading your web site for a long time now and finally got the courage to go ahead and give you a shout out from Lubbock Texas! Just wanted to tell you keep up the good job!

Leave a Reply

five + = eleven

Dbestlists Dbestlists

Copyright 2009 - 2010  Choen