Awesome New Blogger Numbered Page Navigation Gadget




| 26 comments

new blogger page navigation gadgetBack in July i published a popular post showing you how to add a numbered page navigation gadget below your posts on Blogger.The Numbered page navigation is a must have gadget, making you blog much easier for readers to navigate and keeping them on your blog longer looking at more of your content.I'm sure you have seen page nav on many blogs, basically it's below all posts with 'Next Page' Previous Page' and numbered pages for the reader to choose from.

The script for the page navigation i published in July has since caused a lot of trouble often only working some of the time and in some cases not working at all.So i have worked at getting a new script with a much easier format that will work on all blogs all the time.I have also hosted this script myself to guarantee it wont let you down.

Adding the navigation gadget to your blog is also easier with this new script as you don't need to add a huge chunk of Css to your Blogger template.Just a small piece of code added to a html/javascript gadget and your done.So lets look at the screenshot and demo then add this great new gadget to your blog.

Screenshot

Blogger Page Navigation Widget

Live Demo - You can see The New Page Nav On Our Blogger Templates Site : Blogger Page Navigation Gadget

Add The New Blogger Page Navigation To Your Blog


Step 1. In your Blogger Dashboard Click > Design > Add A Gadget > Choose 'Html/Javascript' From The Pop Up Menu :







Step 2. Copy The Code Below And Paste It Into The Html/Javascript Gadget :

<a href='http://www.spiceupyourblog.com'><img alt='Best Blogger Tips' src='http://3.bp.blogspot.com/_rKG-ziTSNUQ/TQ5eV0U0EiI/AAAAAAAACik/xo2eFaDbfrE/s1600/best+blogger+tips.png'/></a><style type='text/css'>.showpageArea a {text-decoration:underline;}.showpageNum a {text-decoration:none;border: 1px solid #cccccc;margin:0 3px;padding:3px;}.showpageNum a:hover {border: 1px solid #cccccc;background-color:#cccccc;}.showpagePoint {color:#333;text-decoration:none;border: 1px solid #cccccc;background: #cccccc;margin:0 3px;padding:3px;}.showpageOf {text-decoration:none;padding:3px;margin: 0 3px 0 0;}.showpage a {text-decoration:none;border: 1px solid #cccccc;padding:3px;}.showpage a:hover {text-decoration:none;}.showpageNum a:link,.showpage a:link {text-decoration:none;color:#333333;}</style><script style='text/javascript'>var pageCount=10;var displayPageNum=5;var upPageWord="Previous";var downPageWord="Next";</script><script style='text/javascript' src='http://spiceupyourblogextras.googlecode.com/files/newbloggerpagenav.js'></script>

Important - I have set the posts per page at 10 (In Red Above), you can increase or decrease this however you must match this in your Blogger settings.So once you save the gadget go to your Blogger settings > Formatting > Set the posts per page to the same as the number in your page navigation code (See Image Below).Basically if you leave the number at 10 make sure your posts per page setting is 10, if you change to 8 make sure your posts per page is 8 and so on..



Step 3. OK just to keep your design page in proper order i recommend you drag and drop the gadget below the posts section.

That's your new numbered page navigation widget in place below your posts, if your comfortable with changing the code you can change the colors used.We have lots more Blogger Widgets and Blog Design Posts for you to check out.

Drop Your Comments, Views And Questions Below.


Join over 5000 Subscribers! Please sign up to receive Updates.

SUYB has its Focus on Quality. If we post Crap, you can unsubscribe.

No Spam and No Garbage! - Use RSS, Twitter & Facebook as an Alternative


If You Enjoyed This Post Please Take 5 Seconds To Share It.

26 comments:

  1. This is great, thanks :) I love anything that lets me show off how much content I have, vs just a link to "Old stuff here." Now I just need to tweak it, because my template is cutting off the bottom borders around the numbers.

    ReplyDelete
  2. @Blogsalelist Simply try adding some line breaks below the page nav code like this :

    < br/ > - without the spaces

    Or a horizontal rule like this :

    < hr color="white" > - without the spaces and change white for the background color of that area.

    Should do the trick,

    Paul.

    ReplyDelete
  3. bro. page navi is not show in of labels...!!!

    ReplyDelete
  4. @ Pree T - Dont understand your comment you will need to give me more info..

    ReplyDelete
  5. This is the greatest site i have ever seen because it has solved my problem about page navigation awesome guys keep it up.

    ReplyDelete
  6. Thanks Vishal, High Praise Indeed !

    ReplyDelete
  7. It's great it can be done without having to add another code to the blog template. Now since it only appears on the main page and not under each blog post I'd rather put it above the posts instead, if I had a chance.

    ReplyDelete
  8. SIr.. i Mean to say that numbering page navigation is working on my blogger main page but when i was click on my labels or archives it wil disappear nd show older posts newer posts links instead of number page navigation...!!

    ReplyDelete
  9. @ Pree T - I have noticed that happening on Best Blogger Templates also.I'm not sure why but it will appear on some pages and not on others.I will take a look at the script and let you know how it goes..

    ReplyDelete
  10. @PAUL
    help me with the gadget , my home displays more than 1 post and thats makes my blog to long to scroll to the end of it as my posts are to long!
    i want my home to display only one post at a time and the gadget to point to rest of the post and when clicking on it should show the posts one at a time not 2 or 3 at a time !

    ReplyDelete
  11. @Anonymous - Go to your Blog settings then formatting and at the top of the page you will see the option to only display one post per page.Then change the pagecount=10 to pagecount=1.

    ReplyDelete
  12. Paul the border below the numbers is disappear whos it is appears...???

    ReplyDelete
  13. @Pree T - Try adding some line breaks below the page nav code like this :

    < br/ > - without the spaces

    Or a horizontal rule like this :

    < hr color="white" > - without the spaces and change white for the background color of that area.

    Should do the trick,

    Paul.

    ReplyDelete
  14. thanks very much

    Was inserted in my blog

    http://free-games-4-you.blogspot.com/

    ReplyDelete
  15. The page navigation doesn't works on label pages but works on homepage and other post pages. Is there any way to have it working on the label page?

    I have customized it's CSS and it looks awesome with my blog template. Thanks for sharing the widget!!!

    ReplyDelete
  16. @Sahil - A few people have had the same problem, i will take a look at the script today.I took a look at your blog and you done a great job with the CSS.

    Paul.

    ReplyDelete
  17. Hey Paul its really awsum!! but its not working on my new blog? please guide me honey :(

    http://custmodcars.blogspot.com

    ReplyDelete
  18. Hey Paul its really awsum!! but its not working on my new blog? please guide me honey :(

    http://custmodcars.blogspot.com

    ReplyDelete
  19. Thanx 4 your help!!!!
    I've been looking for this feature for hours..
    Finally, I got it thank to your post :)

    ReplyDelete
  20. Paul Bro. i have some prob. with page navigation...!!
    the prob. is that totla no. of pages is shown is 51 only...!!
    further posts are disabled how am i solve this prob...??
    thnx...!!

    ReplyDelete
  21. Hey bro!!
    I checked the navigation stuff onto my site....jrpublishing.net ..... it aint working mate!!!

    It showing the old stuff again!!(numbered)
    I checked for the formatting and page count and all that ,inc putting tat under the blog post!!!

    its not working......
    can u help me out!!!

    CheerSS!!!

    ReplyDelete
  22. but this not working on fire fox please help me :(

    ReplyDelete
  23. Man !! You are my hero

    thank you it's working :D

    ReplyDelete
  24. Thank you very much :D

    but that didn't work on labels page ? a litte advice maybe ?? :)

    ReplyDelete



Important - If you ask a question make sure you tick the "Notify Me" box below the comment form to be notified of follow up comments and replies.


Hire Us