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. Nice and helpful topics. i regular visit your site and surely share to fb and another social site as well subscribe your feedburner. wish your happy moments. Thanks

  2. Helal Uddin says:

    Nice and helpful topic. I like it. Thanks a lot for sharing.

  3. Helal Uddin says:

    Nice and helpful topic. Thanks a lot for sharing.

  4. ibnu says:

    I think Abu Farhan’s script is deleted from google server..
    Use this instead it’s better

  5. albert says:

    Hello, i am from Spain.. Quisiera saber cuanto cuesta tu codigo del archivo “pagenaviv202-min.js”
    lo deseo de manera permanente para mi blog
    espero tu pronta respuesta.

  6. Ӏ’m gone to tell my little brother, that he should also go to see this website on regular basis to take updated from most recent news.

  7. very easiest and useful way to implement paging on blogger blog. i implemented it on my blog
    http://www.webcodeexpert.com/ and now it looks awesome. I also suggest other to implement this to give your blog a new innovative look with paging.

  8. Assalamu’alaikum
    Script pagination nya tidak berhasil di install di blog saya >>> http://ur-template.blogspot.com/. Mohon pencerahan..
    Terima kasih.

  9. Nice Share… Thanks

  10. عامر says:

    Asslam o Alaikum
    Dear,,
    these codes are not working ,, this error is found when after installing above code , I opened my blog
    A username and password are being requested by http://scriptabufarhan.googlecode.com. The site says: “Google Code Subversion Repository”
    please check it
    Allah Hafez

  11. Jimmy says:

    Hey, your javascript was broken
    Fix it,……. please

  12. Anton says:

    Thanks Abu Farhan…I will try in my blog..

  13. Please let us know where we can host this code. It worked fine until a few weeks ago. Thax.

  14. Muneer says:

    I think Abu Farhan’s script is deleted from google server..
    Use this instead it’s better
    http://24work.blogspot.com/2012/01/numbered-page-navigation-for-blogger.html

  15. Danomind says:

    Hi – My paginator 3000 isn’t showing up at all! It used to work a few days ago, but what happened ? PLEASE FIX THIS SCRIPT!

Leave a Reply


one − one =

Dbestlists Dbestlists

Copyright 2009 - 2010  Choen