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. I'm trying to change the navigation style.. Thanks for the tuts.

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

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

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

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

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

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

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

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

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

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

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

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

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

    www.getalltricks.in

    ReplyDelete
  18. 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
  19. Nice blogger widget
    great share..

    www.kiosbabe.blogspot.com

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

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

    ReplyDelete
  22. thaaaaaaaaaaaannnnnnnnnnkkkkkssssssss yyyoooooooouuuuuu.............. LIKE

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

    demo: Best Music Cover

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

    ReplyDelete
  25. Thanks...
    works perfect!

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

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

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

    ReplyDelete
  29. Very helpful information. Thanks.

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

    ReplyDelete
  31. 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
  32. @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
  33. 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
  34. hey i tried it superve thanks www.andhragallery4u.blogspot.com

    ReplyDelete
  35. Thanks a lot !!!!

    www.noncamerasmartphones.com

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

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



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

    ReplyDelete
  39. Thanks a lot !!!

    www.noncamerasmartphones.com

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

    ReplyDelete
  41. 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
  42. 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
  43. success!



    http://viecvat.info/index.php

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

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

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

    ReplyDelete
  47. Thank You!!


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

    ReplyDelete
  48. Awesome thanks a lot ..
    Great tool

    www.newstelecom.info

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

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


    http://paradigmwisdom.blogspot.com/

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

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

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

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

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

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

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

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

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

    ReplyDelete
  63. 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
  64. please update this for labels because this pages is only for home page i love your site this is very useful site

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

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

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

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

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

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

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

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

    ReplyDelete
  74. 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
  75. very effective codes. thanks admin...

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

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

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

    ReplyDelete
  79. 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
  80. Thanks so much Dear

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

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

    if u wana download high quality games then visit my blog

    Faboulousgames.blogspot.com

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

    ReplyDelete
  84. HI

    Thank you for Goog Widget

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

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

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

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

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

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

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

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

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

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

    ReplyDelete
  98. 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
  99. Nice Sharing Keep it up....

    Visit my Blog.. Click HeRe

    ReplyDelete


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

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

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

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

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

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

    ReplyDelete
  106. Such an interesting and informative post..



    Mobile Applications

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

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

    ReplyDelete
  110. @Lalit Raghuvanshi

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

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

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

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

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

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

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

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

    ReplyDelete
  120. thank you very much, im gonna add this on my blog.

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

    ReplyDelete
  122. 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'/>

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

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

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

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

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

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

    ReplyDelete
  130. 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
  131. V. NICE VIST
    HABIBSOFTS.TK

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

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

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

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

    ReplyDelete
  136. Very helpful. Thank you so much

    ReplyDelete
  137. Thanks for share!




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

    ReplyDelete
  138. 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
  139. 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
  140. 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
  141. Very helpful tutorial for all bloggers and me also. I am going to use it at my blog http://seotips4fresher.blogspot.in/.

    ReplyDelete
  142. Thank you so much. Let me share your post.
    Very nice tutorial, well explained Sir...

    ReplyDelete
  143. Thanks for sharing man its really awesome tutorial... i applied it on my blogs

    ReplyDelete
  144. More TIPS and TRICKS here

    http://21lexuz.blogspot.com/

    ReplyDelete
  145. Well , i am very thankful to you !
    such a nice widget ...
    and i installed it in my website !
    " - windows4adu.blogspot.com - "

    ReplyDelete
  146. Thanks
    Checkout my site www.ohgodfacts.blogspot.com

    ReplyDelete
  147. hi friends if you want language courses then visit at http://www.teamvisionconsultancy.co.in

    ReplyDelete
  148. Very nice tutorial, well explained Sir... love it

    ReplyDelete
  149. Thanx You So Much ...... www.limitedgame.blogspot.com

    ReplyDelete

 
Top