Page Navigation for Blogger (Problems Solved)
September 14th, 2009
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.
186 Responses to “Page Navigation for Blogger (Problems Solved)”
Leave a Reply
The new script given works with me. Thanks for the astounding tricks you have just shared.
Thnx for widget
it works on my home page but not shown in any label. all post are shown no page navigation show :(
Thanks Dear.. Working perfect with my blog..
nice info, thanks so much bro.
Aslo Abu I forgot to mention I am using the method shown here
http://bloggerstop.net/2010/01/bloggerblogspot-pagination-page.html?showComment=1276475372537_AIe9_BEDf2fmRcPa3BB6_ETAKNpjEa9a-6wCJDh2atKdq03REfYcaG-edQawZn8B2M7ZGkEt40LrCQDf6PSLNJN9dImqHz2PgBgB4kBolW7wAEZRoYh1Lt3aNwnWqtGge1tnMDPY7-B7F7gw4MHzPDw5zFuK8HAs_kllT8VopYnx82w8kWvqRRlkrFo8ZSm8IW61uA-EvVVUN1AuuIsdQDjN_a8IFarWwsafwE5QLfe0Htx2HjN3z2Y#c2111528499300864595
I look forward to hearing from you
Regards
السلام عليكم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
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
Good share, great article, very usefull for us¡thanks.
Isn’t working for :( Pls help.
you hide your page navigation
#blog-pager-newer-link {
display: none;
}
#blog-pager-older-link {
display: none;
}
#blog-pager {
display: none;
}
Delete those lines
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.
Yes thank you for this widget.
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?
not working.. parsed..??? tuing tuing… any suggestion… please..
use my new Pane Navigation script
worked perfectly on my test page! thank u so much!! :D
Use my new script http://www.abu-farhan.com/tag/page-navi/
Great advice! Loyalty shouldn’t be underestimated. Too often, it’s taken for granted. In the long run, hard work doesn’t go unrewarded.
check reply
sorry for my junk comment. I just wanna say, thx for this tips.
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
[...] Page Navigation for Blogger (Problems Solved) [...]
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
I can’t see the script in your blog yet, so I can’t check
It work’s now. Thank you. You are genius :)