Blogger Page Navigation Hack for colorful Numbering

Page Navigation hack for blogger is really awesome trick to stylish the older post and newer post link with attractive page number buttons.
You can easily get the Page Navigation Hack trick in the web. Almost all the sites provide the same style of page numbering. I would like to share some of the CSS design which will really change the style of your Page Navigation. To add these styles. Just replace the CSS of the Page Navigation with the CSS available here. You can select the style with the preview. This style includes Gradient effect without any image and has round cornered edges which give more effect to the button.


The Default Buttons look like this.






  1. /* www.techirsh.com */  
  2. .showpageArea {font-weightbold;margin:5px;}  
  3. .showpageArea a {text-decoration:underline;color#fff;}  
  4. .showpageNum a, .showpage a {text-decoration:none;border:1px solid #999;-webkit-border-radius:3px;-moz-border-radius:3px;  
  5. margin:0 3px;padding:3px 5px;  
  6. background#9dd53a/* old browsers */  
  7. background: -moz-linear-gradient(top#9dd53a 0%#a1d54f 50%#80c217 51%#7cbc0a 100%); /* firefox */  
  8. background: -webkit-gradient(linear, left topleft bottom,  
  9. color-stop(0%,#9dd53a), color-stop(50%,#a1d54f), color-stop(51%,#80c217),  
  10. color-stop(100%,#7cbc0a)); /* webkit */  
  11. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9dd53a',  
  12. endColorstr='#7cbc0a',GradientType=0 ); /* ie */  
  13. }  
  14. .showpageNum a:hover, .showpage a:hover {border1px solid #ccc;  
  15. background#6db3f2/* old browsers */  
  16. background: -moz-linear-gradient(top#6db3f2 0%#54a3ee 50%#3690f0 51%#1e69de 100%); /* firefox */  
  17. background: -webkit-gradient(linear, left topleft bottom, color-stop(0%,#6db3f2),  
  18. color-stop(50%,#54a3ee), color-stop(51%,#3690f0),  
  19. color-stop(100%,#1e69de)); /* webkit */  
  20. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6db3f2',  
  21. endColorstr='#1e69de',GradientType=0 ); /* ie */  
  22. }  
  23. .showpagePoint {color#aaaaaa;text-decoration:none;border:1px solid #999;-webkit-border-radius:3px;-moz-border-radius:3px;  
  24. margin:0 3px;padding:3px 5px;  
  25. background#e2e2e2/* old browsers */  
  26. background: -moz-linear-gradient(top#e2e2e2 0%, #dbdbdb 50%#d1d1d1 51%, #fefefe 100%); /* firefox */  
  27. background: -webkit-gradient(linear, left topleft bottom, color-stop(0%,#e2e2e2), color-stop(50%,#dbdbdb), color-stop(51%,#d1d1d1),  
  28. color-stop(100%,#fefefe)); /* webkit */  
  29. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2e2e2',  
  30. endColorstr='#fefefe',GradientType=0 ); /* ie */  
  31. }  
  32. .showpageOf {text-decoration:none;padding:3px;margin0 3px 0 0;}  
  33. .showpageNum a:link,.showpage a:link {text-decoration:none;color:#fff;}  




  1. /* www.techirsh.com */  
  2. .showpageArea {font-weightbold;margin:5px;}  
  3. .showpageArea a {text-decoration:underline;color#fff;}  
  4. .showpageNum a, .showpage a {text-decoration:none;border:1px solid #999;-webkit-border-radius:3px;-moz-border-radius:3px;  
  5. margin:0 3px;padding:3px 5px;  
  6. background#789EB1/* old browsers */  
  7. background: -moz-linear-gradient(top#789EB1 0%, #618FA7 100%); /* firefox */  
  8. background: -webkit-gradient(linear, left topleft bottom, color-stop(0%,#789EB1),  
  9. color-stop(100%,#618FA7)); /* webkit */  
  10. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#789EB1',  
  11. endColorstr='#618FA7',GradientType=0 ); /* ie */  
  12. }  
  13. .showpageNum a:hover, .showpage a:hover {border1px solid #ccc;  
  14. background#7d7e7d/* old browsers */  
  15. background: -moz-linear-gradient(top#7d7e7d 0%#6B6B6B 100%); /* firefox */  
  16. background: -webkit-gradient(linear, left topleft bottom, color-stop(0%,#7d7e7d),  
  17. color-stop(100%,#6B6B6B)); /* webkit */  
  18. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7d7e7d',  
  19. endColorstr='#6B6B6B',GradientType=0 ); /* ie */  
  20. }  
  21. .showpagePoint {color#aaaaaa;text-decoration:none;border:1px solid #999;-webkit-border-radius:3px;-moz-border-radius:3px;  
  22. margin:0 3px;padding:3px 5px;  
  23. background#e2e2e2/* old browsers */  
  24. background: -moz-linear-gradient(top#e2e2e2 0%, #dbdbdb 50%#d1d1d1 51%, #fefefe 100%); /* firefox */  
  25. background: -webkit-gradient(linear, left topleft bottom, color-stop(0%,#e2e2e2), color-stop(50%,#dbdbdb), color-stop(51%,#d1d1d1),  
  26. color-stop(100%,#fefefe)); /* webkit */  
  27. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2e2e2',  
  28. endColorstr='#fefefe',GradientType=0 ); /* ie */  
  29. }  
  30. .showpageOf {text-decoration:none;padding:3px;margin0 3px 0 0;}  
  31. .showpageNum a:link,.showpage a:link {text-decoration:none;color:#fff;}  




  1. /* www.techirsh.com*/  
  2. .showpageArea {font-weightbold;margin:5px;}  
  3. .showpageArea a {text-decoration:underline;color#fff;}  
  4. .showpageNum a, .showpage a {text-decoration:none;border:1px solid #999;-webkit-border-radius:3px;-moz-border-radius:3px;  
  5. margin:0 3px;padding:3px 5px;  
  6. background#f85032/* old browsers */  
  7. background: -moz-linear-gradient(top#f85032 0%, #f16f5c 50%#f6290c 51%#f02f17 71%#e73827 100%); /* firefox */  
  8. background: -webkit-gradient(linear, left topleft bottom, color-stop(0%,#f85032), color-stop(50%,#f16f5c),  
  9. color-stop(51%,#f6290c), color-stop(71%,#f02f17),  
  10. color-stop(100%,#e73827)); /* webkit */  
  11. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f85032',  
  12. endColorstr='#e73827',GradientType=0 ); /* ie */  
  13. }  
  14. .showpageNum a:hover, .showpage a:hover {border1px solid #ccc;  
  15. background#aebcbf/* old browsers */  
  16. background: -moz-linear-gradient(top#aebcbf 0%#6e7774 50%#0a0e0a 51%#0a0809 100%); /* firefox */  
  17. background: -webkit-gradient(linear, left topleft bottom, color-stop(0%,#aebcbf), color-stop(50%,#6e7774), color-stop(51%,#0a0e0a),  
  18. color-stop(100%,#0a0809)); /* webkit */  
  19. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#aebcbf',  
  20. endColorstr='#0a0809',GradientType=0 ); /* ie */  
  21. }  
  22. .showpagePoint {color#aaaaaa;text-decoration:none;border:1px solid #999;-webkit-border-radius:3px;-moz-border-radius:3px;  
  23. margin:0 3px;padding:3px 5px;  
  24. background#e2e2e2/* old browsers */  
  25. background: -moz-linear-gradient(top#e2e2e2 0%, #dbdbdb 50%#d1d1d1 51%, #fefefe 100%); /* firefox */  
  26. background: -webkit-gradient(linear, left topleft bottom, color-stop(0%,#e2e2e2), color-stop(50%,#dbdbdb), color-stop(51%,#d1d1d1),  
  27. color-stop(100%,#fefefe)); /* webkit */  
  28. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2e2e2',  
  29. endColorstr='#fefefe',GradientType=0 ); /* ie */  
  30. }  
  31. .showpageOf {text-decoration:none;padding:3px;margin0 3px 0 0;}  
  32. .showpageNum a:link,.showpage a:link {text-decoration:none;color:#fff;}  




  1. /* www.techirsh.com */  
  2. .showpageArea {font-weightbold;margin:5px;}  
  3. .showpageArea a {text-decoration:underline;color#fff;}  
  4. .showpageNum a, .showpage a {text-decoration:none;border:1px solid #999;-webkit-border-radius:3px;-moz-border-radius:3px;  
  5. margin:0 3px;padding:3px 5px;  
  6. background#ffb76b/* old browsers */  
  7. background: -moz-linear-gradient(top#ffb76b 0%#ffa73d 50%#ff7c00 51%#ff7f04 100%); /* firefox */  
  8. background: -webkit-gradient(linear, left topleft bottom, color-stop(0%,#ffb76b), color-stop(50%,#ffa73d), color-stop(51%,#ff7c00),  
  9. color-stop(100%,#ff7f04)); /* webkit */  
  10. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffb76b',  
  11. endColorstr='#ff7f04',GradientType=0 ); /* ie */  
  12. }  
  13. .showpageNum a:hover, .showpage a:hover {border1px solid #ccc;  
  14. background#9dd53a/* old browsers */  
  15. background: -moz-linear-gradient(top#9dd53a 0%#a1d54f 50%#80c217 51%#7cbc0a 100%); /* firefox */  
  16. background: -webkit-gradient(linear, left topleft bottom, color-stop(0%,#9dd53a), color-stop(50%,#a1d54f), color-stop(51%,#80c217),  
  17. color-stop(100%,#7cbc0a)); /* webkit */  
  18. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9dd53a',  
  19. endColorstr='#7cbc0a',GradientType=0 ); /* ie */  
  20. }  
  21. .showpagePoint {color#aaaaaa;text-decoration:none;border:1px solid #999;-webkit-border-radius:3px;-moz-border-radius:3px;  
  22. margin:0 3px;padding:3px 5px;  
  23. background#e2e2e2/* old browsers */  
  24. background: -moz-linear-gradient(top#e2e2e2 0%, #dbdbdb 50%#d1d1d1 51%, #fefefe 100%); /* firefox */  
  25. background: -webkit-gradient(linear, left topleft bottom, color-stop(0%,#e2e2e2), color-stop(50%,#dbdbdb), color-stop(51%,#d1d1d1),  
  26. color-stop(100%,#fefefe)); /* webkit */  
  27. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2e2e2',  
  28. endColorstr='#fefefe',GradientType=0 ); /* ie */  
  29. }  
  30. .showpageOf {text-decoration:none;padding:3px;margin0 3px 0 0;}  
  31. .showpageNum a:link,.showpage a:link {text-decoration:none;color:#fff;}  




  1. /* www.techirsh.com */  
  2. .showpageArea {font-weightbold;margin:5px;}  
  3. .showpageArea a {text-decoration:underline;color#fff;}  
  4. .showpageNum a, .showpage a {text-decoration:none;border:1px solid #999;-webkit-border-radius:3px;-moz-border-radius:3px;  
  5. margin:0 3px;padding:3px 5px;  
  6. background#3b679e/* old browsers */  
  7. background: -moz-linear-gradient(top#3b679e 0%#2b88d9 50%, #207cca 51%#7db9e8 100%); /* firefox */  
  8. background: -webkit-gradient(linear, left topleft bottom, color-stop(0%,#3b679e), color-stop(50%,#2b88d9), color-stop(51%,#207cca),  
  9. color-stop(100%,#7db9e8)); /* webkit */  
  10. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3b679e',  
  11. endColorstr='#7db9e8',GradientType=0 ); /* ie */  
  12. }  
  13. .showpageNum a:hover, .showpage a:hover {border1px solid #ccc;  
  14. background#aebcbf/* old browsers */  
  15. background: -moz-linear-gradient(top#aebcbf 0%#6e7774 50%#0a0e0a 51%#0a0809 100%); /* firefox */  
  16. background: -webkit-gradient(linear, left topleft bottom, color-stop(0%,#aebcbf), color-stop(50%,#6e7774), color-stop(51%,#0a0e0a),  
  17. color-stop(100%,#0a0809)); /* webkit */  
  18. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#aebcbf',  
  19. endColorstr='#0a0809',GradientType=0 ); /* ie */  
  20. }  
  21. .showpagePoint {color#aaaaaa;text-decoration:none;border:1px solid #999;-webkit-border-radius:3px;-moz-border-radius:3px;  
  22. margin:0 3px;padding:3px 5px;  
  23. background#e2e2e2/* old browsers */  
  24. background: -moz-linear-gradient(top#e2e2e2 0%, #dbdbdb 50%#d1d1d1 51%, #fefefe 100%); /* firefox */  
  25. background: -webkit-gradient(linear, left topleft bottom, color-stop(0%,#e2e2e2), color-stop(50%,#dbdbdb), color-stop(51%,#d1d1d1),  
  26. color-stop(100%,#fefefe)); /* webkit */  
  27. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2e2e2',  
  28. endColorstr='#fefefe',GradientType=0 ); /* ie */  
  29. }  
  30. .showpageOf {text-decoration:none;padding:3px;margin0 3px 0 0;}  
  31. .showpageNum a:link,.showpage a:link {text-decoration:none;color:#fff;}  

6 comments:

  1. Hi, Can you tell me how it will work?
    Thank!

    ReplyDelete
  2. Google the word "page Navigation for blogger" and apply the codes then replace its css code with any of the codes here

    ReplyDelete
  3. hey can you make page number just like labnol dot org.

    i m very much in such kind of numbers

    ReplyDelete
  4. agree with you.. labnol dot org like numerical pagination is very attractive. plz help with the code

    ReplyDelete
  5. thanx info nya bos...
    visit to my blog yah...

    ReplyDelete
  6. For those of you who are thinking... the example images dont look like a possibility without using images, you are right if you are using IE. The displayed examples are from Firefox or Chrome. The buttons, although good looking, look fairly plain in IE.

    ReplyDelete