Recommended Article for you : get unlimited Freecharge Trick revealed

Beautiful Page Navigation for Blogger Blog [new script]

page navigation for blogger
Blogger Page Navigation is an awesome trick to navigate your Blogger Blog Pages.It allows your users to Navigate Blog pages like Book,By using this your blog visitors can easily go to an appropriate page.By default Blogger allows Older Posts and Newer Posts link to Navigate between Blog pages.It is very difficult for your users to navigate deeper into your Blog's Posts, so the Page Navigation helps us to solve this problem.
 Let's see how to install it.Follow the steps below.

1.How to install Page Navigation Widget

  • Log In to your Blogger Account
  • Go to Design-> Page Elements(Shown in the Picture)
  • In New Blogger Template Go to Layout -> Add Gadget
  • Click on Add Gadget (anyone) and look for HTML/Javascript take it.
  • Leave the Title as Blank(as shown in the figure)
  • Copy and paste the below code in it.
<style type='text/css'>
#blog-pager{height: 28px;
    padding: 10px 0 0;
.showpageArea a {text-decoration:underline;
font-size: 16px;
       text-align: center;}
.showpageNum a {font-size:16px;text-decoration:none;border: 1px solid #cccccc;margin:0 5px;padding:5px;}
.showpageNum a:hover {border: 1px solid #cccccc;background-color:#cccccc;}

.showpagePoint {font-size:16px;text-decoration:none;border: 1px solid #cccccc;background: #216FD9;margin:0 5px;padding:5px;color:#ffffff;}

.showpageOf {text-decoration:none;padding:5px;margin: 0 5px;}
.showpage a {text-decoration:none;border: 1px solid #cccccc;padding:5px;}
.showpage a:hover {text-decoration:none;background: #cccccc;}
.showpageNum a:link,.showpage a:link {text-decoration:none;color:#333333;}</style>
<script style='text/javascript'>var pageCount=7; 
var displayPageNum=5;var upPageWord="Previous";var downPageWord="Next";</script><a href="" style="font-size:0pt">Blogger Widgets</a>
<script style='text/javascript' src=''></script>
you can change Red Highlighted texts when you need. pageCount=7;  determines how many Blog posts in each pages. you want to display in each pages.(Note:if you change this value '7' goto Settings->Formatting and change value of Show at most as you given in PageCount)
And displayPageNum=5 determines how many additional Page Navigation numbers display on the page.
  • Click on save,You are almost clear.
  • Then Change the position of the Widget ,place under the Blog posts.(shown in the figure)
  • Done..your blog had a page navigation bar.
The Page Navigation had been developed by Muhammed Rias and it was a good presentation.There are some bugs in that and Abu Farhan had solved it.Give them a big thanks for giving us a Beautiful Page Navigation Solution.
Close [x]


  1. Excellent posts for new bloggers and helpful for all.

    1. what template using you tell me

    2. give me your blog free

  2. thank you this has been very useful i used it in m own blog

  3. not working...
    1. Is it bound to work in some blog....I've simplest one column blog,
    2. Above code wont require editing CSS???
    3. Is it possible to make it availabe XML blog of above code??

    1. yes css codes are placed in style tag

  4. Not working for my blog.... pls check my site source code and help me

  5. How can i stretch the background to full width in default templates ?3D Navigation menu bar widget for blogger

  6. Entire nav looks awesome but i have a query that i want to add search box at the tail of nav bar. Is it technically possible if yes than please suggest me.navigation menu

  7. i can't show for my blogger
    please help me

  8. Really a wonderful post and very useful for me.Thanks

  9. really nice i like it
    and see also my new blog

  10. This comment has been removed by the author.

  11. wow super blogs Admin thakns good you :)

  12. thanks its working

    guys check out here

  13. its working on my blog thanx admin

  14. Absolutely Stunning Blog.......Excellent...I'm Wondering How One Can Build Such A Beautiful Blog!

  15. page navigation bar worked only in home doesnot work with post category/menu.....?

  16. tnx , it's working....... Admin


  18. I have added it to my blog and its working. To see go to

  19. i have added it tto my blog. but, i think it is not balance with my blog. but is very cool

  20. Add a website on our ssl secured directory submit your link free and paid at our page rank 2 directory website today that also has featured link ads and link ads with google page rank

  21. Thanks for nice sharing about add page number navigation widget. It is excellent post for add nice page navigation in blogger blog. I must use this post for my site.
    Thanks again.


Ask your thoughts to us,We are happy to help you.

1.Please don't Spam
2.We strictly recommend to Click on Subscribe to email