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
- Numbered Page Navigation For Blogger New Script
- Beautiful New Page Navi For Blogger With Scroll
- Five Styles Page Navigation for Blogger New Script Part 2
- Five Styles Page Navigation for Blogger New Script Part 1
- Six Styles Page Navigation for Blogger
- Page navigation for Blogger with Google style using New Script
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 :
- 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.
- 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 :
- 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).
- 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 :
- Var timestamp , Prev hack only count Date not time, the problem occur when many post in one day.
- Separate JSON link and Function script for Page and Label.
- 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'/>
</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
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 :
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.
237 Responses to “Page Navigation for Blogger (Problems Solved)”
Leave a Reply
PLEASE DONATE MY BLOG
Social Network
Assalamu’alaikum
I’ve changed the blog template & tried to put the code again it still appear for the main page but not in the lables
I’ve read all the topic and do exactly as you say
This image illustrate what I’ve done
http://3.bp.blogspot.com/_8c7uqzB33xM/SxU2gsalFKI/AAAAAAAAAG4/GloEi8_7xm0/s320/label.JPG
If I can’t modify the code can I send you my blog template to modify it ????
Thank You
Thank you very much for this code but it doesn’t work for labels ^^!
Please check my blog & tell me how can I make it work for labels.
And again thank you .
You didn’t finish follow All Instructions, please read again
Bismillah first I want to thank you & all the Muslims who help you to work on this great blog ,it makes me happy to know that Muslims -Like me- Have great significance in programming field.
I’ve follow each single instruction given ,But it still appear 20 post in every label page without navigation bar ( I’ve adjust it to make 10 posts only appear in the main page ,but it doesn’t work for labels & i don’t know why ! ) . the original newer & older Posts buttons are appear in the label page.
thank you again for your help
Assalamu’alaikum
in blogger if you not give max number in label it will show 20 posts and my script will not show page navi.
you have to follow
Modification Step for Label :
you can check in my post, you have to follow 3 step from that section
I hope it can work Insya Allah
Insya Allah will have newscript for Page navi after my defense, Insya Allah I’ll post in here, so wait.
Very thanks for your explanation. You’re right. Now, I still enjoying to use your script in my blog, although it have been made my blog a little slow. And I still waiting for your future’s good works. Thanks, bro.
I had implemented this script, and it works good. Thanks. But I have the same story with Mia. Your script still have some bugs. The current number of the posts I have 846 posts. But that appears only 84 x 6 = 504 posts. Would you please to tell me how to fix this bug ? Please … you can send it via mail, too. Thanks for all of your efforts. I’m very appreciate it.
Actually that is not bug of script (if you understand what is the meaning of bug in programming). That problem come from blogger Feed they only give maximum 500. Actually I have more than 500 but it will make slow of your loading page. So wait until my exam finished I’ll release new page navigation that more faster Insya Allah.
Here is another page navigation script which does not have the 500-article limit:
http://translate.google.com/translat?js=y&prev=_t&hl=e&ie=UTF-8&u=http%3A%2F%2Fwww.vietwebguide.com%2FF2008%2FF12%2Fblogger-pager-script-version20.html&sl=auto&tl=n
I know that one already but difficult for visitor have to type manual not directly click. I have better than that one and no limit but because I’m busy for my defense so everybody have to wait my new hack Insya Allah
Thanks! I also like the original “click” layout more. I appreciate your effort and I am looking forward to your new code. Good luck on your defense!
You are welcome, I hope you enjoy my posts
If you are from Taiwan, last year I went there for seminar and I like your country.
the navigation only show in main page…
but when use label its not shown,,
please help me fix this..
this is my blog,.please check it,whats wrong??
I just check again to your blog you use two script from muhammad rias and Anesh , maybe conflict, two of them are same from my script
i have remove the other script,but its still not working..
plz help me,i realy need this,,
aneh emang padahal dah ada blog-pager nya nantilah kalau ga sibuk tak cek2 lagi
please check site Code not working properly.
It’s working but you not follow all instructions you not give CSS .
thank you for this beautiful hack. i have done it successfully in my site.
Hi,
I want to try your code but your links to the code are broken. I’m getting 404 problem. Can you look into it please?
I’m running into the missing posts and label post display problems mentioned over at blogger buster. Unfortunately, that blog author seems to have given up on the problems and has not attended to most of them.
Appreciate your help.
Thanks.
I’m sorry have problem with my dropbox account, now I changed it in my host, you can try now
Hi,
Is it Shows page navigation for only 500 posts or per label 500 posts?
Maximum feed of Blogger now is 500 so for this hack only read last 500 post.
Actually I have hack for more than 500 post but until now I’m not release yet because will have problem with blog loading time because have to read more than 500 post and calculate the page number.
Until now I’m very busy with my disseration presentation and defense so I’ll not release any hack until my defense finished, I hope you Understand, So keep visit my blog or subcribe to my feed or follow me on http://twiter.com/abu_farhan
HELOW THE SCRIPT IS WORKING Well in my site.
But the thing is …
I already set the pagenumber to var pageCount = 25
Homepage looks Good but when a select a certain label var pageCount went back to 10
You not finished follow all instructions, please read again.
You not make max number of post in label.
I am really sorry but it was not working at that time but now it worked and i got that code from your this button in blue color and the trick worked thanks a lot brother.
Take the best care of yourself
Regards,
Shah faisal
And please do remember to give me your islamic blogs link i will comeback to take those.xD
Alhamdulillah, I hope it useful for you
My islamic blog some from my link of islam in my sidebar (only some not all)
Until now I’m busy for my Disseration, Insya Allah after my Defense I’ll release new Hack for this Page Navi and Other hack also, so keep visit my blog and subcribe to my feed
http://feeds.feedburner.com/AbuFarhan
Follow me on my http://twitter.com/abu_farhan
The this of which i am now talking about is in blue color.
Asalam o alikum brother
Well i was not able to follow your step as i have two of those codes in my html.
And if you say to replace both of them then i will do it for sure but there is one problem that your this button is not working i dunno why.
Your this button means the place where you have placed the code.
I am really happy for your quick helps and really thankful to you.
I would like you to give me your islamic blogs link so that i can give it to all of my friends.
I would also like to chat with you someday, but the exams are near in the december of acca so i will not be able to chat these days.
And for sure when i will use your codes or tricks i will back link it you, as my brother.\
http://www.blogotemplates.blogspot.com/
Another thing that i saw at your place is that you have not placed ads, does that mean you are doing complete social service?
I just start for give my hack for blogger, actually I’m admin for moslem blogs, this only for my personal blog.
Asalam o alikum brother abu farhan i have to ask for many kind of helps from you but in the coming future but for now i want your help, i am using this page navigation system on my
http://www.blogotemplates.blogspot.com/
There goto tags cloud and click on any of them when it opens the page navigation buttons gets disappeared while i have seen that other people who uses this widget it still remains there, i would like you to help me for this you have helped me before and really quick you were, i am really happy to see that there is someone good as you as i have asked many people for help like klodian amanda dantearouja and anshul dudeja, i know you all of them maybe you are friend with them, but they refused.
Well take the best care of yourself brother.
I wish you success and happy eid in advance.
Wa’alaikumsalam brother, The problem because you didn’t follow last step, pleas read again this section :
Modification Step for Label :
in my blog can’t show, please the solve ?? http://speechyourm1nd.blogspot.com/
Belum ada javascriptnya disana belum diletakkin ya ?
sudah di lakukan semua yg di tulis akang abu, cmn masih blm ngerti kok nda nongol jg yak kang
Belum ada tuh Javascriptnya belum dimasukkan kali nih ?
Hi,one problem.I dont have there,what i do??
this is whats is look in my html
any help ?
I’m sorry can’t understand the problem
Masha allah , baraka allah feek, this is great effort
I have succesfully installed it in my blogs, it’s really cool.
there is one notice, this widget shown only in the Home page http://islamicpdf.blogspot.com/
and when i click on categories or a post, it only appear ” older posts” and ” newer posts” .
I hope you can fix that when you are free ,
jazaka allah khair
Wa feekabarakallahu
Alhamdulillah
you only need to follow last instruction :
Modification Step for Label :
it will show page number in label
Make doa for me I can finish my study, after that I’ll make new hack for page navigation (more easy and faster)
For Ebook template I already promise to my friend will make new template special only for ebook Blog Insha Allah. all of that after I graduate from my study, I hope Allah make easy for everything all of us, amiin
So the summary is like this:
(pages) (home) (previous)1,2,3,4,5,… ,50,51,52,…, 99,100 (next)( last)
Go to page (“blank”)
Wow you made so mnay comment for this,
Actually everything I can Insha Allah, but for this 2 months I’m very busy with my study, so for a while I’m not make any hack or revise any hack. Actually I prepared many hacks but I don’t have enough time to make tuts for those hacks.
Ok. So I will wait you for 2 month, hope you can do that. Are you a university student?
Hello Abu, is me again. I have a request, can you modified the this page navigator into more special? My blog have more than thousand of posts, each page have 10 posts, so my blog have more than 100 pages, so I hope you could modify this java code?
Can you make the page navi into like this?
(pages) (home) (previous)1,2,3,4,5,… ,50,51,52,…, 99,100 (next)( last)
and also can you make the code have this thing?
go to page ( ) “the bracket is the page that visitor want go go”
Hello Abu, is me again. I have a request, can you modified the this page navigator into more special? My blog have more than thousand of posts, each page have 10 posts, so my blog have more than 100 pages, so I hope you could modify this java code?
Can you make the page navi into like this?
(pages) (home) (previous)1,2,3,4,5,… ,50,51,52,…, 99,100 (next)( last)
Hello Abu, how about the Archive, can you make some modified to it so it show the same amount of posts with “var pageCount=10″
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…
Yes you can, you only change css style you can try from blog that first time made this hack http://www.techieblogger.com/2009/10/page-navigation-javascript-code-for-blogspot-blogs.html
I am Using the pafe navigation widget provided by http://www.bloggerplugins.org/2009/09/numbered-page-navigation-for-blogger.html..but my problem is that it is showing only 101 Pages and in real there are more than 500 pages…the owner of the site is not replying to the problem…so can you help me out…
HAVE A LOOK ON MY SITE: http://www.prashdownload.com/
Wait my new hack after my study finish Insya Allah
[...] Page Navigation Script Problems solved ( Abu Farhan ) [...]
dude, you’re fix is good and working but the script still has a big problem: it will show only 125 pages x 5 post per pages ~ 625 posts. If you have over 1000 post on blog the older posts over those 625 will not be shown.
can you fix this ?
Actually thats not Big problem, I know already about this long time ago and make script for that, but I still looking for way to make Page load faster, If you use that script it will make your blog very very slow to load because have big json data to download, it not good for your visitor and useualy visitor not open All your page navi until end if you have more than 100 it take 1 hour for your visitor to load your content one by one, Its better you manage by Label.
The problem because Blogger only give Max 500 post from their JSON, I made hack for that, but I need to modify to make it faster to download.
So wait from this blog I will release that hack after my work finish.
mas, falknersphere bisa dikasih page navigation ga????
ko saya cari kode yang step 3 kog ga ada ya
Coba ikutin cara dari Anesh (bloggerplugin) aja, Scriptnya sama dari aku juga cuman dia gampang neranginnya
http://www.bloggerplugins.org/2009/09/numbered-page-navigation-for-blogger.html
Thanks brother for this fast reply.
Can you guide me where to put it in my xml, and you didn’t replied to my 2nd question.
Regards,
shah faisal.
Open this file http://dl.getdropbox.com/u/708209/scriptabufarhan/jawaban/navi/pagenavi.txt
Thanks brother abu farhan it worked.
Asalam-o-alikum
Dear friend i need your help your hack is not working on my template and i am also unable to find this in html codes
i am in deep trouble please help me i tried this on this place
http://blogotemplates.blogspot.com/
and failed.
i tried on another place but there the widget is dancing and really working badly. if you move your mouse over your widget over in that place all buttons will start moving.
that place is http://wallpaperania.blogspot.com/
please please help
Wa’alaikumsalam
in http://blogotemplates.blogspot.com/ don’t have <div class=’blog-pager’ id=’blog-pager’> so this hack can’t show, you have to put that div inside of your xml
Thanks brother for this fast reply.
Can you guide me where to put it in my xml, and you didn’t replied to my 2nd question.
please do remember to help me
Asalam-o-alikum,
Dear friend i am in trouble first of all your page number navigation is not working on my template and 2ndly i would like to say that i was unable to find this
please help me.
Regards,
Shah faisal
http://blogotemplates.blogspot.com/
thank you its good
http://elkawthar.blogspot.com/
Not working on my website … plz help !!
Its working in home page only and not label pages !!
I’ve done all the changes including the one for labels. But its still not working !!
Here’s my website – http://www.orkuthelp.com
I checked you blog have problem with original Page Navi from blogger check your template. try remove my script try open by label. Older or New Page show or not?
I used the hack on my blog but it only shows in the home page and not in label pages !!!!!
I’ve used all the modifications including the one meant for labels but still no use.
Please Help !!
Here’s my website – http://www.orkuthelp.com
the CSS file cannot be acessed..
Sometime dropbox like that you can try again now.
[...] 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 [...]
Hi admin, your code doesn’t work on IE 8 under custom domain, it only work with Firefox 3.5, can you fix this problem? Thank.
I tried using IE7 can show page number, maybe problem with json data from your blog usualy have special character Itried here http://browsershots.org/http://page-navigation-abu-farhan.blogspot.com/ (expired after 30 minute)
Hi i think problem is my blogger templates , i try the same trick with simple templates its working fine , can you please take a look of my blog please. here is my blog template code – http://www.bloggertricks.com/2008/06/field-of-dreams-blogger-template.html
Thanks,
Arun
Itried that template and this is the result can show the Page navi http://originaltricks.blogspot.com/
[...] Method is same with Page Navigation for Blogger (Problems Solved) [...]
Abu Farhan sir need your help, still i am not able to use the script with my blog..
Please check my site magichow.com
Please provide me your mail id so i can get in touch with u,
Thanks,
Arun
In your blog you don’t have blog-pager id you can add it
check minima template from original blogger template
my email admin [at] abu-farhan.com
hi there,
i am not getting this line in my blog template
“”
MY SITE: http://www.prashdownload.com/
hi all, hi great author, thanks for your amazing efforts to make this easy for all, i published a tutorial today on allblogtools.com about this hack and i linked to your page.
thanks
Thank you brother Abu Farhan !
I’ll try it soon and write about this useful modification.
Eid Mubarak brother .
You’re welcome my Brother.
Eid Mubarok.
I made TOC by archive you can read here Table of Contents Categorized by Dates (by Archived) for Blogger
hey Bismallah, hope all is great w/ you . Well, I made the pop up footer ! I actually implemented it into 2 of my blogs , however : on my main blog HERE , if you look, you will see it “jumps” when the page opens , to the upper right , and then it settles back to the bottom of the page again . It’s a minor problem ( my other page doesnt do this ) and I am wondering that maybe this is happening here because certain javascripts may be conflicting with one another ? I dont know . But I guess its a small price to pay , since this is a great space saver & one doesnt have to create giant footers to put everything into . Thanks again for the link to the script .
God bless .
M.
Wow very good design. Btw from where you have that woothemes template, I can’t find that template from everywhere.
Actually something wrong implementation of your footer. Its happen when I design in blogger also. You not use fake_body this part is very important.
<body>
<div id=”#fake_body”>
….. your entire web content put in here…
</div>
<div id=”#dock”>
….. dock content…..
</div>
</body>
Hello,
Thanks for the great fix! I swear if this fix would take one more day to come, I would go crazy. I needed this so much, thanks a lot, you will be considered a hero by many many blogger users!
Now I need your help. I just implemented the script in a blog of mine, but I got a problem. I set it up to show only 4 posts per page, and it says that I have 3 pages, but when I click the page number 2, it goes to the page number 3 and tell that I have no posts on that page, it’s like a ghost page with no posts. How can I fix this ? Also when I am on page 1 and click “next”, it goes to page 3 instead of 2.
Please take a look on this, and try to help me, I apreciatte it!
Here’s the problem URL: http://viredesenho.blogspot.com/
Best Regards,
Dante Araujo
You have 9 posts
The problem is you publish very quick the different in milisecond. in this problem, Blogger not provide until miliseocond
these are your publish time :
2009-09-15T18:04:00.001-07:00
2009-09-15T16:43:00.002-07:00
2009-09-15T16:43:00.000-07:00
2009-09-15T16:38:00.010-07:00
2009-09-15T16:38:00.008-07:00
2009-09-15T16:38:00.006-07:00
2009-09-15T16:38:00.004-07:00
2009-09-15T16:38:00.002-07:00
2009-09-15T16:38:00.000-07:00
last 6 different only in milisecond
Good work buddy! The page navigation is the best thing that can happen to blogger.This one is awesome. Thanks to Muhammad and you… nice fix using the timestamp.
I really wish that blogger will come up with their own page navigation with pretty permalinks like the wp-pagenavi plugin by lester chan. .:) mainly because i hate long links and also hate the fact that there are no json feeds for search results. Another thing is that we can’t change normal numer of posts displayed on a label page(20). :(
BTW it would be better if you include the big javascript code into an external file so that normal bloggers don’t get confused by the big code..(just a suggestion)
Thanks for visiting my blog, you already implement this script to your blog.
Yes maybe someday blogger will provide fix page navi like plugin in wp.
Yes one problem is json feed for Search they not provide so I can’t make page number for that, actually I can make pake number base on indexof content but result is different with blogger search.
Actually I want to give JS link, but until now I can’t find Free internet storage provide fast and no bandwidth limit.
Maybe I’ll wait if many user have problem I’ll use my server for that.
Btw, You can use my script for TOC to put in you “ALL POST” section
Salam Alaikum ,
Thanks for fixing the bugs :) I will write about your modifications soon in my blog..
keep the good work going bro :)
Wa’alaikumsalam warohmatullahi wabarokatuh
your script is the best, actually until now I’m not completely understand all algorithm.
still not working for my site, also can u pls give me code for footer bar , thanks
You put wrong position for the script, I checkd offline your website can show the page navi. Read carefully the tutorial, specially position for main javascript.
hehee, ok Bismallah – I guess I will have to learn Indonesian :) I am sure it is a beautiful language . I speak Greek – so I dont know which is more difficult : Indonesian or Greek :) Thank you for the info . I will let you know how I do with the pagination script – I hope it will work now .
Take care & God Bless you .
My Name is Abu Farhan.
You can read all tutorial above for Page Navigation, I hope it can work in your blog.
Your blog design very good, and contact form use modal window.
Hi Bismallah, thanks for this well researched information . I will go and try it out on my other page. I had implemented this script , but yes it does have some bugs . On the page that I have it on – several of my posts do not show up . This is very frustrating , as I had tried desperately to figure out where the problem was . I’m glad that you finally figured it out B. Now I have 1 question : Can you please tell us the script for the pop-up Bar at the bottom of your page please ? I love it – its a great space saver and it helps from having to create giant footers ! So can you please give a tutorial of the script & how to implement it into Blogger ?
Thank you again . Wishing you health , joy & love .
M.
you can try my script to implement in your blog, I hope the result is good. For popup Footer you can learn from here http://www.queness.com/post/281/jquery-dock-menu-tutorial-revisitdock-at-bottom. for blogger actualy I made but in indonesian language
If you using Beautiful New Page Navi For Blogger With Scroll, use only that post. Don’t use this post anymore
understood,
Ty for the reply. I appreciate it…