Numbered Page Navigation For Blogger New Script
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
- Login to Blogger Dashboard and navigate to Layout > Edit Html
- Don’t click the checkbox which says ‘Expand Widget Templates’
- Find this
Step 1 : Apply Style
]]></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://all-in-one-blogger-widget.googlecode.com/files/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
'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)
Related Articles :
Comments (124)
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..
Hi, I can’t get this page navigation work.
My blog is http://zblog9.blogspot.com/