Numbered Page Navigation For Blogger New Script
December 11th, 2009
Page navigation is need for all blogger because it can make navigation easy for your visitors. Previous script have some weakness :
- Maximum posts 500
- Have to read all JSON file if post so many make your blog slow
- Need long loop to calculate all posts (no body know this if they not read the script)
Now all those problems can be solved, Insya Allah. The script is different with My Previous Modification Nummbered Page Navigation for blogger, the script based on my own idea and for style I used from Mohamed Rias
To see the result open These demos:
- Demo for Minima
- Demo for Custom Template (Irressistible from Anshul)
- Demo for Classic from Choen Blog
Step 1 : Apply Style
- Login to Blogger Dashboard and navigate to Layout > Edit Html
- Don’t click the checkbox which says ‘Expand Widget Templates’
- Find this
]]></b:skin>
and replace it with
.showpageNum a {
padding: 3px 8px;
margin:0 4px;
text-decoration: none;
border:1px solid #999;
-webkit-border-radius:3px;-moz-border-radius:3px;
background: #ddd;
}
.showpageOf {
margin:0 8px 0 0;
}
.showpageNum a:hover {
border:1px solid #888;
background: #ccc;
}
.showpagePoint {
color:#fff;
text-shadow:0 1px 2px #333;
padding: 3px 8px;
margin: 2px;
font-weight: 700;
-webkit-border-radius:3px;-moz-border-radius:3px;
border:1px solid #999;
background: #666;
text-decoration: none;
}
]]></b:skin>
Above style use Old Style You can use Six other style from this Posts
Six Styles Page Navigation for Blogger
Step 2 : Aplly Javascript
Find This :
</body>
Replace with :
<script type='text/javascript'>
var home_page="/";
var urlactivepage=location.href;
var postperpage=7;
var numshowpage=4;
var upPageWord ='Prev';
var downPageWord ='Next';
</script>
<script src='http://scriptabufarhan.googlecode.com/svn/trunk/pagenaviv202-min.js' type='text/javascript'></script>
</body>
Change based on your blog setting :
var postperpage=7;
var numshowpage=4;
Postperpage : How many Post every Page for your blog
numshowpage : how Many number will show in Your page Navigation
Step 3 : Customize Label (if you already use my previous Page Navi don’t use this step)
Go to the Edit HTML page and “Expand Widget Templates”
Find this (all of this text in your xml or template)
'data:label.url'
and Replace with this
'data:label.url + "?&max-results=7"'
Change 7 base on how many post every page
only That, I hope it can work and make your blog easy to navigate, amiin
- Six Styles Page Navigation for Blogger
- Beautiful New Page Navi For Blogger With Scroll
- Page navigation for Blogger with Google Style
- Page Navigation for Blogger (Problems Solved)
234 Responses to “Numbered Page Navigation For Blogger New Script”
Leave a Reply
Assalamu’alaykum …
Syukron Katsiron Mas Abu Farhan..
Ilmunya berhasil saya terapkan di blog saya..
Mas Abu..
apa bisa saya minta izin hilangkan linknya?
Thank you for the wonderful widget.
At first i cant see the widget appear at blog posts and labels. After some exploring, realising that i have to set the blog readers permissions setting to “Allow Anybody” and finally i can see it.
One thing to take note, if u have already replaced ‘data:label.url’ to ‘data:label.url + "?&max-results=7"’ and u remove the labels widget accidentally, then u have to redo this step again after u put back the label widget.
Hope this helps some of the readers here :)
nice widget but its not working on blog pages and label post
Hi Abu,
I have been trying to implement this page navigation for some time using your codes, muhammad’s and other’s too. However one thing is that, the box (the border covering the numbers) is broken. And also, the page navigation is not visible using Chrome.
You can try visiting my blog to clarify about the problem. At the moment, I am using the 1-click installation from Aneesh.
I really appreciate if you can reply asap regarding this. You can also email me. I will be waiting for your replies.
Thank you very much!
salam,
i tried all kinds of the page navi codes on the web.. NO one works for me.. even urs abu
i dont know whats the prob exactly ..
may you give me some help? i realy need this code in my blog , i have more than 5000 posts in there , and it will be fine for me if it work for the last 500 posts..
iza betreed abu far7an, nater mennak jawab.
thank you boss , its done , but still do not work by archives ..
here did not!
abu hello, I wonder how you have put an image
background on the page navigation
from all the page navigation in the web yours is the best
tanks & tanks
keren abis postingannya …
Assalamualaikum
Alhamdulillah, berhasil
terimakasih
saya tunggu karya karya fantastis lainnya
Wassalamualaikum wr.wb.
Maaf kang abu,, saya mau sedikit edit scriptnya yah … terima kasih
So cool mr. abu farhan. haha
sir the js is not working please help me
Dude the javascript link for the following file is nt working since the last 2 days..kindly rectify-
http://all-in-one-blogger-widget.googlecode.com/files/pagenaviv202-min.js
abu please do something about this man..i really need this on my blog.
I updated the post already please check
I can’t find this code. where?
‘data:label.url’
perhaps this is not working ;)
http://all-in-one-blogger-widget.googlecode.com/files/pagenaviv202-min.js
Hi again Abu the page navigation has just disappeared Ive tried installing it three times now and still its not returning please help.
[...] que puedan trabajar y hacer que tu blog fácil de navegar, Amiin Este script original es gracias a http://www.abu-farhan.com [...]
Hi Abu..
I have done all the things step by step…My site is also having Blog-pager ID but then also this one is not working for me..
and widget by annesh (bloggerplugin.org) is working..
Pls help me out…
the widget of annesh is visible on my site but not full…
and i loved your new page navigation so pls help me out…
Hi Prash did you have a look at what I posted below just in case that might help
I cant navigate to what post you r trying to say… so if u can post it here again????
Chk out my site once….and pls let me know the problem…its urgent..
Thanks
Hi Abu ive got another issue now that I have installed the page nummber navigations why is it that when I go directly to the page via Navigation Menu on the left the page number navigation is no longer there at the bottom.
Please get back to me regards
As Salamo Alaikom wa rahmatollah
Akhi, I need your help. I just can’t make it to word on my label pages. I’ve managed to cut a number of posts (replacing data:label.url) to my desired posts but pagination just doesn’t appear on labels.
You can check it on this post – http://www.islamskeknjige.com/search/label/Amr%20Halid?max-results=8
There is 14 posts on that label, I’ve made it to show max 8 posts but it still displays newer/oldest.
Can you please check it and see what I’m doing wrong ? I can send you template html if that’s better.
I’m not using your code now since I’ve added other one earlier and would need to change all css for it but I’ve checked it with your code and it still wouldn’t display pagination on label pages.
JazzakAllah khair
Almir
Wa’alaikumsalam warohmatullahi wabarokatuh
You are using my old Page navi, use my new page navigation
abu farhan, my navpage can not show . . . . .
You don’t have blog-pager id
Olá essa dica foi muito util, tive que modificar algumas partes do codigo mas ele está funcionado perfeitamente, abraços de um de seus leitores do BRASIL!
This is awesome.. What a great tutorial and its really work on mine. Thanks a lot.
-
BISMILLAH
ALHUMDULILLAH
ABU-FARHAN
THANK YOU SO MUCH FOR THE INFORMATION, FROM TRINIDAD AND TOBAGO. I HAVE FOLLOWED ALL THE STEPS BUT THIS IS NOT FUNCTIONING IN MY BLOG.
WOULD YOU MIND HELPING ME PLEASE. IT IS TOO IMPORTANT THAT IT COULD WORK BECAUSE I NEED TO APPLY THE SAME IN ANOTHER ONE. THANKS IF IT POSSIBLE YOU CHECK MY CODE.
BISMILLAH
ALHUMDULILLAH
FOREVER !
I can’t open your blog
Hi Abu-farhan, this tutorial is absolutely great!, may I upload the script to other host and edit some lines?.
Regards!
Thank you abo-farhan, this is great job
am asking permission to do some edit:
1- to upload the script to my own host.
2- to edit the “Widget by Abu-farhan” to “by Abu-farhan”.
salam-o-alaikom
i am from iran
many thanx for this.
i searched a lot on google & allblogtools.com with lovly max, but none was working and finally i found yours.
in finally it is work.
thanx,thanx,thanx
10 million thanx
God protect you.
[...] Page Navigation Ready [...]
thanks so much for the navigation bar. i love it. if you have time can you show me how to stop the tops of the numbers from being cut off. See my page. thanks soo much
thanks ~ nice =) i use it~
many thanx for this.
i searched a lot on google, but none was working and finally i found yours.
a question i have,
you have written that 500 post limitation has been solved, so will it work for unlimited posts ???
Thank You once again !!!
OK, clear about my problem,
but any title widget with your name.
it’s bad for looking.
so how i can remove the title?
hi abu..not working after i try it.
so what other problem??
my older post (default) still have,
and Page navigation don’t have
Nafa’anallahu bi ulumikum…
Banjarkah? sudah nda pake di web nda.
Keep working bro…
when i save template it’s shows me this:
The element type “html” must be terminated by the matching end-tag “”.
where is this?
salam.
can u look at my blog why it become like that?. it seem the font “page 1 of 55″ show at right.
btw your script it cool. nice =D
would be nice to add some pictures to understand better, plis … thanks!
Farhan bhai…excellent
Hey buddy… you just made my day….
Thnx again for this widget…
Hey nice work…. u just made my day
-http://funktm.blogspot.com
[...] Numbered Page Navigation For Blogger New Script [...]
Asslam Waalekum bhaijaan
I am using your page navigation widget in my blog. Uptil now it was working fine. But when I installed LinkWithin widget, then from 2nd page onwards it is not being displayed correctly. Please see it for yourself at my blog http://www.KnowledgeHub.co.in. There navigate to 2nd page or any other page. You’ll see the problem for yourself.
Please help me in resolving this problem.
Thanks.
add this Style , info from Choen
#blog-pager {
clear:both;
padding-top:10px;
text-align:center;
}
Very Nice….
It’s not working for me.
The code just showing the title of the post, not the contents of the post.
After clicking the title, it will show the contents of the post BUT
the paginate gone!
You are using my Old Page Navi
which one is the newest? I spend this whole day to do pagination
This post the latest one
Is there any way to NOT SHOW page navigation on Home Page??
used if in blogger template
He is just so cool!
Jazakallah bikhoyr ya akh…
waiiyakum
Alhamdulillah…Abu memang TOP…makasih ilmunya