Bismillah, Alhamdulillah

Skip to Content

Five Styles Page Navigation for Blogger New Script Part 2

May 30th, 2011


As I promised you in my previous post. I’ll give you five new css styles for your page navigation.
just like “Five Styles Page Navigation for Blogger New Script Part 1“,
i just convert from the collection of WebDistortion to css styles for Blogger.

This is view of those Page Navigations

This Demo for All CSS Style Script :

  1. Style 1(SubCide)
  2. Style 2(Free Css Templates)
  3. Style 3(Wikio)
  4. Style 4(Ulf Thesis)
  5. Style 5(Maneame)

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

Copy the css script from the demo file.

Then insert the script in front of


Example :

  font-family:"Times New Roman", Times, serif;
  font-size: 0.8em;
  padding: 0.6em 0.5em;
.showpageNum a,.showpage a {
  text-decoration: none;
  padding: 0.3em 0.5em;
  color: #055d90;
  white-space: nowrap;
  color: #ffffff;	
   margin-right: 0.1em;
.showpageNum a:hover,.showpage a:hover {
  margin:0 8px 0 0;
.showpagePoint {


Step 2 : Aplly Javascript

Find This :


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 src='' type='text/javascript'></script>

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)


and Replace with this

'data:label.url + &quot;?&amp;max-results=7&quot;'

Change 7 base on how many post every page

In the next post, I will give you page navigation with Google Style using new navigation script.
Alhamdulillah…by Catur

Another post about the page navigation for Blogger :

  1. Five Styles Page Navigation for Blogger New Script Part 1
  2. Numbered Page Navigation For Blogger New Script
  3. Six Styles Page Navigation for Blogger
  4. Beautiful New Page Navi For Blogger With Scroll
  5. Page navigation for Blogger with Google Style

Categories: 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!

Leave a response

43 Responses to “Five Styles Page Navigation for Blogger New Script Part 2”

  1. Hello! This is kind of off topic but I need some help from an established blog.

    Is it hard to set up your own blog? I’m not very techincal but I can figure things out pretty fast. I’m thinking about setting up my own but
    I’m not sure where to start. Do you have any tips or suggestions? Cheers

  2. Rizal says:

    thanks nice tutor, very usefull nav page

  3. awesome, thank you very much abu :)

  4. Ricky says:

    Thanks for sharing sir..

  5. Sang Biru says:

    tq 4 sharing…usefull 4 my blog

  6. sebin says:

    Hai Friend,
    I added your widget to site. Its work Perfectly Fine. Thnks.

  7. EDZ sue says:

    salam bro Abu Farhan,

    thanks a lot for sharing.

    is there any way to put the page navigation on top of the page also? i mean, the page navi will appear both on top and also at the bottom.

    TQ :)

  8. Abu Muhammad says:

    Not working for me although I completed all the steps above.. Maybe its my template. Nevermind.

  9. wah terima kasih kang ;)

  10. Majid says:

    Salam brother.

    I have tried almost all tutorials online for page navigation and followed all steps carefully but it is not working for me. Nothing shows up.please tell me what is wrong with it.

    waiting fro your response.

  11. bryan says:


    i installed the page navigation and it worked on the home page, however when i click on the tabs the pages still shows “older posts” and “newer posts”;i connected the labels with the are the codes:


    <b:include name='quickedit'/

    please help!!!

  12. Name (required) says:


    I had no problem getting your pagination to work, but…

    I used yours because others I tried limited content to 500 posts. While I have seen evidence that there are people using yours on their blogs that can go beyond the 500 — some in the 3000s — mine will not go past page 18.

    I had it set to var postperpage=50;
    var numshowpage=10; and under “formatting” in blogger, I made sure the numbers matched: show at most 50 posts on the main page.

    So why, for me, is it still cutting content off at page 18?

  13. jatin says:

    not working pls help

  14. nice tips, langsung k TKP :D

  15. asyraf says:


    I’ve tried with instructions given. I tried on my trial blog it was fine. But when i tried on my another blog the navigation doesnt appear. Still sticked the new and older post link. I need help if its fine for you.

    My blog is temporary limited to author only. Ive uploaded the code in this link:

    What is missing or the mistake? I removed back the navigation code.

  16. bp says:

    i use one for my blog. thats great tricks for

  17. filimia says:

    Hi Farhan/Admin, nice work, keep it up, can u please tell me about the limit of post for these script as I believe all the navigation script of blogger only support 500 post. I have more than 500 post can u please help me with it.


  18. samy says:

    salam did you got my msg?

    • Abu Farhan says:

      Simplex template using javascript at frontpage no post at your front page.
      The Template not SEO friendly also. The template cant show post and page navigation.

  19. samy says:

    Bismillah, Alhamdulillah
    salm alukom dear bro

    how are you?thanks for all your work masshaAllah>>>
    i try this one with my blog but didnt work with me and i try so many other one but nothing and on many things>>>

    that was the temp i use,and this my blog

    i want 2 ask you bro 2 help my plz in this ?? i wait inshaAllah for ur reply??

    Thanks you Abu Farhan

    Greetings from Egypt#ِAbu Hanin

  20. Petronius says:

    Very interesting and useful your article. I’ll try for my blog Anunturi gratuite Buzau

    Congrats !

  21. Maya says:

    Great! I have a question, is it possible to center this widget on my blog?

  22. jaqui says:

    Thank you so much. This is very helpful!

  23. Your are great! I have seen some blogging trick which I have never seen before. Thanks friend for sharing this valueble tricks..Wish you great future..!
    Lucky Bhumkar

  24. vai says:

    Nice tutorial, i’ll try for my blog..

  25. hammad says:

    can we use it in blogger tube?

  26. sndk says:

    good post ,thank you for sharing

  27. […] Five Styles Page Navigation for Blogger New Script Part 2 […]

  28. Tihang says:

    Trima kasih banyak kang Abu, saya Izin pake, trims..

Leave a Reply

four + four =

Dbestlists Dbestlists

Copyright 2009 - 2010  Choen