Bismillah, Alhamdulillah

Skip to Content

Page navigation for Blogger with Google Style

September 26th, 2009

After my modification of Page Navigation from actually I want to make new style for page navigation but I think other designer will make better so I’ll wait for that. When I saw Catalog Tutorial template I have one inspiration to make page navigation with google style only for Kang Jaloee. Now I will give this for all of you if you want to use or modify base on your template style.

Updated :

Page navigation for Blogger with Google style using New Script

All Posts For New Script of Page Navigation for Blogger

Recommended use New Script

Old Method is same with Page Navigation for Blogger (Problems Solved)

different only style and js


Javascript Page Navi for Blogger

Screenshoot for Page Navi



Demo from Boogle

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!

Leave a response

63 Responses to “Page navigation for Blogger with Google Style”

  1. Waу cool! Somе very valid points! I appreciate you writing thhis write-up and also the reset of the wеbsite is
    extгemеly good.

    Feel free to visit my webpage synergy synergy detox max cleanse

  2. […] untuk mengetahui cara menggunakanya bisa teman-teman melihat pada tulisan Abu Farhan “ Page Navigation Google Style […]

  3. sukienki wieczorowe…

    Widać jest w tym co niemiara porcji. Atoli oznacza to pożyteczna jest zawsze najwyższa? Teraz nie. W szeregu przypadków białogłowie będzie zależało przede wszystkim na tym, jak się wyobraża. Sukienki pozwalają uzyskać renomowany postawa niezależnie od …

  4. iPhone 5 says:

    iPhone 5…

    […]Page navigation for Blogger with Google Style | Blogger Templates and Tricks by Abu Farhan[…]…

  5. it).8. newslettercreating a regular newsletter is a…

    great way to build a community of people you can stay in touch with on a regular basis. it enables you to build long-term relationships with them so you can recommend new products as well as offer new ideas and tips…

  6. Colby Cilfone says:

    Between me and my husband we’ve owned more MP3 players over the years than I can count, including Sansas, iRivers, iPods (classic & touch), the Ibiza Rhapsody, etc. But, the last few years I’ve settled down to one line of players. Why? Because I was happy to discover how well-designed and fun to use the underappreciated (and widely mocked) Zunes are.

  7. Thiên Long says:

    Tuyệt vời

    I’m from VietNam

  8. Air Max 95 says:

    I unbiased couldnt beetle off your website before telling you that we really enjoyed the quality gen you offer to your visitors… On be back on numerous occasions to check up on restored posts

  9. Hind says:

    The template for that it works not with me, sorry

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

  11. […] Google CSS for Page Navigation for Blogger (New Script) […]


  13. not satisfied, caused no intruction to apply

  14. blogger says:

    kok gak ada petunjuknya buat masang si?

  15. Thanks for your good article.

  16. some genuinely wonderful content on this website , thanks for contribution.

  17. Assalamu’alaikum Gan…
    Nano minta izin untuk menyelaraskan tampilannya dan memakainya untuk template:
    N2y Hanya Sedikit Mirip

    hanya sedikit yang Nano rubah untuk menyelaraskan dengan tampilan Google Blogs…
    Terima Kasih Gan…

    Jazakumullah Khair

  18. jj says:

    instead of it saying ‘google’, can you customize it to make it say jibberjabbers?

    That would be sweet.

  19. Jonas says:

    EM XTML.


    ISSO OK.


  20. […] Page navigation for Blogger with Google Style […]

  21. farish says:

    where i have to paste the code?

  22. farish says:

    how to post it to blogspot?

  23. Ma sha Allah, brother. I am now tempted to test it on Blogger to see how it works.

  24. CH4NDR4 says:

    bagus nih, sudah saya coba. 100% sukses, tanpa ada pesan eror. mantap kang abu nih. terima kasih

  25. rachel says:

    sorry ya yang tentang js thu, ku masih baru nge-blog jadi gak tau apa”,. js nya dh di ganti, n postingan nya juga,. dh di kasih link sumbernya,,. skli lagi sorry,. maaf,. klo masih ada kesalahan shar ya,. kasih tau yang lbh baik buat aku,. ok,. thanks,.

  26. Hussain says:

    Hi bhai
    Assalam alaikum, just now u have visited my blog. i want to talk with you. Its important. Please come on gtlak for 5 mins only.

  27. […] Page navigation for Blogger with Google Style […]

  28. mantab ne,.,.dah lama bgt ane cari2 :) sukron katsiron

  29. mahsallah its very nice
    thank you bro

  30. unik ya page navigasinya… boleh tuh.

  31. Rock says:

    Makasih trik nya… coba dulu ahhh…..

  32. ardianzzz says:

    sangat menarik.. yeyapi saya rasa lebih baik lagi jika pengaturan (style) nya dibuat agar persis plek dengan kepunyaannya mbah google

    • admin says:

      Iya sebenarnya ini cuman iseng aja gara2 liat template kang jaloe, kang jaloe bikin Boogle kayak Woogle(WP theme) dimana Woogle gagal untuk menghasilkan page navi yg sama persis dg google. untuk versi blogger ini sudah sama persis dg google karena css dan Tablenya saya ambil langsung dari google.

  33. albani says:

    I want to try it on my blog, but it is still difficult to implement. Understandably new blogger

  34. srhan says:

    Peace be upon you,
    that works nice,,,
    thank you very much,
    May Allaah help you….

  35. Celeng Lewat says:

    allah ywafeqak Akhee, and grants you the best reward

    There is one small problem in this widget , it’s shown only in in the home page, but when we click on a category, or title post we see only the older ” older post” and “newer post”

    it doesn’t appear here

    but it appears only int home page

    you may check it after your study finish ,
    jazak allah khair

  36. What an innovative solution for blogger and readers to navigate easily and fast.

  37. Adeel says:

    Hey yaar very nice site I am also a blogger and blog on ,but the speacial thing is that i am the pakistans youngest blogger age 16.

  38. WINLIN says:

    SAlamu alaykum
    This one look nice , masha allah

    I tried it in my blog , but unfortunately it did’t work :(

    PLZ could you make an easy tutorial for this , i relly need this widget , baraka allahu feek

    • Abu Farhan says:


      Alhamdulillah, you like this widget, I hope, I can help you.
      Yes my tutorial not so good because I only concentrated to the script, for making good tutorial anesh did it he use my script for normal page nav in his blog with good explanation. this is his blog

      If you have problem you can ask me or anesh in his blog
      after you can use normal page navi you can use this js from my script

      • WINLIN says:

        SALAM Brother,
        Masha allah it works now , baraka allah feek, it’s Perfect widget,
        I have installed it finally, even i don’t know where to paste this code ” cssgoogle.txt ” , I just paste it under this one ” css.txt ( Page Navigation for Blogger (Problems Solved )” and it works : )
        the first time i tried only cssgoogle.txt without css.txt
        but it didnt work.

        I hope you integrate this widget in all new template you have or you are wiliing to create in the future insha allah : ).
        Jazak allah khair,

  39. choen says:

    maaf sebelumnya, jika js-nya gabung di dalam kode html sepertinya akan bermasalah dengan validasi, tapi saya juga tidak tahu bagaimana cara agar css, html dan js terpisah masing2, soalnya tidak paham bahasa js :).

    terimakasih, blog ini sangat bermanfaat tip dan triknya.

    • admin says:

      wah ahli html dan jquery bilang ga ngerti, saya mah ngalah aja deh. Untuk validasi blogger pasti bisa karena itu dah berupa encode. Utk validasi html emang bakal nambahin kesalahan html, yg sebelumnya sudah ada kesalahan html dari format htmlnya blogger. ya utk mengurangi kesalahan html gitu masukin ke file aja, cuman masalah utk blogger soal file js ini masih belum nemu yg pas, yg paling kuat cuman googlecode dan archive sih cuman belum pas dg TOS nya mereka

      • choen says:

        wah, hehehe…, saya cuman user, kalo disuruh buat ngak bisa.

        Yup masalah jsnya mesti di simpen dalam bentuk file, nah itu dia persoalannya tempat penyimpanannya, mungkin pengguna blogger mesti saweran beli hostingan untuk beli tempat hostingan…hehehhe. makasih Abu.

  40. Marcos says:

    Bom , proxima vez que eu for comentar eu usarei o google language tools para facilitar eu trabalhor rsrs .

    Mas assim , porque voce não transforma este gadget de paginas (ja que esta sem bugs)
    Em um Gadget BLOGGER ?
    assim como a Amanda do BloggerBuster fez com ‘ postagens recentes ‘ e twitter etc .
    Voce poderia fazer com o gadget de paginas .
    Eu ate poderia estudar como faz mas acho que deveria ser feito por um dos idealizadores .
    Mais uma vez parabens pelo conteudo e sinceramente se voce fazer isso garanto não so eu como MUITOS ficariam agradecidos por voce.


  41. Marcos says:

    Gostei muito do estilo ‘ google ‘ muito criativo , seria melhor se conbinado com um template google tambem , rsrs

    Parabens pelo conteudo muito bom =)

Leave a Reply

+ nine = ten

Dbestlists Dbestlists

Copyright 2009 - 2010  Choen