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

400 comments:

  1. Thank you so much. Let me share your post.

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

    ReplyDelete
  3. 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
  4. i have no words to say tanks to you but
    a very small word for u THANKS.

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

    ReplyDelete
  6. 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
  7. thanks 4 ur share. very nice. im added 1 on my blog.

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

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

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

    ReplyDelete
  12. 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
  13. buna ma poti ajuta cum sa fac si eu widget pentru blogu meu

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

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

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

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

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

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

    www.getalltricks.in

    ReplyDelete
  20. 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
  21. YOU ARE GREAT. THANK YOUUUUUUUUUUUUU.

    ReplyDelete
  22. Nice blogger widget
    great share..

    www.kiosbabe.blogspot.com

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

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

    ReplyDelete
  25. thaaaaaaaaaaaannnnnnnnnnkkkkkssssssss yyyoooooooouuuuuu.............. LIKE

    ReplyDelete
  26. Thanks !!!

    www.noncamerasmartphones.blogspot.com

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

    demo: Best Music Cover

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

    ReplyDelete
  29. Thanks...
    works perfect!

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

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

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

    ReplyDelete
  33. Very helpful information. Thanks.

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

    ReplyDelete
  35. 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
  36. @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
  37. 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
  38. hey i tried it superve thanks www.andhragallery4u.blogspot.com

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

    ReplyDelete
  40. Thanks a lot !!!!

    www.noncamerasmartphones.com

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

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



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

    ReplyDelete
  44. Thanks a lot !!!

    www.noncamerasmartphones.com

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

    ReplyDelete
  46. 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
  47. 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
  48. I do accept as true with all of the ideas you have introduced to your post. They're very convincing and will certainly work. Still, the posts are too brief for starters. Could you please prolong them a bit from next time? Thank you for the post. Feel free to surf my web blog Install a new template in your blog

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

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

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

    ReplyDelete
  52. Thank You!!


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

    ReplyDelete
  53. thanks blog page warking

    http//:ramzankhan.blogspot.com/

    ReplyDelete
  54. Awesome thanks a lot ..
    Great tool

    www.newstelecom.info

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

    ReplyDelete
  56. 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
  57. Great !
    thnaks alot... i just implemented this on my blog successfully
    Junaid


    http://paradigmwisdom.blogspot.com/

    ReplyDelete
  58. 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
  59. Work From home, Part time Online Jobs From home on without Invesment
    www.jobzcorner.com

    ReplyDelete
  60. Latest Cars Wallpapers with info, Top Most Expensive Cars with hot photos.
    worldlatestvehicles.blogspot.com

    ReplyDelete
  61. Free Bollywood hot News, Bollywood Top Hot Actress and Hot Desi Girls Beautiful hot Pictures.
    hotentertainnews.blogspot.com

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

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

    ReplyDelete
  64. 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
  65. Hey this is cool thanks for the widget~!
    mybloggertopic

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

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

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

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

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

    ReplyDelete
  71. 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
  72. nice look on my blog
    http://fullsoftbd.blogspot.com

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

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

    ReplyDelete
  75. Best Investment Plans which you can make money from home without any work
    www.jobzcorner.com

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

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

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

    ReplyDelete
  79. 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
  80. VERY NICE KNOW FOR BETTER VISIT MY BLOG: WWW.TUNEIT.TK

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

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

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

    ReplyDelete
  84. 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
  85. very effective codes. thanks admin...

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

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

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

    ReplyDelete
  89. 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
  90. Thanks so much Dear

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

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

    if u wana download high quality games then visit my blog

    Faboulousgames.blogspot.com

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

    ReplyDelete
  94. HI

    Thank you for Goog Widget

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

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

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

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

    ReplyDelete
  99. 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
  100. All that we are is the consequence of what we have estimation. Wait… Has anyone exhorted dissertation for you. Keep the articles progressing !heathrow to w2 | minicab in w2

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

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

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

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

    ReplyDelete
  105. Nice and Awesome post Thanks
    My Blog:
    School of Blogging Providing with Blogger widgets, blogger tips, blogger tricks, help, hacks,Premium Blogger Templates and Blogger resources with great blogger tutorials also..

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

    ReplyDelete
  107. 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
  108. 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
  109. Thanks a lot man its works ...
    this is my blog bengeek, cooking, and I changed the style ..!!

    ReplyDelete
  110. 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
  111. Hi,

    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/


    -Harihara kumar

    ReplyDelete
  112. Nice Sharing Keep it up....

    Visit my Blog.. Click HeRe

    ReplyDelete


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

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

    ReplyDelete
  115. Your article helped me to understand the topic well and I would love to share this to my friends. I also love to
    Get Likes for your website
    Thank you for this and all the best.

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

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

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

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

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

    ReplyDelete
  121. Such an interesting and informative post..



    Mobile Applications

    ReplyDelete
  122. 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
  123. Thanks fоr sharing yοur thoughts on Surνivor Sеason 25 Eρisode.
    Load Systems

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

    ReplyDelete
  125. @Lalit Raghuvanshi

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

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

    ReplyDelete
  127. visit and follow me back :D
    http://wickedguts.blogspot.com

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

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

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

    ReplyDelete
  132. 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
  133. thank you so much for this, it worked.

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

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

    ReplyDelete
  136. 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
  137. thank you very much, im gonna add this on my blog.

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

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

    ReplyDelete
  140. 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
  141. wow amazing tutorial, thanks bro.. gbu :)

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

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

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

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

    ReplyDelete

 
Top