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: ,

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

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

  1. ozi says:

    Jazzakumullah Khoir…

    it’s nice to share brother

  2. Funn says:

    Hi. I am having some trouble with using this pagination. You can see from my site at the bottom.

    Pages 1 to 4 is ok. But the when I click page 5, 6, 7, the numbers are pushed down. I think if you have a look yourself you will know what I mean. What is wrong?

    Thanks!

  3. I like the helpful info you provide for your articles. I will bookmark your blog and check again right here frequently. I am moderately sure I?ll learn many new stuff right right here! Best of luck for the following!

  4. We like that can respect all kinds of other web sites web, in the event that people aren’t related to united states of america, by the link building to your potential customers. Underneath are several sites cost exploring…

  5. toner hp says:

    hey les gens j’aime bien cet article mais le toner hp est mon soucis.

  6. Thanks for share mas farhan
    I’ve install it on my blog

  7. toner hp says:

    bonjour vous j’aime bien cet article mais le toner hp est mon objectif avant tout.

  8. Admiring the hard work you put into your site and in depth information you offer. It’s good to come across a blog every once in a while that isn’t the same outdated rehashed material. Excellent read! I’ve saved your site and I’m including your RSS feeds to my Google account. Also, please take a look at my site http://www.facebook.com/notes/blender-deals-online/the-sharper-image-15-piece-stainless-blender-300-watt-reviews-and-best-deals/141553879287134

  9. Thank you for the good writeup. It in fact was a amusement account it. Look advanced to far added agreeable from you! By the way, how can we communicate?

  10. immobilier says:

    bonjour vous j’aime bien cet article mais l’ immobilier est mon soucis.

  11. It worked. Thanks much!

  12. Ahamed Yaseen says:

    Assalamu alaikum, I used ur widget . But widget is not shown correct style . Visit my blog http://ahamedyaseen007.blogspot.com

  13. That’s helpful, really. altough just max 500 post

  14. thanks so much for this script..keep spirit :)

  15. EK says:

    Hello, I’m trying to use this on a blog that my friend set up for me a while back, but it just won’t work. I followed the instructions, but I kept getting xml errors when trying to save. After a lot of trial and error I finally got it to save but it still won’t work. I know it’s a lot to ask, but would you be willing to take a look at my template or something? Any help would be much appreciated. Thank you.

  16. Usually I don’t read article on blogs, however I wish to say that this write-up very forced me to try and do it! Your writing style has been surprised me. Thank you, very great article.

  17. thankz to share..
    i will to try it..

  18. vaggelis says:

    kalispera exo ena provlima sto blog pataw pano stis etiketes kai polles fores vgeni i selida de vrethike mpori kapoios na me voithisi se ayto mail info@larisanew.gr sas eyxaristo!!

  19. From says:

    Thank you, I have recently been looking for information about this subject for ages and yours is the best I have found out till now. But, what concerning the conclusion? Are you certain about the supply?

  20. Thanks says:

    thanks for the script..its make my blog looks smooth :)

  21. Mukesh says:

    its working..
    nice work
    thanx a lot………
    keep rocking dude

  22. I Love this post.. Thats it……………

  23. hm, pas dicoba di blog lain, cocok deh.
    code bekerja dengan baik.

    makasih om

  24. Dayz says:

    makasih banyak kang :)

  25. [...] 11th, 2011 Page navigation for blogger is most important widget for blogger. This widget can make visitor easy to navigate to [...]

  26. ousaf says:

    abu-farhan your web is really awsome for blogger
    it make blog a web like feature
    thanks for your contribution\
    KEEP IT UP MAN!

  27. BuLaDiFu says:

    Thanks Abu Farhan. Your widget helped me solve a broken page navigation problem caused by a free template i found online.

  28. [...] 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 [...]

  29. hay wonderful article i was looking for it

  30. User says:

    Hi Abu Farhan. Thanks, it really helped. But a question: Why do the page navigation only show up on first page? I want it to show on the labels section I created.(over there it shows previous post and newest post) Any idea, please?

  31. Salam..this info is very useful for a newbie like me…thank you so much!!!

  32. nieta says:

    karya keren… blogger pengharum nama bangsa

  33. santi says:

    Numbered Page Navigation For Blogger New Script pos ini bagus mas aku sangat terkesan sekali,..

  34. uklam says:

    senang berkunjung kembali :D

  35. 3 questions:

    1) How to put the gadget on top of messages.

    2) How to display the gadget on top and bottom of the page.

    3) Is it possible to put the code in a gadget, for example below the header, where the width is greater.

Leave a Reply

Copyright 2009 - 2010  Choen