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

295 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. If any one wants some blogger tricks than visit http://blog-toolz.blogspot.in/

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

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

    ReplyDelete
  32. Very helpful information. Thanks.

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

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

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

    ReplyDelete
  39. Thanks a lot !!!!

    www.noncamerasmartphones.com

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

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



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

    ReplyDelete
  43. Thanks a lot !!!

    www.noncamerasmartphones.com

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

    ReplyDelete
  45. 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
  46. 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
  47. 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
  48. thanKX for sharing here is my blog www.livesportschannle.blogspot.com

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

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

    ReplyDelete
  51. Thank You!!


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

    ReplyDelete
  52. thanks blog page warking

    http//:ramzankhan.blogspot.com/

    ReplyDelete
  53. Awesome thanks a lot ..
    Great tool

    www.newstelecom.info

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

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


    http://paradigmwisdom.blogspot.com/

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

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

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

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

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

    ReplyDelete
  63. 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
  64. thanks gan sangat bermanfaat ternyata...he

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    ReplyDelete
  82. 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
  83. very effective codes. thanks admin...

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

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

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

    ReplyDelete
  87. 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
  88. this is really very informative post. thanks for sharing.

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

    if u wana download high quality games then visit my blog

    Faboulousgames.blogspot.com

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

    ReplyDelete
  91. HI

    Thank you for Goog Widget

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

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

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

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

    ReplyDelete
  96. 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
  97. 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
  98. Nice website
    For blogging tips and tricks, smile, laugh, story, jokes and many more visit this blog
    http://honney2bunny.blogspot.in

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

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

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

    ReplyDelete
  102. 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
  103. Well that is a quit good article you have right here that make some things easier to deal with thanks you .

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

    ReplyDelete
  107. 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
  108. 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
  109. Nice Sharing Keep it up....

    Visit my Blog.. Click HeRe

    ReplyDelete


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

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

    ReplyDelete
  112. 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
  113. applied this with a little modification...
    here it is www.droidchicken.com
    Pleaase see and comment

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

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

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

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

    ReplyDelete
  118. Such an interesting and informative post..



    Mobile Applications

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

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

    ReplyDelete
  122. @Lalit Raghuvanshi

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    ReplyDelete

 
Top