Bismillah, Alhamdulillah

Skip to Content

Five Styles Page Navigation for Blogger New Script Part 1

May 28th, 2011

Let me introduce myself, my name is Catur.
I am new staff that will work with Master Abu.
Nice to meet you guys …=)

This styles page navigation i got from WebDistortion but in these blogs do not provide page navigation for Blogger. So I have to convert it first so can be used in Blogger.
Maybe in the pagination style that I made not exactly the same as the original, but I try my best to make it seem like the page navigation at the original website.

This is view of those Page Navigations

Demo (Yahoo Style)

This Demo for All CSS Style Script :

  1. Style 1(Drupal)
  2. Style 2(Tutorial garden)
  3. Style 3(WK Top)
  4. Style 4(Yahoo)
  5. Style 5(Amazon)

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;
.showpageNum a,.showpage a {
 background:transparent url('') repeat-x;
 border:1px solid #97a7af;
 margin:0px 1px 0 1px;padding:3px 8px;
.showpageNum a:hover,.showpage a:hover {
 border:1px solid #e4905a;color:#e4905a;text-decoration:none;
 margin:0 8px 0 0;
.showpagePoint {
 background:transparent url('') repeat-x;
 margin:0 3px 0 3px;padding:3px 8px;
 border:1px solid #e4905a;color:#333;text-decoration:none;font-weight:bold;

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 5 other styles page navigation…
If you have any questions please leave a comment. thank you


Another post about the page navigation for Blogger :

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

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

45 Responses to “Five Styles Page Navigation for Blogger New Script Part 1”

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

  2. Hello Abu-farhan! would like you to correct the drupalstyle because the link nãoestá working, big hug!

  3. Love the examples, I’ll be adding them to my own sites. Thanks for posting this.

  4. özge says:

    Would you help me? please: (I like to use this code in advance and now it is giving this error :(((

  5. özge says:

    Would you help me? please: (I like to use this code in advance and now it is giving this error mozilla expoler


  6. Do you know the best way to keep your mulberry bags? There are several methods regarding mulberry handbags and you must have the studying about the subject. Fashionable these days, the bags are extremely essential to all of us mulberry outlet.

  7. Link! says:

    than good. there’s no right or wrong…

    answer to this. but if you are writing a 500 word article in less than an hour you are definitely heading down the right path.i’ve got writers blockfear not. we all have writers block days where every word feels like it…

  8. just sum up all that you have…

    said in your will leave an impact on the reader’s mind and he will be compelled to think about your post even after he has finished reading. always relate your article to the reader.that can be done by either telling…

  9. kamran says:

    thanx 4 the widgets i aply on my blog thanx a lotsssssss

  10. uggs says:

    You might be so cool man, the post upon your blogs are super great

  11. abbaz says:

    Assalamu’alaikum abu farhan,
    thank you for the code. I have installed it in my blog abbazisme. But i face a problem and still confusing how to solve it. The pagination is appear and looks good. But when i want to jump to page other than page 1, the pagination vanishes. Please help me to solve the problem.
    Thank you.


  12. Brey says:

    mas abu… page nav nya kepotong jd cuma keliatan setengah.

    ini blog gw

    please help me…

  13. danuar says:

    makasi dan bagaimana caranya widget html related posts pada blogspot bisa pakai Page navigation?

  14. sadat says:

    thanks and can you help me?

  15. awak says:

    thank very much abu

  16. awak says:

    thanks your blog have some javascript that make my javascript can’t load.

  17. very nice………………i m happy……………….thnx fr posting

  18. sagar dahal says:

    common dude,,i’m so happy that you shared your ideas and it really works as well, but the things that makes me upset is….you just kept your advertisement below the navigation bar, could you please remove that advertise??????????

  19. Leninha says:

    Catur, this script has the same limitations, the
    earlier, for the amount of pages?
    For in my blog was kind of weird.

    • catur says:

      is not because of limitations…this widget is unlimited..
      You may use google translate to view this page includes demo page.
      because when I saw your website . I found this

      .ShowpageNum a, showpage fundo a { : url transparente

      different with my scripts.

      .showpageNum a,.showpage a {

      to solve it,..
      – remove all css styles of this widget
      – just follow Step 1 (Apply Style).
      do not use Google Translate when copying scripts.

  20. Asoka site says:

    Oh..Yahoo style is very cool . I will apply this navi for my blog.

  21. Asoka site says:

    Yahoo style is very cool . I will apply this navi for my blog.

  22. Donny says:

    Mas, aku minta pencerahannya dong…

    bagaimana caranya widget html related posts pada blogspot bisa pakai Page navigation? karena related posts yang ada sekarang ini tidak memakai Page

    Mohon Pencerahannya…

    Terima kasih

  23. […] blog: Five Styles Page Navigation for Blogger New Script 1, […]

  24. […] Five Styles Page Navigation for Blogger New Script Part 1 […]

  25. […] 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 […]

  26. cneeduy says:

    Hi! It’s not that I don’t respect your work, but I’d like to remove “Widget by Abu-farhan” for my blog’s homepage. Could you teach me how to do that, please? Thank you very much. And I totally understand if you can’t.

  27. sahil says:

    css styles are not working…
    + the labels are so crampt….
    plz help i want to use yahoo style…

    • sahil says:

      my blog :

      • catur says:

        find this:

        margin-bottom: +20px;

        then replace with :

        margin-bottom: +20px;

        you forgot this “}” on your script..

        • sahil says:

          oh…silly mistake…many many thnx..
          a little prblm…
          its working now but looking as if the top 1px or 2px are cut off(see my blog once…)
          any fix for that?

          • catur says:

            Ok..try this
            find :
            font-family:”Times New Roman”, Times, serif;
            replace with:
            font-family:”Times New Roman”, Times, serif;

            by adding “padding-top:20px;” can fix it…insyaallah..

  28. sasha says:

    makasi banyak mas ini sangat keren

  29. Beben Koben says:

    nice amazon style…
    sukron :)

  30. NaoTeveSorte says:

    Hi Abu, i did all, for me the numbers apears, but for other browsers the page navigation dont show up… can you help me?

Leave a Reply

six − = two

Dbestlists Dbestlists

Copyright 2009 - 2010  Choen