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;
overflow:hidden;
text-align:center;
}
.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="http://www.netoopsblog.com" style="font-size:0pt">Blogger Widgets</a>
<script style='text/javascript' src='http://netoopscodes.googlecode.com/svn/netoops-page-nav-v2.js'></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]

39 comments :

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

    ReplyDelete
    Replies
    1. what template using you tell me
      http://www.latesttweaks.com

      Delete
    2. give me your blog free
      http://www.latesttweaks.com

      Delete
  2. thank you this has been very useful i used it in m own blog
    http://sophiescashzone.blogspot.com/

    ReplyDelete
  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??

    ReplyDelete
    Replies
    1. yes css codes are placed in style tag

      Delete
  4. Not working for my blog....http://privatejobshunt.blogspot.in/ pls check my site source code and help me

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

    ReplyDelete
  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

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

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

    ReplyDelete
  9. really nice i like it
    and see also my new blog http://www.mytechblogging.com

    ReplyDelete
  10. This comment has been removed by the author.

    ReplyDelete
  11. wow super blogs Admin thakns good you :)

    ReplyDelete
  12. thanks its working

    guys check out here http://iptv-tv.blogspot.com

    ReplyDelete
  13. its working on my blog thanx admin
    http://fullygamez4u.blogspot.com/

    ReplyDelete
  14. Absolutely Stunning Blog.......Excellent...I'm Wondering How One Can Build Such A Beautiful Blog!
    Blogger-Adsense-Android-Tricks

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

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

    ReplyDelete
  17. http://techarticlesbd.blogspot.com/

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

    http://amazingtechnologies24.blogspot.com

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

    ReplyDelete
  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
    seo

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

    ReplyDelete

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