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

369 comments:

  1. I'm trying to change the navigation style.. Thanks for the tuts.

    ReplyDelete
  2. This comment has been removed by a blog administrator.

    ReplyDelete
    Replies
    1. Please don't spam,spam comments will be deleted upon our reviews.

      Delete
  3. i have no words to say tanks to you but
    a very small word for u THANKS.

    ReplyDelete
  4. thank you very much very nice information or post : mobile prices in saudi arabia visit my blog > http://ksamobile.blogspot.com

    ReplyDelete
  5. This comment has been removed by a blog administrator.

    ReplyDelete
    Replies
    1. Please don't spam,spam comments will be deleted upon our reviews.

      Delete
  6. thanks 4 ur share. very nice. im added 1 on my blog.

    ReplyDelete
  7. 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
  8. Thank you so much for this help. i have added it to my blog and its working.
    http://www.funnspot.com

    ReplyDelete
  9. I'm gonna use this widget on my blogger blog..

    ReplyDelete
  10. i love it
    thanks you site is bast
    http://vip-vid.blogspot.com

    ReplyDelete
  11. i am trying to use this all of this vanigator widgets in my blogger but i have no results :(
    nothing appearing in my blog and i cannot navigate to my older or newer pages :( i have big problem
    please can anyone hels me ?
    my page is kopsekati.blogspot.com
    thanks a lot

    ReplyDelete
  12. buna ma poti ajuta cum sa fac si eu widget pentru blogu meu

    ReplyDelete
  13. really so nice post its helpfull blog thx dear

    ReplyDelete
  14. realy thnk you so much...
    this navigation bar is realy helpfull...
    www.waysofsms.com

    ReplyDelete
  15. thankz for helping me....
    this is very usefull in website...
    plz friends try my website..
    http://worldoffunn.blogspot.in/

    ReplyDelete
  16. Great, Ultimate solution for new page navigation. Awesome tips.

    ReplyDelete
  17. Wooowwwww...
    This Page navigation is so beautiful..
    I like it Very much....
    I don't know how to say thanks....
    Huhhhh....

    ReplyDelete
  18. Nice post. Thanx a lot for creating such a beautiful widget.

    www.getalltricks.in

    ReplyDelete
  19. First off, I want to say how much I love your site!
    It is so very informative.
    I used the numbered navigation widget on my blog and it worked just fine.
    I recently turned my blog into a members only blog and now the widget wont appear! :(
    Do you have any suggestions?
    Whenever I revert it to public it appears...

    ReplyDelete
  20. YOU ARE GREAT. THANK YOUUUUUUUUUUUUU.

    ReplyDelete
  21. Nice blogger widget
    great share..

    www.kiosbabe.blogspot.com

    ReplyDelete
  22. wow! so good,Thanks Can I ask you How to do these program for blogspot? Thanks for answer back.

    ReplyDelete
  23. well i added the page navi in my site..and if i get the list of backlink site...i will inform..

    ReplyDelete
  24. thaaaaaaaaaaaannnnnnnnnnkkkkkssssssss yyyoooooooouuuuuu.............. LIKE

    ReplyDelete
  25. Nice and I'm trying to implenent on Index Page

    demo: Best Music Cover

    ReplyDelete
  26. its good but but the page navigation is not shown in the categories

    ReplyDelete
  27. Thanks...
    works perfect!

    ReplyDelete
  28. If any one wants some blogger tricks than visit http://blog-toolz.blogspot.in/

    ReplyDelete
  29. thanks look awesome on my blog. http://filimia.blogspot.com/

    ReplyDelete
  30. Very nice and very helpful.
    Please visit my blog http://danishcoolkhan.blogspot.com
    love u and god bless u with truth.

    ReplyDelete
  31. Very helpful information. Thanks.

    ReplyDelete
  32. Awesome widget!
    i was Looking for this!!
    Many thanks Brother!
    your blog is really Gr8!!
    TRiCKSme.IN The Technology Blogn

    ReplyDelete
  33. There is still no luck. I have tried many times copying and pasting the HTML/javascript on my blog at the bottom "Add a Gadget". I use the simple version template. Is something to do with "Posts or Pages"? I see only "newer post or older post" at the bottom. Can anyone help me please?

    ReplyDelete
  34. @Aponpost

    Hi Aponpost,
    I wonder if you can tell me how to create a navigation top bar with each category. I am looking for this display on my recipe blog. I really appreciate if you can help.

    ReplyDelete
  35. Hi there, I have added the code to another blog of mine it works but it shows only home page " page 1 of 1" so I wonder if it is something about when I post at "new post" or "Pages". Can anyone explain why is that and what I sould do to make it correctly?

    ReplyDelete
  36. hey i tried it superve thanks www.andhragallery4u.blogspot.com

    ReplyDelete
  37. This comment has been removed by a blog administrator.

    ReplyDelete
  38. Thanks a lot !!!!

    www.noncamerasmartphones.com

    ReplyDelete
  39. Are you a new blogger or start your career in online?You will get the the best tutorial,tips and tricks

    ReplyDelete
  40. Amazing ... this is awesome blogger Page navigation.. good job beother...!



    ReplyDelete
  41. Thank you so much for this wonderful widget!!
    Finally I got it..here is my blog http://thairecipesfrommykitchen.blogspot.ca/

    ReplyDelete
  42. Thanks a lot !!!

    www.noncamerasmartphones.com

    ReplyDelete
  43. Nice post. Thanx a lot for creating such a beautiful widget.

    ReplyDelete
  44. FREE SPORTS TV!! FREE Amazing 1.5 Software to enjoy all live sports online. Totally Free. Make your PC to SPORTS TV!! Just download and enjoy--- http://goo.gl/oCJmY

    ReplyDelete
  45. posts and your blog is very interesting article, I like this blog, thanks for the info, I will visit again to see your next post and article ....

    ReplyDelete
  46. success!



    http://viecvat.info/index.php

    ReplyDelete
  47. thanKX for sharing here is my blog www.livesportschannle.blogspot.com

    ReplyDelete
  48. www.tnetdownloads.blogspot.com
    this is a amazing blog

    ReplyDelete
  49. http://24work.blogspot.com/ <3 awesome work bro

    ReplyDelete
  50. Thank You!!


    _________________________________________
    khmer blog : http://akbalthom.blogspot.com

    ReplyDelete
  51. thanks blog page warking

    http//:ramzankhan.blogspot.com/

    ReplyDelete
  52. Awesome thanks a lot ..
    Great tool

    www.newstelecom.info

    ReplyDelete
  53. really nice... i applied it for my blog
    www.alwanserv.blogspot.in

    ReplyDelete
  54. Clients have come to expect a higher level of functionality and interactivity as they visit more and more websites that utilize things like Ajax, and JavaScript. Whilst CSS3/HTML5 has started to step on the toes of JavaScript, JavaScript itself has started to inch into the territory of Flash.

    javascript jobs

    ReplyDelete
  55. Great !
    thnaks alot... i just implemented this on my blog successfully
    Junaid


    http://paradigmwisdom.blogspot.com/

    ReplyDelete
  56. http://Run19.com my friend's step-aunt made $15620 the prior week. she is making income on the laptop and moved in a $351800 condo. All she did was get lucky and put into action the instructions made clear on this web page http://run19.com

    ReplyDelete
  57. Work From home, Part time Online Jobs From home on without Invesment
    www.jobzcorner.com

    ReplyDelete
  58. wonderful code, this is working fine...

    ReplyDelete
  59. thanks for this tutorial, am making use of it on blogger blog and it is working great.

    ReplyDelete
  60. Thank you so much fot this page navigator! I have a question thought. Is it possible to change "Page x of x" to another language?

    Thanks!
    //E

    ReplyDelete
  61. Hey this is cool thanks for the widget~!
    mybloggertopic

    ReplyDelete
  62. thanks gan sangat bermanfaat ternyata...he

    ReplyDelete
  63. hey thanks visit my blog www.everypremiumpro.blogspot.com

    ReplyDelete
  64. Than you so much....
    very easy to add..

    ReplyDelete
  65. Thanks it is working nice
    here is demo:http://moviesnpic.blogspot.com/

    ReplyDelete
  66. Thanks
    here is my demo:
    http://yoncademirel.blogspot.com

    ReplyDelete
  67. Bundle of thanks...
    I'de one before but suddenly it disappeared few days back he/she had hosted his/her script on goodle code so may be the script is deleted or something like that but now I found ur script which is very easy to install and with alot of styles.
    Thanks again :)
    .
    .
    http://sms808.blogspot.com

    ReplyDelete
  68. nice look on my blog
    http://fullsoftbd.blogspot.com

    ReplyDelete
  69. please update this for labels because this pages is only for home page i love your site this is very useful site

    ReplyDelete
  70. your site is best in the world i love it love it love itttttttttttttttttttttttttttttttttt thanks here look at my site pcgames827.blogspot.com

    ReplyDelete
  71. Fantastic...
    Thanks Admin you are ***** :)

    ReplyDelete
  72. yes very nice i have done every thing
    check here
    atif3.blogspot.com great funny picture

    ReplyDelete
  73. nice sit and good working thank a lot.............

    ReplyDelete
  74. Good tips to add numbered navigation on blogger. I like the idea of inverted model
    where you write the summary first. In
    fact, it makes a lot of sense since most people skim though the blog post then decide if they want to read further or hit the back button.

    ReplyDelete
  75. VERY NICE KNOW FOR BETTER VISIT MY BLOG: WWW.TUNEIT.TK

    ReplyDelete
  76. This comment has been removed by a blog administrator.

    ReplyDelete
  77. Wow a great work :)
    Thanks for it. Really Works :D

    ReplyDelete
  78. cool, very impressive i put it on blog

    ReplyDelete
  79. A small wooden or metal support is typically called a post, and supports with a rectangular or other non-round section are usually called piers.

    Columns

    ReplyDelete
  80. very effective codes. thanks admin...

    ReplyDelete
  81. Nice it works..
    Check out my blog.
    www.funalbum.blogspot.com

    ReplyDelete
  82. i like your article, thanks to your sharing!
    keep spirit!

    ReplyDelete
  83. Hi ,
    I enjoyed reading your blog with my partner. She loves the style and read so many fashion related news.

    ReplyDelete
  84. i want to set my numbered page navigation in my blog then i saw your blog i generate code from here that code work great
    visit my blog for get tricks tutorial software and much more workingtricks.info

    ReplyDelete
  85. Thanks so much Dear

    ReplyDelete
  86. this is really very informative post. thanks for sharing.

    ReplyDelete
  87. V.nice sharing. keep it up.

    if u wana download high quality games then visit my blog

    Faboulousgames.blogspot.com

    ReplyDelete
  88. thinks a lot
    http://ectheme.blogspot.com

    ReplyDelete
  89. HI

    Thank you for Goog Widget

    ReplyDelete
  90. This is the greatest page navigation widget that I've ever found...!

    ReplyDelete
  91. its very helpful for me thnkx a lot........

    ReplyDelete
  92. WOW... its Amazing Artikel..,, please ComentBack http://genkacyber-pkp.blogspot.com :)

    ReplyDelete
  93. Thanks now my blog is nice readdy....

    ReplyDelete
  94. Really your blog is very interesting.... It contains great and unique information. I enjoyed to visiting your blog. It's just amazing.... Thanks very much for the share.

    ReplyDelete
  95. Nice website
    For blogging tips and tricks, smile, laugh, story, jokes and many more visit this blog
    http://honney2bunny.blogspot.in

    ReplyDelete
  96. thanks sooooooo much. it's esy and it works!

    ReplyDelete
  97. This comment has been removed by a blog administrator.

    ReplyDelete
  98. Thanx Man , It's very nice ....
    http://www.digitalhubinc.com/

    ReplyDelete
  99. Well that is a quit good article you have right here that make some things easier to deal with thanks you .

    ReplyDelete
  100. Thank you so much for your generosity in sharing so many wonderful styles... we're spoilt for choice! I'm terribly joyous, it worked like a charm and looks splendid on my blog. I've gladly referred to your article at my blog post at http://jacqsbloggertips.blogspot.com/2011/04/add-numbered-page-navigation-for.html
    Thanks again.

    ReplyDelete
  101. Owner able admin what i saying about your blog i have no words for saying some thing just i am saying out standing ...Nice article about Navigation techniques. I think this article is so informative and i will follow this techniques in my blog for better seo.
    My blog
    Cccam Server | Cardsharing

    ReplyDelete
  102. Thanks a lot man its works ...
    this is my blog bengeek, cooking, and I changed the style ..!!

    ReplyDelete
  103. If you ever wanted to move your blog blogger to wordpress then contact me i will help you. My website address http://geekspage.org/free-blogger-to-wordpress-migration-service/

    ReplyDelete
  104. Nice Sharing Keep it up....

    Visit my Blog.. Click HeRe

    ReplyDelete


  105. We get good information from your blog.This is a very nice blog New projects in noida extension

    ReplyDelete
  106. This comment has been removed by a blog administrator.

    ReplyDelete
  107. applied this with a little modification...
    here it is www.droidchicken.com
    Pleaase see and comment

    ReplyDelete
  108. This comment has been removed by a blog administrator.

    ReplyDelete
  109. This comment has been removed by a blog administrator.

    ReplyDelete
  110. This comment has been removed by a blog administrator.

    ReplyDelete
  111. How to translate into Russian? Instead "Page __ of __" write "Страница __ из __": http://rb-blog-test.blogspot.ru/

    ReplyDelete
  112. Such an interesting and informative post..



    Mobile Applications

    ReplyDelete
  113. very easy and useful way to create paging in the blogspot blogger.I implemented in on my blog http://wwww.webcodeexpert.com and now it look awesome

    ReplyDelete
  114. Thanks fоr sharing yοur thoughts on Surνivor Sеason 25 Eρisode.
    Load Systems

    ReplyDelete
  115. Thank you very much. I have already added a numbered post navigation. It looks very nice.

    ReplyDelete
  116. @Lalit Raghuvanshi

    You are right. I have added. It takes no time.

    ReplyDelete
  117. This is a great post to add number page navigation to blogger. i add this on my blog at www.ghior.com

    ReplyDelete
  118. Thanks you share with me this nice blog. your blog has a lot of important information. Keep it up..

    ReplyDelete
  119. it's amazing...
    i can choose my favourite page number for my blog now with easily.
    many thanks for this blog...

    ReplyDelete
  120. 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
  121. wow. i like it. its so easy. thanks for it and sharing..

    ReplyDelete
  122. It is usefull blog. I like it too. I share the free post tool to post RSS to blogger at:
    http://autoblogpost.trungdong.net/

    Happy blogger!

    ReplyDelete
  123. thank you so much for this, it worked.

    ReplyDelete
  124. Great Tute
    http://blogginganditinfo.blogspot.com/

    ReplyDelete
  125. it shows it only on the 1st page .. why !!?

    ReplyDelete
  126. I guess it just dont work on this template www.movie10k.blogspot.com its working only on the 1st page when i click to go on 2nd example it dos't show it so i cant click on it again to go back .. so pls if there is something that i shold do let me know.. thnx.

    ReplyDelete
    Replies
    1. Remove this code

      Now find [by pressing Ctrl + F ] this code in the template:

      <div class='blog-pager' id='blog-pager'>
      <b:if cond='data:newerPageUrl'>
      <span id='blog-pager-newer-link'>
      <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' title='Previous Product'>&#171; Prev Movie</a>
      </span>
      </b:if>

      <b:if cond='data:olderPageUrl'>
      <span id='blog-pager-older-link'>
      <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' title='Next Product'>Next Movie &#187;</a>
      </span>
      </b:if>
      <span id='home-link'>
      <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
      </span>
      <b:if cond='data:mobileLinkUrl'>
      <div class='blog-mobile-link'>
      <a expr:href='data:mobileLinkUrl'><data:mobileLinkMsg/></a>
      </div>
      </b:if>
      </div>
      <div class='clear'/>

      Delete
  127. thank you very much, im gonna add this on my blog.

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

    ReplyDelete
  129. Love your site man. Helped me in various moments for my blog. Thanks a lot.

    ReplyDelete
  130. LOVE YOU MAN REALLY YOUR SITE IS SO USEFULL FOR BEGINNERS I LIKE YOUR WORK FROM FOLLOWING YOU I UPDATED MY BLOG www.myownpcstuff.blogspot.com
    APPRECIATED YOUR WORK BRO THANKS..

    ReplyDelete
  131. wow amazing tutorial, thanks bro.. gbu :)

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

    ReplyDelete
  133. thanks ! really helped !
    http://windows4adu.blogspot.com/

    ReplyDelete
  134. Really Love your blog, I'll put one in my blog. Thanks

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

    ReplyDelete
  136. wow, this is simply amazing. I have such a numbered navigation one of my blogger blogs but I can sure tell you that this one beats mine. Thanks for sharing this cool tip, you rock. Moreover, I love your blog SEO and SERP.

    ReplyDelete
  137. V. NICE VIST
    HABIBSOFTS.TK

    ReplyDelete
  138. It Helped Me Very Much. thanks.
    From: Movies for mobile

    ReplyDelete
  139. Very nice tutorial, well explained Sir...

    ReplyDelete
  140. It works.
    You deserved a thank you.

    ReplyDelete
  141. thank yew so much for this wonderful script see this
    http://www.leadsquote.com/

    ReplyDelete
  142. Very helpful. Thank you so much

    ReplyDelete
  143. Thanks for share!




    -------------------
    [URL="http://taigamefree.vn"]Tai game[/URL]

    ReplyDelete
  144. This is a nice plug in, but it changes the posts per page to three where I opt two, otherwise works like a charm, nicely down best regards

    ReplyDelete
  145. the best and fast generator
    thanks
    looking nice on my blog
    but showing only on homepage not on all pages

    thanks
    www.blissnology.com

    ReplyDelete
  146. Nice blog here! Additionally your web site so much up very fast! What web host are you using? Can I am getting your affiliate hyperlink to your host? I wish my web site loaded up as fast as yours lolinformal sports

    ReplyDelete

 
Top