Numbered Page Navigation


Today we will see how to add a nice page number navigation hack blogger. The default navigation links (i.e Older Posts) is not the friendly visitor if you are having a lot of jobs and bloggers readers.Few has some problems with the above script navigation page. Now here is a completely new script and work for numbered page navigation (i.e. Panigation) for Blogger. The paging widget for blogger it easy for the visitor. It is a must have for any new blogs.This new script allows you to add numbered page navigation to blogger/ blogspot blog with page numbers starting(1, 2, 3, 4 ….) like those of a book.


Add Numbered Page Navigation Widget With DIfferent Styles For Blogger / Blogspot




Page navigation widget for blogger is most popular widget, and most bloggers are using this. because these players are only provided in the wordpress blogs hosted or blogs.But now his trick has been made ​​available to bloggers is also here that I am giving this Page Navigation Widget with different styles and options for full customization


How To Install This Widget On Blogger :-

Customize the Given Options and Click on Generate button
Click Add to Blogger button to add this widget on your Blog






Stylish Numbered Page Navigation Widget with Colored Styles For Blogger


Numbered Page Navigation Widget is a JavaScript hack for blogger to easily navigate blogger pages. In this post i am giving stylish navigation with different colorful styles.

An error was found in some blogs and it is also fixed in this widget.
eg.hiding at top


How To Install This Widget On Blogger :-


  1. Click the below Button
  2. Customize the Options given in Widget form
  3. Click on "Generate" Button
  4. Finally click On "Add To Blogger" Button






How to Add Numbered Page Navigation Widget for Blogger / Blogspot





Page navigation is awesome widget that allows navigation of page number to the visitors. You might have seen numbered page navigation in many WordPress blogs. It is simple JavaScript that allows your older posts, new posts and links to the house numbers. Have you seen older posts, new messages and links at home bored.



How To Add Numbered Page Navigation Widget to Blogger Blog?

I am giving best customizing options to this widget

Note:-Choose colors for your convenience you feel good.

1.Customize Options in Widget Form
2.Click on Generate Button
3.Then finally Click on Add to Blogger Button to add as a Widget






Blogger Page Navigation Widget With DIfferent Styles


How To Install This Widget On Blogger :-

Customize the Given Options and Click on Generate button
Click Add to Blogger button to add this widget on your Blog














UPDATED


Change based on your blog setting :
var postperpage=5;
var numshowpage=3;

Postperpage : How many Post every Page for your blog
numshowpage : how Many number will show in Your page Navigation

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)

'data:label.url'


and Replace with this

'data:label.url + "?&max-results=5"'


Change 5 base on how many post every page










Many thanks to Harish for making this code , Some Stylings and PageNavi Script by Abu Farhan and I just tested and modified to work on blogger

352 comments:

  1. Assalam.o.Alaikum,
    Good Blog... Specially I Like The Background Color A Lot ... Its So Simple..

    ReplyDelete
  2. Good Work bro !
    The ultimate solution to page number navigation..

    ReplyDelete
  3. Hi, Nice description about Numbered Page Navigation.Thanks, its really helped me......

    -Aparna
    Theosoft

    ReplyDelete
  4. Many thanks for the tutorial, but how can I get rid of the page navigation if I don't want it anymore? I can't find anything in the layout section nor in the code, please help :)

    ReplyDelete
  5. Thanks for sharing such a nice tutorial buddy.... Great Post...

    ReplyDelete
  6. Nice. Implemented immediately. Thanks.

    ReplyDelete
  7. Thanks bro working.you can see at techgurusunil.blogspot.in

    ReplyDelete
  8. i liked your tutorial, it really helps me alot

    ReplyDelete
  9. Your Blog is great, each and every article worth millions, it really helps alot...

    thanks for writing such a great tutorials...

    ReplyDelete
  10. very valuable article.it will help us.

    ReplyDelete
  11. These are very rare tips. Thanks for sharing.

    ReplyDelete
  12. Old post, but should help somebody...
    It doesn't work with private blogs.

    ReplyDelete
  13. sip dah infonya, salam sukses gan

    ReplyDelete
  14. Ups. It works like a charm right now! Thank you for the great job, man!

    ReplyDelete
  15. Excellent sharing.May You Live Long. ummmmmmmaaahhhhhhhhhhhhhhhh....... :p

    ReplyDelete
  16. useful thanks alott

    http://www.ermchen.com/

    ReplyDelete
  17. I tried it on 1 of my blog and it's working perfectly.
    So simple this is. Thanks to admin...

    ReplyDelete
  18. @Admin:

    After using your code from last 6+ months now I'm facing a problem. If you click anywhere on my blog it'll take you to your blog eg: http:24work.blogspot.com.
    What should I do to solve this problem.

    Your help is appreciated

    ReplyDelete
  19. hello friend Muneer Hasani

    Go to Blogger Dashboard >> Layout >> Add a gadget >>

    find HTML6 [HTML/Javascript Box]

    Remove or delete HTML6 your blogspot blog [HTML/Javascript Box]




    ....................................................


    Now Add A new HTML/JavaScript widget

    Now paste the code given below :

    .....................................................

    <style type="text/css">#blog-pager{font-size:normal}.showpageArea{font-family:verdana,arial,helvetica;color:#000;font-size:11px;margin:10px}.showpageArea a{color:#000;text-shadow:0 1px 2px #fff;font-weight:700}.showpageNum a{padding:3px 8px;margin:0 4px;text-decoration:none;border:1px solid #999;-webkit-border-radius:3px;-moz-border-radius:3px;background:#ddd url(http://4.bp.blogspot.com/_McxL-_3YYuM/TBG_a0U9fJI/AAAAAAAAAAU/qcqAF8aqWME/s1600/wp1.jpg) 0 -50px repeat-x}.showpageNum a:hover{border:1px solid #888;background:#ccc url(http://4.bp.blogspot.com/_McxL-_3YYuM/TBG_a0U9fJI/AAAAAAAAAAU/qcqAF8aqWME/s1600/wp1.jpg) 0 -25px repeat-x}.showpageOf{margin:0 4px 0 0}.showpagePoint{color:#fff;text-shadow:0 1px 2px #333;padding:3px 8px;margin:2px;font-weight:700;-webkit-border-radius:3px;-moz-border-radius:3px;border:1px solid #999;background:#666 url(http://4.bp.blogspot.com/_McxL-_3YYuM/TBG_a0U9fJI/AAAAAAAAAAU/qcqAF8aqWME/s1600/wp1.jpg) 0 0 repeat-x;text-decoration:none} </style>
    <a href="http://24work.blogspot.com/" target="_blank" title="Blogger Tips and Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tips and Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://24work.blogspot.com/" target="_blank" title="Latest Tips And Tricks"><img src="https://bitly.com/24workpng1" alt="Latest Tips And Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://24work.blogspot.com/" target="_blank" title="Blogger Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tricks" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a>
    <script style='text/javascript'>
    var postperpage=10;
    var numshowpage=6;
    var upPageWord="Prev";
    var downPageWord="Next";
    var home_page="/";
    var urlactivepage=location.href;
    </script>
    <script style='text/javascript' src='http://safir85.ucoz.com/24work-blogspot/page-navigation/0-test-p-n-01_00.js'></script>



    ..............................................
    And now click Save


    broken image completely working....

    ReplyDelete
  20. thank you so much sir...its very good for all of us...thanks once again

    ReplyDelete
  21. yeah it helps me alot, thanks google help me to find this useful page

    ReplyDelete
  22. Yes Good Idea See More In : http://blogger-tuto.blogspot.com/

    ReplyDelete
  23. Nice article.. Keep up the good work... Thanks for sharing...

    ReplyDelete
  24. I would like to thank for creating this interesting blog, so i would like to thank for creating this interesting message.

    ReplyDelete
  25. I like this site because it show some easy ways to create page and blogs. It helped me a lot in various moments for my blog. Thanks for sharing views and ideas of paging in the blogspot blogger. It is really useful to change my page look like wordpress blogs.

    ReplyDelete
  26. Va multumesc pentru ajutor, sunteti minunati :)

    ReplyDelete
  27. In your blogger account,First create a post for your homepage, you can give the title as "Home" so that you could know that its for the homepage.
    Website Design Companies | Web Design Companies Bangalore

    ReplyDelete
  28. thanks..its working..tell me about how to add this in the search results in my blog?

    ReplyDelete
  29. its working but dont know about how to add this in the search result?

    ReplyDelete
  30. a really nice widget, thank you for the great job

    ReplyDelete
  31. thank u so much Harish and team... i have been looking for a very long time... now i have implemented on my blog... http://thefootballhighlightstoday.blogspot.com/

    ReplyDelete
  32. Very Nice Work Thnx Bro, Buy/Sale, Or Exchange Money Just Visit : www.paymentbase.com

    ReplyDelete
  33. Nice and helpful topic. Thanks a lot for your sharing.

    ReplyDelete
  34. Thanks A lot for this tutorial and searching for it fro a long time..thnaks a lot again

    ReplyDelete
  35. wow thank you, its amazing. visit back in xeanertsdotkbidotordotid, seo trick and tips

    ReplyDelete
  36. Hello, great blog!

    Got a question... How do I completely hide the Newer/Older posts from appearing WITHOUT disabling the entire thing rendering it useless?

    I ask because, sometimes it will still sometimes appear for me... even under the comment box.

    Expecting a message back from you! :P

    Thanks again

    ReplyDelete
  37. great site. i really love to visit this site………

    ReplyDelete
  38. This blog is for blogspot tutorial. Also visit SEO Company Noida to get some advanced concepts of SEO in today's emerging trends.

    ReplyDelete
  39. niiiiiiiice I was looking for that , finaly my blog with numbered page

    http://donhackingarticles.blogspot.com/

    ReplyDelete
  40. Thanks man...i think its very useful for the visitors

    ReplyDelete
  41. God bless you guys on such wonderful work !!
    Regards,
    Priyanka

    ReplyDelete
  42. Nice work. I add to my blog. Thank you very much.

    http://emoney-np.blogspot.com

    ReplyDelete
  43. great.. helped me in many projects thanks for this wonderful share

    ReplyDelete
  44. i searched alot, but thanks to you i found it here.. pretty though you have a lot of tutorial Sir..

    Thanks

    ReplyDelete
  45. very2 thankyou so much for ur all great tricks

    ReplyDelete
  46. nice post and also it too usefull....
    thanks a lot more

    anna university exam results and question papers
    www.technical4u.com

    jobs in indian
    software jobs in india
    www.Jobsearchspot.com

    ReplyDelete
  47. nice post and also it too usefull....
    thanks a lot more

    ReplyDelete
  48. nice working
    for live tv chennals
    http://live-action-tv.blogspot.com/2012/12/ptv-sports.html
    for pashto images
    http://pashtoimages.blogspot.com

    ReplyDelete
  49. nice

    http://desistreams.net/live-movies/dhoom3-full-movie-online

    ReplyDelete
  50. Thank You Bro! you always help with some good tips,Great work!...

    ReplyDelete
  51. This worked really well on my blog!

    Check it out: http://mphotoaday.blogspot.com/

    ReplyDelete
  52. Hi There..I used this pagination widget..Its fine on home page but not appearing on labels..Could you please help me out here?

    ReplyDelete
  53. wow this is great and simple method to create number page navigation for by the e way I have 2 two blog one is hosted don WordPress but other is on blogger. i will apply these setting for my blogger's blog. Thanks for sharing.

    ReplyDelete
  54. Sir Please Upload Html Code of numbered-page-navigation

    ReplyDelete
  55. It's so nice and interesting info. I really like the way you discuss your idea on this field. thanks.and visit this site:http://baundole.blogspot.com

    ReplyDelete
  56. Worked earlier but does not work now. The widget content is blank so blogger gives the error message. I had it on my blog but removed it later and now I cannot add it

    ReplyDelete
  57. I like your website with the deep of heart ( My website is http://eachknowledge.blogspot.com/)

    ReplyDelete
  58. Great post!
    http://www.tiranicas.com.br/

    ReplyDelete
  59. You have given a great tech. to show the Page Navigator on the Blogspot website.. Thankss...
    I do work on a IELTS based website.. Please give me a backlink as I have already added you little banner on my homepage.. My Website is . http://www.britishcouncillisteningpracticetest.com/

    ReplyDelete
  60. I love these navigation styles. You put lot of hard work in developing this. Thanks a lot. I will implement this on my blog.

    Thanks,
    pnr status

    ReplyDelete
  61. thanks dude. http://www.ariteknik.net/

    ReplyDelete
  62. Really nice tool. i found it quite hard, but now i am glad that i found it. thank you

    ReplyDelete
  63. You do have a colorful guide...it helped in easy understanding. Thanks!

    ReplyDelete
  64. I have been really impressed by going through this awesome blog. LAVONA

    ReplyDelete
  65. It is really amazing...Thanks for your hardwork to make it done for us.
    One can visit my amazing blog >> http://beb24.blogspot.com

    ReplyDelete
  66. Currently I am using Blogger blog and I want to use Number page navigation for my site. and this pot is very very useful for me. Thanks dear for sharing your experience here.

    ReplyDelete
  67. Wonderful blog i should say and thanks for your data and thanks for share.
    Online Ecommerce Solution

    ReplyDelete
  68. Thanks for sharing your great ideas. I will try this navigation widget in my blog sites. It's all about the magic of Script and CSS.This post is really helpful for the jargon who are doing job in blog creation , reading blogs and giving ideas regarding blogs for some other websites.

    ReplyDelete
  69. Really Love your blog, I'll put one in my blog. Thanks Unusual gifts for men

    ReplyDelete
  70. I was looking for this type of page navigation from a long while . Now my blog will also look like wordpress blogspet shop, dog supplies

    ReplyDelete
  71. Hi Dear, are you truly visiting this web page on a regular basis, if so after that you will absolutely take good experience.

    ReplyDelete
  72. can someone email me the code at lucifur2001@gmail.com

    ReplyDelete
  73. I was looking for this type of page navigation from a long while . Now my blog will also look like wordpress blogs
    lower left back pain

    ReplyDelete
  74. I was looking for this type of page navigation from a long while . Now my blog will also look like wordpress blogs

    Phuket luxury villas

    ReplyDelete
  75. I'm trying to change the navigation style good

    ReplyDelete
  76. This article can help .... I can read them with new knowledge ... thank you so much for what was given to me

    ReplyDelete
  77. really like this, i'll try to use this on my site.....

    ReplyDelete
  78. Nice blog and its information. I also agree with your views and ideas. Your blog information is very useful for me in my future use?

    ReplyDelete
  79. Nice Widget but not good the way it splashes links all over someone's blog when the website is loading

    ReplyDelete
  80. On blogger if you have a lot of posts the numbered page is the way you can show your posts that because if you dont use that your all posts will not be displayed. Now that i finde this bog my problems white my sites ar not eni longer a problem. TNX
    My blog looks more nice right now: http://www.coroanafunerara.net

    ReplyDelete
  81. Hi, I am confused! can I add pagination to the inner pages (not home page) of blogger ? yes! then how ?

    ReplyDelete
  82. Good article
    See more at www.apajrlab.com
    www.apajrlab.blogspot.com

    ReplyDelete
  83. Excellent work and superb collection of facts. People may think about Search Engine Optimization too. Navigation

    ReplyDelete
  84. Great. I am searching very well like the info.

    ReplyDelete
  85. wow....useful tips for me because I'm not so able to do make up! :) you're so precious! Lovely Read! for more visit this website
    Navigation

    ReplyDelete
  86. Thank you very much, after spending almost 3 hours to get good navigation styles by searching in Google I got yours and finally I am satisfied with this. thanks.

    ReplyDelete
  87. Thank you so mauch for sharing. I really want to use this widget to my blog too..

    ReplyDelete
  88. I enjoyed the article. very interesting, thank you.

    ReplyDelete
  89. Thank you for this tips

    ReplyDelete
  90. This blog information is eccellent,
    jobs

    ReplyDelete
  91. This is great.... Thank you for sharing

    ReplyDelete
  92. very good....nice work ...thank you very much

    ReplyDelete
  93. This is Best ID Card for Numbered Navigation. Useful to integrate In all blogger blog which has more posts than one.

    ReplyDelete
  94. It is just awesome
    For Free Bangla E Book Download............
    http://allbanglaboi.blogspot.com/

    ReplyDelete
  95. I have read your article thoroughly. I think that will be helpful for the bloggers.

    online news in Bangladesh

    ReplyDelete
  96. thanks bro
    http://bogracity24.blogspot.com

    ReplyDelete
  97. This Page navigation is so beautiful.. I will try it.

    ReplyDelete
  98. Thanks so so much! love this widget xx

    ReplyDelete
  99. it works only on home page .,,, not under labels posts

    ReplyDelete
  100. I have added it to my Blastism and its working. To see go to see. thank you admin

    ReplyDelete
  101. It is a must have for any new blogs. read more

    ReplyDelete
  102. very nice post help me alot

    http://downgamecodes.blogspot.com

    ReplyDelete
  103. Thanks, it was simple & the best part did not require any HTMlL change

    ReplyDelete
  104. Thanks! I have searching for this code i tried a lot of such scripts but they didn't worked but this one worked.

    ReplyDelete
  105. It was very interesting for me to read that blog. Thanks the author for it.I like such topics and everything that is connected to them. online jobs

    ReplyDelete
  106. অস্থির! অনেক দিন ধরে এটা করতে চাইছিলাম! ধন্যবাদ ভাইয়া......

    ReplyDelete
  107. I have already bookmarked it for future reference

    Website Design Company

    ReplyDelete
  108. It will be more helpful if followed at once.

    ReplyDelete
  109. wow works fine visit my blog

    http://mixfreedownloads.blogspot.com/

    ReplyDelete
  110. Hey Rahul Amin, Hello, can i use this widget into my blog, and use as a tool on my blog readers also , if you permit me.
    This is my website. http://www.techora.net/

    ReplyDelete

 
Top