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
361 Responses to “Numbered Page Navigation For Blogger New Script”
Leave a Reply
PLEASE DONATE MY BLOG
Social Network
What about my request brother abu farhan? :)
http://bit.ly/5ubH1T
If its hard to do, then we ll use it as it is?
Thank you for your great codes!
Assalaamu’alaikum..
Blog wallpaper saya jadi semakin teroptimasi berkat script ini. Terima kasih banyak…
Bolehkah saya publish ulang cara ini di blog saya? Tentu saja credit dan live link untuk Anda tetap saya sertakan.
eh, om..
apa ni script bentrok sama tag cloud cumulus ya??
Assalammualaikum, Alhamdulillah, I used this widget with Falknertree template, these work all fine. Please visit and see how they’re work in my blog: http://www.yafiz-syam.blogspot.com. I appreciated, sukron katsir!!!
Wassalam.
om abu, kagak bisa om..
padahal dah persis sama langkah2nya..
udah bisa :D :D
assalamualaikum kang abu…..
Kang, ane mau page navigation scriptnya di semua template yang aku convert. Tapi bisa ngak kalau link blog ku dimasukkin ke scriptnya????
Saya tunggu jawabannya kang.
Assalamualaikum
tikno
thank abu……
thanks for your solusion.,1 agains thanks
Hello!
Thanks for the code! It looks great on my blog – but I have a small problem with the label fix.
I followed your instructions but when I click on a label your widget doesn’t show until I’ve clicked “Äldre inlägg” (Older posts). How can I solve this?
bro,tidak mahu pon.
selepas steps 2,nak save dlu ke ape?
saya mahu buat labels, dan mahu tick expand widget widget…tidak dapat.
gimana ?
Minta izin menggunakan halaman navigasi di bloggku
Abu farhan… still waiting for ur response on my comment above.. (how to install this hack in aspire blogger template..)
Salam,
Saya dah doload template aspire tersebut dan ianya berhasil. Setelah dicomparekan coding aspire template yang ada page navigation dan my current aspire template, tak dapat bezakan mana satu code yang telah ditambah. T_T
Sebolehnya, saya ingin guna my current template sebabnya dah banyak hack lain yang telah ditambah seperti sidebar ketiga, disqus comment system etc. Bolehkah saudara Abu Farhan menginstallkan page nav tersebut di dalam template aspire saya sekarang saja?
i’ve tried it, but not run in my blog. sorry my english so bad (SMP) :)
assalamualaikum Wr.Wb. thanks ohm. i need it. it’s veryusefull for me…. :)
sayang bahasa inggris saya cetek, aduh…, gimana nih.
Don’t worry… Have just read your post for the old page nav and now I understand what the label code is for. And that I need to add that ‘max results’ code for every instance of label URL. Thanks very much. Great work.
Hi Abu,
Thanks for this – been looking all over for decent pagination!
Can you tell me what this code is for? What happens if I don’t add it?:
‘data:label.url + "?&max-results=7"’
I have that ‘data:label.url’ text at 3 points in my template. Is it meant to go in the post-footer-line div?
Thanks!
that is code for the labels.
Wah ternyata mudah di terapkan yach tp ada link ke website ini yach tp g pa2 dech tdnya sih pgn di apus tp setelah di pikir2 ky buat amal juga dech buat bloger lain spy bs mampir ke website abu farhan ini ky si empu website ini ikhlas kok memberikan ilmunya knp kt tidak memberikan balasannya iya gak..cr memberikan imbalannya yach dg membiarkan link yg menuju website ini n juga blog ini no ads men ana salut dech..g mana cr bayar buat sewa domainnyanya yach kheeeee
Trims Kang… tp ko cm trlihat page 1 yah? bgmn caranya mmbuat page2 yang lain? trims b4…
Itu karena salah setting var postperpage=7;
yg aku lihat blog kamu bukan 7 tapi 5, coba sesuaikan aja dengan settingannya
Assalamu alaikum wr. wb.
Thank you for your great widgets! I use it for my blog
Wassalamualaikum.
wa’alaikumsalam warohmatullahi wabarokatuh
asalamualaikum…hehehe…mantab neh…tapi masih belum berhasil…masih aja ga mau nampil page nav nya…tapi saya tidak akan menyerah..makasih abu tutornya sangat bagus.
Wa’alaikumsalam, silahkan coba lagi, gampang kok masangnya semoga bermanfaat.
kalau masih bingung komen aja ke sini
So this is not working in my Blog ?
This Page navi can work for any blog from Blogspot.
Alhamdulillah..
sangat membantu! jazakallah ya akh..
teruskan memberi info yang bermanfaat :)
Waiyyakum
I would ask permission to translate the script to Portuguese of Brazil and republicalo on my blog but without removing the credits
No, problem. You can translate this Tutorial to your blog
Already play, thank you for your attention!
http://www.noticiaeblog.com/2009/12/paginas-numeradas-no-blogger-corrigido.html
MAsha allah brother , very nice widget
May allah reward you
Amiin
does this hack support for my aspire blogger template ? I already follow ur instruction, but the page navigation still not appear… help me.. thanks~
I try your template and it can work, this link you can download http://abu-farhan.com/download/template/aspire/aspiretemplate.xml
Demo for that template
http://custom-template-pagenavi.blogspot.com/
sorry, just noticed ur comment here…
The link u provided does not work… can u re-submit @ send it to my email ?
zaarz87@gmail.com
again, ur help is much appreciated.
Why it doesnt work in my testing blog ?
My testing blog is, http://www.zaarz87.blogspot.com
Hope u wiling to help me fixing this problems.. thanks in advance..
Your test template don’t have blog-pager id, you have to add Blog-pager id by your self. and you put two page navi script in one template
Assalamualaikum Mr Admin @ Abu Farhan,
So how to solve this ? how to remove my old page navi ? and what is blog-pager id? i dont know much about html coding, can u teach me in order to add / install blog-pager id and ur beautiful page navigation ? Im looking forward for ur reply.
Thanks.
Wa’alaikumsalam
Ok maybe on saturday I’ll try your Aspire template for this page navigation, because I still busy until friday.
Insya Allah I’ll try that Template to apply Page Navigation.
could u give ur current email so that it easy for me to send my template for u. ? Yup, aspire template.. kinda hard to modified this template… (for beginner like me).. Anyway, thanks in advance…
They look simply superb.. congratz dude..
Thanks for coming here he..he..
Assalamu’alaikum, Alhamdulillah …. I am here again to confirm that I have fix the script, and your link has been placed there. I apologize if I had forgot it. I’ve placed your link on my sidebar, too. I hope this can solve the inconvenience. Once again, thank you very much for your permission you have given. You are the best.
Wassalamu’alaikum …..
Wa’alaikumusalam warohmatullahi wabarokatuh
Alhamdulillah, I like if someone confirm me first, I’ll allow them for doing that. Thanks for that link.
Thank you very much to Mas Farhan. Alhadulillah..it’s worked properly on my other blog (http://freegamezones.blogspot.com/). But I’m sorry, there, I’ve removed your credit link, may I? I promise that it’s just only for mine, and I’ll not share it for others. OK?
ok its good if you confirm about that, but don’t remove Credit name in js file(top 3 lines before the script) . If you want you can add my link to your link sidebar its better.
i tired from the numberd page navigation system
this is not working properly in my blog
i post 1–25 post in my testing blog .i set 6 post per page
& use this navigation it shows me
25–20 0n first page
11–2 second page
1 on the last page
i tried more than 10 time but not suucesful
son any help from u for my blog
thx
http://esydownloads.blogspot.com
my testing blog
http://yadavtest.blogspot.com
The problem usualy because custom Template not follow All id or class is default from Blogger . Usualy problems because you don’t have id=”blog-pager”. In your test blog I can’t open because so many widget maybe. I only guessing problem of your test blog because you post less than 1 minute(this not happen in real blog) .
Assalam Alaikum bhai. I am using ur google style page navigation hack on my blog. Will it work fine, if posts exceeds 500? please reply me soon.
wa’alaikumsalam
yes thats max 500 posts, I’m not make for Google style yet for more than 500
Assalamualaikum,
Mr. Abu, need permission for add to my post.
Thanks.
Assalamualaikum bhaijaan,
once again u r back with a wonderful widget… its working great on my blog..thanks a lot…
can you tell how to show limited number of posts on blog archive page also, just as we did in labels page ??
Blog archive in server side we can’t modified like label based on search URL request.
Thank you — this works! I like it and I really appreciate your work, but … your “big” misaligned credit under the page navigation looks ugly. Is it really necessary to make us link to your site just to use your widget?
yes, that for any blogger that want to use this kind of Page Navi, I made this free to use and nobody pay to me, I hope it can use for everyone.
I think any blogger that made widget put their credit also, bloggerplugins, bloggerbuster and Mohemmad Rias you can check to their blogs.
for Previous page navi hack I not put credit because I only modify and at mohammad rias blog he put credit for his blog.
thank u … Its working fine .Masha Allah its working fine
Oh! Many thanks for your widget))
wah….ane pake pagenavigation versi sebelumnya kang abu…..yang ini lebih maknyus…ane bookmark dulu ah.
Salam
makasih infonya sob berguna banget buat aku
saya sudah coba sob tapi kok cma munculnya di IE gag bisa di MF
harusnya bisa semua, ini dah dicoba beberapa browser kok
doh adoh…makin menggelitik nih page navigationnya….ihohihohiohioh
Assalamo 3alekom wa rahmato’llah
Thank you brother Aby Frhan for all your great widgets!
This one is really helpful and powerful.
But i have a request that will make it popular for RTL language too, so can you make a version that count from right to left and print the showpageOf in the right side …?
if done I’ll post about it so much brothers may appreciate your great work.
Thank you and sorry for my bad English it still beta :)
Mean Abu Farhan :) sorry for this error
Hi Abu,
It has a Small Bug..
1 2 3 4
if you open these 1 to 4 on in other tab by clicking open in new tab by a same page,it will not take to that page number and stay on same page in all 4 window.
please look into it.
I think its not Bug,Sorry :)
Hola soy un usuario spanish de peru mi pregunta era que si la paginacion se puede crear en webs que superan los post pues mi web supera los 1000 post de tematicas y ninguna `paginacion funciona
Yes this page navigation can work for all your post that more than 1000
one more request i want code for photo gallery slide for post blogger post..
What kind of foto gallery ? There are many type Photo gallery for web designer
Yea how to remove bellow widget by.
Thanks for the widget.
Actually I can, but I want anybody can make also to their blog. so everyone can learn from my blog also.
this one? OK, ill try.. thanks bro..
Yes, this method almost same how to apply in blogger but using new script, you can read what is the different from previous Page Navigation in my post. I hope you can use in your blog.
How to remove its footer widget by
makin banyak pilihan page paginationnya. Kalo seumpama jumlah postingan lebih dari 500, kode pagination ini tidak bisa digunakan??
Script ini bisa digunakan utk blog lebih 500, silahkan coba aja.
“This script can be use for blog that more than 500 posts”
am not getting page navi bar..
What is your blog that you want to use ? I can’t find the script in your blog
Mine other blog called http://cinereview1.blogspot.com.
I cant get page navi for that one
I can’t find that script yet in your blog, so it can’t show
thanks you, i will test it in my blog en sha’a allah
buy hair extensionsfresno churchame Biram Diouf, who scored twice for the reserves in their win over Fulham on Monday night, but Jonny Evans and Patrice Evra shrugged off hip and knee knocks picked up at Bolton on S
video chatski property 4 vallees
fiscal consolidation plan that Congress and the administration recently agreed to falls short of what, in our view, would be necessary to stabilise the government’s medium-term debt dynamics.
Soirée jeux olympiquesHouses For Sale in Etobicokepecial. In the future, there might be other LE and things that can only be obtained if you post there. Membercard collectors, keep that in mind and post a comment there, if you haven’t done it already. **Note that it’s sticky.
**Sometimes another sticky thread will appear
Sama2