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)
219 Responses to “Numbered Page Navigation For Blogger New Script”
Leave a Reply
[...] be more useful plugins and widgets around the web and I have not included some common plugins like page navigation, which is very common. Drop in your comments for best blogger plugins or widgets according to you [...]
terima kasih banyak-banyak bang.
thanks buddy. thats 100% work on mine :)
download all movie
Can i upload this script to google sites?
yes, You can upload the script to google site
Alhamdulillah, on
السلام عليكم
.
this code works perfect with my blog, and the colors are amazing!
wa’alaikumusalam
Bismillah, Allahu Akbar!
Bravo Abu Farhan … Science may Allah multiply that you have..Amien!
Subhanallah… Alhamdulillah, Allahu Akbar!
Thanks bapakku ABU FARHAN, semoga Allah menjadikan ini sebagai Amal Zariah, Amin ya Allah
Don’t missed visit my blog ya abi!!!
Anyway you made me mad. I applied your trick and when i see my blog in chrome all the side bar got bad. Thanks. SOrry i mistakely visited your blog .
my script not change anything in template, Please Check your own CSS
Tengkyu Bos… Tapi akan lebih cantik Kalau Page 1 of 7 nya dihilangkan? Bisa ga?
just wait for the next version
maaf Abu..saya udah menjalankan instruksi diatas berkali-kali..tetapi tetap tidak bisa bekerja di template saya.
kenapa ya?
terima kasih banyak.
your site is so useful
thanks
thanks for this site
Hi Abu,
There seems to be something wrong with the “var numshowpage=4;” code – it only works for the final page. For all earlier pages, the nav will display *all* page numbers… so for example, there will be 7 page links at the bottom, despite the “numshowpage” value being “4″.
This problem is also in your demo blogs.
Any idea how to fix this?
I might be getting confused with what “numshowpage” is meant to do, but I thought it was to specify the number of pages that are linked to in the nav.
For example, in the Minima demo, you have “numshowpage=4″ but if you’re currently on page 5, the nac at the bottom will have links to pages 1, 3, 4, 5, 6, 7, 14…. whereas I would expect it to have links for just pages 1, 3, 4, 14 or something.
If you’re on page 14 (the final page), the nav correctly shows only 4 page number links which are 1, 12, 13, 14.
How do you reduce the number of page number links in the nav?
Apart from that, the nav works brilliantly.
My demo not show 1, 3, 4, 5, 6, 7, 14
but
1,2,3,4,5,..14
4 mean outside of First and Last page
so 4 –> 2,3,4,5
Hi there, thanks for your reply… much appreciated. What about when you are on page 4 onwards? There are 5 numbers outside of the first and last pages… not 4….
1 2 3 4 5 6 … 14
1 = First
14 = Last
4 = Current
2,3,5,6 = 4 Showpage
thanks abu… artikel ini bermanfaat buat saya…
Really, really thanks a lot, in my blog works perfectly is amazing, look at this http://wallpaperslife.blogspot.com/
Terima Kasih Abu,Terima Kasih
This hack works great. I want to remove “widget by abu farhan”. Please.
Thanks a lot! All excellently works for me :).
tnx abu
Alhamdulillah, sukses. Syukron akhi.
i have seen this link ‘data:label.url’ more than 1 times on my blogger edit html page. so what to do ?
Thank’s
But doesn’t gog on my blog ( http://www.coccxyphil.com/ )
Saddly !
Thanks !
Doesn’t go on my blog :
http://www.coccxyphil.com/
Sad !
Thanks Work Perfect With My Blog
how can i change color of this texxt
Page 5 of 116
asslamualaikum…
thank you..
for all people that face the probelm of disappearance “older posts” “newer posts” you can see the isntruction how to add it back
http://www.ipietoon.com/2010/02/how-to-fixed-newer-older-post.html
Salam
brother blogger has closed the page navigation option
why ?
no blog is supporting pag navigation script
now and how can install pag navigation
please reply abuuuuuuuuuuuuuuuuuuuuuuuuuuu
I have the same question as acaPAWN7, do I have to change all 3 data:label.url that I find in my blog?
I did it…
and I don’t see the hack working on the arquive :\
managed to change the “Next” and “Prev” to my language (Portuguese), but how can I change the “Page 1 of 4″ text?
Assalamualaikum wr wb ABu,
Blog sy pakai blogger dengan custom domain http://www.sapstudymaterials.com/. Sy tidak pasang widget ‘label’ sehingga tidak ada code ‘data:label.url’. sy udah coba langkah 1 & 2 tp nggak muncul apa-apa.
Salam..
My custom template has many code, should I replace all of it too?
Salam..
My custom template has many (‘data:label.url’) code, should I replace all of it too?
P/S: Sorry, the ‘data:label.url’ code didn’t appear in my previous post.
Salam
Brother what do Mean By MAX POST 500 ??
where will it show MAX POSTS 500
in the Labels ?
if i have more than 500 posts in my one label than what shoul i do ?
Please Discribe what Do you Means By MAX POSTS 500
THANKS IN ADVANCED
Please Reply Brother
suwun mass saya juga numpang di batam salam sehat mass
Salam
Brother what do Mean By MAX POST 500 ??
where will it show MAX POSTS 500
in the Labels ?
if i have more than 500 posts in my one label than what shoul i do ?
Please Discribe what Do you Means By MAX POSTS 500
THANKS IN ADVANCED
Please Reply Brother
Salam brother,
Unfortunately I’m not having any luck with this page navigation. I had working fine, before with the old easy page navigation widget.
But ever since I changed the date of my first post. The old navigation script had stopped functioning.
I tried your new script, but sadly I’ve had no luck still.
Please check my blog (time willing),
RA
assalamualaikum..
trimakasih tuk tipsnya, dan berhasil di template blog saya
Salam
Brother what do Mean By MAX POST 500 ??
where will it show MAX POSTS 500
in the Labels ?
if i have more than 500 posts in my one label than what shoul i do ?
Please Discribe what Do you Means By MAX POSTS 500
THANKS IN ADVANCED
njajal ahh nek iso barang…lhothong
njajal nek iso barang…lhothong….
mas saya udah coba tambah .nomor halaman
tapiu ngak berhasil ????
makasih
assalamualaikum..
it’s work.. perfect.. beautifull and faster than previous page Nav Code.. i really thanks..
But.. may i remove “widget by abu farhan”?
ups barusan saya baca codenya.. tapi ternyata..
gak ngerti TT
itu bukan javascript kan? ato udah di encrypt??
hilang sudah niatan untuk ngedit tuh kode..
tolong dong mas.. dihilangin kodenya..
agak kurang nyaman makenya..
ato di hidden kan aja.. kayak kode tag cloud si amanda..
/* Widgte by http://www.abu-farhan.com
copyright by Abu Farhan
Dont edit without permission from the Copyright owner
*/
ijinkan di edit.. atau biar cepet masuk surga tolong di editkan..
hi…bagaimana caranya biar bisa d pakai di classic?bisa kasih tau caranya?apa kode nya beda sama yang ada di classic?bisa kasih kode untuk yang i dclassic?thanks…:D
Assalamualaikum. Maf sblumny I g ngerti Bhs Inggris so bs bc tp g ngrti mksdnya. Tp intinya I pengen ngedit (Ngisi) pagenav sesuai dg keinginanku, gmn ya cranya. Please sapa ja yg tau tlg kash tau I di immroziq@gmail.com. Makasih!
saya sudah coba kalo langsung mis : http://widescreen-wallpapers-collection.blogspot.com/ bisa keluar, tapi kalo lewat label mis:http://widescreen-wallpapers-collection.blogspot.com/search/label/world%20widescreen%20wallpapers. kok ga mau keluar. knapa ya.langkah2x sudh saya ikuti semua, trims
sudah bisa. trims :D
Hello I love your blog but is possible to remove your watermark?
I will be happy to donate to you if you can.
so do i.. if i have much “duit”
very beautiful code thanks man
thanks you!!!!!!!!!!!!!!!!!!!!!
tetep gak iso. sama aja dengan yang trik2 yang laen dak ada yang berhasil.
copy paste semua sih, coba kalo yang nulis bener2 paham code pasti aja berhasil, kalo cuman copy paste trik seperti ini jadinya sdeperti trik sampah.
yang bener aja masa di template classic ada code ]]> , yang bener aja. trus ada menu expand template widget’ ini template classic yang mana ?
Petunjuk di atas untuk New Blogger bukan Classic, classic sangat mudah kok, script yg digunakan bukan dalam decode tapi encode. kalau anda ingin menggunakan di template classic silahkan langsung tanya teman saya Choen utk langkah2nya linknya di atas
hehe.. kurang ajar nih orang.. tak tabok2..
Orang TOLOL kaya gini ga usah diladenin lah!
Hi, I can’t get this page navigation work.
My blog is http://zblog9.blogspot.com/