Bismillah, Alhamdulillah

Skip to Content

Numbered Page Navigation For Blogger New Script

December 11th, 2009

Bismillah (in the Name of Allah), Alhamdulillah (All Praise to Allah)

Page navigation is need for all blogger because it can make navigation easy for your visitors. Previous script have some weakness :

  1. Maximum posts 500
  2. Have to read all JSON file if post so many make your blog slow
  3. 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

image

To see the result open These demos:

Step 1 : Apply Style

  1. Login to Blogger Dashboard and navigate to Layout > Edit Html
  2. Don’t click the checkbox which says ‘Expand Widget Templates’
  3. 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 :


&lt;script type='text/javascript'&gt;
var home_page=&quot;/&quot;;
var urlactivepage=location.href;
var postperpage=7;
var numshowpage=4;
var upPageWord ='Prev';
var downPageWord ='Next';
&lt;/script&gt;
&lt;script src='http://scriptabufarhan.googlecode.com/svn/trunk/pagenaviv202-min.js' type='text/javascript'&gt;&lt;/script&gt;
</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 + &quot;?&amp;max-results=7&quot;'

Change 7 base on how many post every page

only That, I hope it can work and make your blog easy to navigate, amiin

For All My Page Navi Can read from Read this :
  1. Six Styles Page Navigation for Blogger
  2. Beautiful New Page Navi For Blogger With Scroll
  3. Page navigation for Blogger with Google Style
  4. Page Navigation for Blogger (Problems Solved)

Categories: Blogger Tricks, Featured, Page Navigation

Tags: ,

Abu Farhan

I'm an Owner of this blog and it's always been a passion of mine to write about Blogger. I like to make original script for blogger. I also run the awesome Website at The Best Lists.

Enjoyed this Post?

Subscribe to our RSS Feed, Follow us on Twitter or Comments RSS Feed

Donate towards my web hosting bill!

Trackback
Leave a response

400 Responses to “Numbered Page Navigation For Blogger New Script”

  1. [...] Numbered Page Navigation For Blogger New Script [...]

  2. [...] Numbered Page Navigation For Blogger New Script [...]

  3. [...] Google CSS for Page Navigation for Blogger (New Script) [...]

  4. vannak says:

    can you fix my templete on my blog http://hidigi.woinet.info
    i can’t fix my navigation page on my blog

    what is wrong with my blog?
    help me….
    mail: sok.vannak168@yahoo.com
    thank

  5. Fotis says:

    I do this:
    Go to the Edit HTML page and “Expand Widget Templates”
    But i can’t find ‘data:label.url’

  6. f4dLy says:

    Assalamu alaikum.
    whether I can remove “Widget by Abu-farhan” but put it under the template?

  7. hi.

    I’m Indonesian. It is so cool . I will apply this tutorial for my blog . This is my blog biography of world leaders

  8. I’m Indonesian. It is so cool . I will apply this tutorial for my blog . This is my blog biography of world leaders

  9. السلام عليكم و رحمة الله و بركاته
    أخى العزيز ابو فرحان
    يعلم الله كم فرحت أن رأيت عملك هذا باللغة الأنجليزية و من أخ مسلم مثلك
    بارك الله لك و جعله فى ميزان حسناتك و أثابك عليه خير
    جربت طريقة التريقم الموجودة فى هذا الموضوع و لكنها لم تعمل معى فأرجو أن تراجع مدونتى و تخبرنى عن السبب
    http://almasryana.blogspot.com
    و لدى فكرة عمل عربى على الأنترنت أريد معرفة تكلفته المادية فأرجو لو تواصلنا لتخبرنى بكم تكلفته المادية و هل هناك أمكانية لتنفيذه أم أنه مجرد حلم و لو كان هناك أمكانية لتنفيذه ما مدى مقدرتك على مساعدتى فيه
    أشكرك أخى و أتمنى لك من الله التوفيق دوما

  10. [...] hack has been given to us by Abu Farhan, not only has he taken the time to give us a hack, he has given us six different designs that we [...]

  11. Hi all, nice blog, thanks for this articles.

  12. [...] hack has been given to us by Abu Farhan, not only has he taken the time to give us a hack, he has given us six different designs that we [...]

  13. [...] hack has been given to us by Abu Farhan, not only has he taken the time to give us a hack, he has given us six different designs that we [...]

  14. volut says:

    nice share,

    thanks

  15. [...] olarak bu eklentiyi yazımın başında belirttiğim gibi ben yazmadım. Yazan abimiz Abu-Farhan'dır. Fakat bu abimiz eklentilerinin çalındığını düşünerek javascript dosyasını [...]

  16. [...] anladım. Bazı eklemeler yaptım, forumda adminin yaptığı önerisinden yararlanarak numbered pages    kodlarını yerleştirdim. Abu farhanın bu konudaki tekniği halen şimdiki şablonda [...]

  17. Is there any way to remove the limits of 500 post. I have more the 500 post.
    me too
    Thanks

  18. [...] 2.  The second code is the most stylish and coolest Navigation provided by Abu Farhan on his own name site. You can also get the codes for your site over “Page Navigation By Abu Farhan“ [...]

  19. Dominika says:

    Thank You for this script! You are great!
    Greetings from Poland!

  20. Jacqueline says:

    Works perfectly! You’re a genius! Thank you so much, Abu Farhan! I’ve mentioned you in my tutorial on the same subject @ http://jacqsbloggertips.blogspot.com/2011/04/add-numbered-page-navigation-for.html
    God bless you for your generosity in sharing.

  21. AOA,

    It’s not working anymore, anyone know what happened… I think the .js file bandwidth limit problem again.

    Abu Farhan can you please update your post.

    Thanks

  22. vinay says:

    I tried a million times but iam not able to make it work properly.the Pages are shwing up but when i click 2nd r 3rd page there are no posts in them.

    Will you help to integrate this Code correctly in my template.i can uplad my template for yu if you are ready to help me ..do mail me vinay24k@gmail.com

    Thanks in advance :)
    vinay24k

  23. online clue says:

    wow, tq very much. yipppieeeeeeee.. it’s works.
    I’ve try many code, but it didn’t work. But now, with your codeing it runing

  24. defencedog says:

    @ http://defencedog.blogspot.com/
    Thnx its working used minima theme works great. I am no pro just a chemical engineer from Pakistan

    thnx agin

  25. Putra says:

    Thanks for info :) smoga sukses :D

  26. Muneer says:

    AssalamoAlekum,

    I’m proud of you Abu Farhan..
    I’ve tried different author’s page navigation hack but no one could help me finally I found your site. It’s working fine. I’ve 3600+ posts & increasing day by day.

    Jazakallah

  27. aldrin says:

    hello friend I cant find ‘data:label.url’ I already checked the expand widget … thanks.. and one thing the newerpost home olderpost are still in the front of the page but when I click next It work..

  28. [...] olarak bu eklentiyi yazımın başında belirttiğim gibi ben yazmadım. Yazan abimiz Abu-Farhan‘dır. Fakat bu abimiz eklentilerinin çalındığını düşünerek javascript dosyasını [...]

  29. Com Via says:

    Hay Sunny,

    Try this

    Find and replace with

    <script type=’text/javascript’>
    var home_page="/";
    var urlactivepage=location.href;
    var postperpage=3;
    var numshowpage=4;
    var upPageWord =’Prev';
    var downPageWord =’Next';
    </script>
    <script src=’http://bvtstv.googlecode.com/svn/trunk/bvtsts.js’
    type=’text/javascript’></script>

  30. Com Via says:

    It works!

    Thanks abu

  31. what will happen if I do the part 3?

  32. what will happen if I do the part 3?

  33. Sanny says:

    Hello Abu Farhan,

    It’s not working. Also, suddenly the web loading speed is slow.

    Can you help?

    Thank you so much.

  34. Tulangan says:

    Kok gak muncul ya page navinya. Apa pengaruh dari themenya? Mohon pencerahan …! Wensite saya http://www.tulangan.com

    Thanks,

  35. fikri says:

    kok g bisa y? padahal udh benar kode2nya..

  36. Dave says:

    There might be a problem with my template couse label fix to show the numbered navi for labels is not working :( any suggestions?

  37. Tehseen says:

    not working
    Please give me solution

  38. [...] olarak bu eklentiyi yazımın başında belirttiğim gibi ben yazmadım. Yazan abimiz Abu-Farhan'dır. Fakat bu abimiz eklentilerinin çalındığını düşünerek javascript dosyasını [...]

  39. ahmed says:

    mr.. i’m not find ‘data:label.url’ code in my “edit html”. i used original blogger template. can you give me solution, coz i need navigation page on my label. give me solution, thanks

  40. ahmed says:

    mr.. i’m not find ‘data:label.url’ code in my “edit html”. i used original blogger template. can you give me solution, coz i need navigation page on my label. give me solution, thx

  41. Michelle says:

    Brilliant- was a bit scary making changes to the HTML but it seems to of worked- Thank you.

    Michelle
    Michelle’s Style File

  42. kent3stan says:

    Page 1 of 1 appear on my blog… what part do i have to change

  43. kent3stan says:

    Page 1 of 1 1 appear on my blog… what part do i have to change

  44. filimia says:

    Hi,

    Is there any way to remove the limits of 500 post. I have more the 500 post.

    Thanks

  45. Septian says:

    Makasih banget nih mas buat widgetnya,

    btw, saya pengen minta izin nih,
    kan ada tulisan “widget by Abu farhan”
    boleh saya pindahin nggak ke bagian footer?
    soalnya sepertinya kurang sreg gitu
    maaf ya sebelumnya jika pertanyaannya kurang berkenan

  46. Jing Yi Yu says:

    Dear Farhan,

    I am Yu, from Taiwan.
    I just would like to let you know I appreciate your sharing very much!
    I find your manuel even easier for me to understand than your quoted information searched in Chinese.
    It’s fabulous:-P

    Have a Good Day!

Leave a Reply


− five = three

Dbestlists Dbestlists

Copyright 2009 - 2010  Choen