Stylish Numbered Page Navigation Widget with Colored Styles For Blogger

February 10, 2011   /   Posted by in Blogger Hacks, Blogger Widgets 99 Comments
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

Generate Widget

Styling Credits to ishuspace.com, PageNavi Script by Abu Farhan.
Article written by

I am started my career with Blogger, and now grown as PHP and WordPress Developer. I love playing with Blogger and WordPress.

Do you Like this Article?

rss twitter facebook
Get Subscribe to Free Email Updates!!
*Your email address will not be shared with anyone.
←
→

99 Comments on “Stylish Numbered Page Navigation Widget with Colored Styles For Blogger” Add Comment

1 2
  1. avatar

    Paul santosh July 22, 2011 11:24 am #

    Wow!! this is awesome! I've tried many pagenavi's and finally googled it! and I got this, I thought it wouldn't work but, it's working 100%
    Thank YOu………..!!!!!

  2. avatar

    A 2 Z Vegetarian Cuisine July 23, 2011 1:24 am #

    Harish, I tried it several times in my blog but its not working, can you please help??

    Muskaan
    http://a2zvegetariancuisine.blogspot.com

  3. avatar

    Harish July 23, 2011 8:14 am #

    @A 2 Z Vegetarian Cuisine

    the problem on your side,
    your template CSS not coded well and you already have a Page Navigation plugin.

  4. avatar

    20blogg July 29, 2011 8:47 pm #

    Its Easy as 123, thanks… I just want to hi-light one issue with script.. when you set number of navigation 9 it show exactly 9 but when you select 10 it shows 11…just wondering if you could improve the script my removing this issue..

    secondly would be a great help to blogger community if you could also make this widget
    www (dot) designchemical ( dot )com/lab/demo-wordpress-jquery-vertical-mega-menu-plugin.html
    as easy as it this one.
    source code can be found here
    www ( dot ) designchemical ( dot ) com/lab/jquery-mega-drop-down-menu-plugin/getting-started/

    thanks
    http://filimia.blogspot.com

  5. avatar

    WHILYN August 5, 2011 2:59 am #

    I don't know why this is not working for me. :(

  6. avatar

    hamzan August 7, 2011 2:42 am #

    100% cool

  7. avatar

    Paul santosh August 16, 2011 12:27 pm #

    I've a small problem, I'm upgrading the Minimal Template provided by blogger(blogger.com > Design > Select Layout Template > Minima)
    And now when I try to add any numbered page navigation it doesn't work, It also removes the Home & Older Posts Links. Please give me the solution as soon as possible!

  8. avatar

    Admin August 19, 2011 11:54 pm #

    Admin !!!!!

    You Rocks.

    Nice Widget.

    You are Great.

  9. avatar

    കാഴ്ചക്കാരന്‍ /BIPIN August 27, 2011 8:49 am #

    Very helpful ur tricks

  10. avatar

    dorina August 27, 2011 5:36 pm #

    It works and is really easy to install…

  11. avatar

    BP - Administrator August 28, 2011 8:48 am #

    Hey, I tried this and it worked without a problem, but since my blog is in Croatian, is there a way to edit "Page 1 of 6" to my language like this "Stranica 1 od 6"?

    Thank you!

  12. avatar

    BP - Administrator August 28, 2011 8:50 am #

    Hey, this worked for my blog but, since my site is on Croatian, is there a way to edit "Page 1 of 6" to something like "Stranica 1 od 6"?

    Thanks!

  13. avatar

    Webrank September 3, 2011 7:46 pm #

    not working for me.does not show a thing.help me out, i can send you my template if you want.

    my blog is http://bloggeranalytics.blogspot.com

  14. avatar

    Shakil Wahid September 5, 2011 9:04 am #

    Very useful post! It helped me very much. Thanks for helping. And its working nicely on my blog http://for-tech-lovers.blogspot.com/

  15. avatar

    SAIFULLAH KHAN September 8, 2011 3:57 am #

    GREAT BRO ITS WOUNDERFULL I LIKE THAT THANKS THANKS THANKS THANKS AND SOOOOOOOOOOOOOOOOOOOOOOO MORE THANKS

  16. avatar

    anime September 18, 2011 2:15 pm #

    why ? i see page 1 of 1 please explaine it to me
    thanks a lot

  17. avatar

    Tarbut Slaughter September 21, 2011 10:38 am #

    Thank you……….

  18. avatar

    Oluvil Campus Blog September 23, 2011 4:14 am #

    nice post i have added your page element.thanx

  19. avatar

    CyberMales September 26, 2011 11:47 am #

    Why not work in my blog template..??, please :
    http://aspal-putih.blogspot.com…thanks

  20. avatar

    Seo Analyst September 30, 2011 9:51 am #

    Hi Harish,
    wonderful blog…nice tips and tricks…really awesome.

    Can u plz check my blog once http://myexp2011.blogspot.com

    …numbered page navigation is not working…plz tell me where i need to modify.

  21. avatar

    Harish September 30, 2011 2:55 pm #

    @Seo Analyst
    your custom template does not have page navigation links(older,newer,home).
    change template and try once again.

    Thank You all :D

  22. avatar

    Abhishek singh October 5, 2011 9:20 pm #

    plzz check my blog to
    http://probloggertutorials.blogspot.com/

  23. avatar

    Harvinder Saraswat October 14, 2011 3:43 pm #

    Its not working on my blog, would you pls check it at http://counsellinginfo.blogspot.com/ , thanks for the help, love your blog, learnt a lot here.

  24. avatar

    sajjad ahmad October 17, 2011 3:23 am #

    very nice !!!

  25. avatar

    Rodrigo Burgos Z. October 26, 2011 11:01 am #

    Please, how can i change the words: "page" 1 "of" 5?.
    Thank you for your usefull gadgets.

  26. avatar

    Bonny November 8, 2011 12:40 pm #

    How can I remove this widget? My pages are not right.

  27. avatar

    Safeer Ahmed November 12, 2011 4:15 pm #

    thanks for this :)
    but its not working for my other label pages.
    http://livetvstreamingpakistanichannels.blogspot.com

  28. avatar

    Erique November 12, 2011 4:20 pm #

    Thank you for the Info @ Harish
    आप माइन्‍डब्‍लोइंग हो

  29. avatar

    leila | REIS November 18, 2011 2:38 pm #

    Thank You.. Its amazing!

  30. avatar

    Myo Ko Ko Win December 3, 2011 9:21 pm #

    Its working on first page only. When i click on other label, its not working anymore :(

  31. avatar

    මාටියා December 12, 2011 1:51 pm #

    how can i remove it?????

  32. avatar

    Eko Noeg December 22, 2011 5:52 am #

    Very simple and easy…works for my blog result…thanks

  33. avatar

    WTF Tube December 23, 2011 10:08 pm #

    It doesnt work on our site – HELP needed :)

    Site: www.wtf-tube.com

  34. avatar

    WTF Tube December 24, 2011 4:14 am #

    Finally i made it work – but now its just working on the first page.

    (cant go back to page 1 if im on 2)

    PLEASE help ! i would really appreciate

    site : www.wtf-tube.com

  35. avatar

    Hayk December 27, 2011 7:12 pm #

    thanks

  36. avatar

    krishnamraju December 28, 2011 1:23 pm #

    hay… super yah! Very cool script….. Perfect

  37. avatar

    dbestlists January 11, 2012 11:39 pm #

    Nice tutorial… but where is the demo?
    Maybe you can add it.

    Thx

  38. avatar

    askfriends February 2, 2012 4:04 pm #

    very nice, is there any way to remove copyright information “widget by abu farhan”?

  39. avatar

    jasmine February 3, 2012 12:41 pm #

    very nice, how to remove copyright information?

  40. avatar

    Waheed Mughal March 5, 2012 4:03 pm #

    Very helpful ur tricks

  41. avatar

    kun cheng March 9, 2012 9:09 am #

    it only shows on home page.is it possible to show it on posts?

  42. avatar

    Jonty March 18, 2012 10:34 am #

    I am not getting this code properly work on my blog , http://www.hubberspot.com/ …. Please help …. Harish ….

  43. avatar

    Fluffy Nails (Lilene) March 21, 2012 2:15 pm #

    Hello,
    Thanks a lot for sharing this awesome widget! I’ve been googling a while for an easy-to-install page navigation widget, which didn’t involve many copy/paste, and this one was perfect for me! It worked fine for my blog about nail art: fluffynails.blogspot.com
    Thank you so much!!!! :-)

  44. avatar

    Shahid April 29, 2012 4:52 pm #

    Hi Harsih im following your tips regularly.. im not any blog designer but following your tips made me sum.. u can check out my work @ www.EightyBerry.com … ive the problem and i dont think there is any1 better then u, who can solve it… the issue is im using page navigation, not urs, found thru google.com.. now the issue is, it has limitation of 500 Post’s/ 100 Page’s and not showing above 500 post’s i tried ur pagination but it dosent have few things like ‘First Page’ /’Last Page’ and i dont no how to change the css in ur pagination as im using… i request u to help me in solving this issue…

    Thanks
    Shahid

  45. avatar

    Hassan Raza July 11, 2012 8:01 pm #

    How to remove this Navigation.it is creating trouble it shows all the post on the home page

  46. avatar

    Yusril July 15, 2012 7:51 am #

    wow… great tutorial…., I like it…., this work… for new my blog… (http://plustutorial.blogspot.com/)
    thanks very munch….

  47. avatar

    ASad August 7, 2012 12:35 am #

    please tell me how to remove this widget .!!!!!

    • avatar

      Harish August 7, 2012 12:20 pm #

      You added as HTML/JavaScript widget. so go to Layout and find the un named widget. remove it.

  48. avatar

    AXA December 19, 2012 9:36 pm #

    Not showing anymore…

    1 2
    ←
    →
    © 2014 Way2blogging. Designed by +Harish, Powered by WordPress