Bismillah, Alhamdulillah

Skip to Content

Page navigation for Blogger with Google style using New Script

June 3rd, 2011


Google, who does not know google!? ..
A search engine most used by internet users … especially users of Blogger.

Actually Abu Farhan have been post about page navigation with google style …
“Page Navigation for Blogger with Google Style”
But in that article can only be used on old navigation script ..
So I make a css script for google style using new navigation script…

Please look carefully, css and javascript scripts are different from my previous scripts …So follow the instructions below for running well …

The following is how it looks

This Demo for Google Style:

Google Style :

Google Style

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 :

#blog-pager,.blog-pager{ background-color: #FFFFFF;width:100%,text-align:center;}
#nav{font-family: Arial, Helvetica, sans-serif; font-size:12px;margin:0 auto;}
#nav a{display:block; text-decoration:none; color: #0066FF}
#nav a:hover{ text-decoration:underline;}
#nav .b a,#nav .b a:visited{color: #0000CC; text-decoration: underline; font-weight:bold}
.cur{ font-weight:bold;}
.csb{background:url( no-repeat 0 0;height:26px;display:block;}
.csb.cur{background-position: -44px 0pt; width: 16px;}
.csb.movenext{color:#20c;background-position: -76px 0pt; margin-right: 42px; width: 66px;}
.csb.moveprev{color:#20c;background-position: 0pt 0pt; margin-left: 42px; width: 44px;}{background-position: -60px 0pt; width: 16px;}
#nav td{padding:0;text-align:center}

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

Alhamdulillah…by Catur

Another post about the page navigation for Blogger :

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

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

28 Responses to “Page navigation for Blogger with Google style using New Script”

  1. Unquestionably believe that which you said. Your favorite reason appeared
    to be on the net the easiest thing to be aware of. I say to
    you, I certainly get irked while people consider worries that they
    plainly don’t know about. You managed to hit the nail upon the
    top and also defined out the whole thing without having side effect
    , people can take a signal. Will probably be back to get more.

  2. budi anto says:

    askum artikelnya bagus2 gan . .

  3. Thanks for including us on such a great list.

  4. 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.

  5. Dit this work for over 500 posts ???

  6. I like Your Article about Page navigation for Blogger with Google style using New Script | Blogger Templates and Tricks by Abu Farhan Perfect just what I was looking for! .

  7. iblizkecil says:

    Thanks MR.Farhan I like Your CODE
    You’re my inspiration … Your is the best and the first, But Iam Just Limited Edition … :D
    one again thanks
    visit my site….

  8. norizan says:

    Assalamualaikum warahmatullah,
    Saya dah cuba berkali kali tapi tak menjadi jugak bapak…

  9. awanti says:

    makasi mas dan saya senang telah membaca article ini.,,,

  10. dhiibhiehh says:

    cool pagination. . . i like it so much, ,

  11. NIX says:

    Thank, your astuce in impect

  12. salam abu Farhan,

    macam mana cara nak tukarkan perkataan *Gooooogle* kepada perkataan lain?

    trima kasih :)

  13. Happy says:

    Wihh.. I’ll try this..
    Thx 4 share,, Mas :D..
    So usefull ^^

  14. Fleta says:

    Furrealz? That’s mraelvosuly good to know.

  15. Wong Cerbon says:

    بارك الله فيك أخي أبو فرحان لقد تم تركيب هذا التطبيق على مدونتي بنجاح
    أتمنى لك دوام الصحه و أنتظر أشياء جديدة في مستقبل قريب بإذن الله

  16. wahh.. om farhan kliatan lagie,..!!
    Postingannya baguss..!! thx om farhan.
    sukses selalu..!!

  17. Farixsantips says:

    Thanks for share :) Update terus kang :) I like it :)

  18. khayla says:

    assalamu’alaikum.. so you’re back… pa kbr pak?

    btw, yg script mp3 player alamat yg dulu keknya dah g bisa lg yah? Ada ganti yg baru? warmest regards for ur family :)

  19. tihang says:

    stylenya mantap kang abu….

  20. […] Page navigation for Blogger with Google style using New Script […]

  21. Buat Info says:

    good information, very helpful. Thanks.. Buat Info Hadir disini :)

  22. dessy says:

    numpang lewat bang farhan…
    moga sukses …
    nitip satu link, boleh ya!!!

  23. Beben Koben says:

    terima kasih buat updatenya :)
    semoga terus berkarya ya :)

Leave a Reply

four − three =

Dbestlists Dbestlists

Copyright 2009 - 2010  Choen