How to add page numbered navigation widget in blogger - FindersAdda : Tutorials of Make Money, Computer or Internet

Wednesday, 8 November 2017

How to add page numbered navigation widget in blogger


Hello Friends! How are You? I hope, you will be good. Today, I am present once again with a new post. 

In this article, I am going to share that how to add page numbered navigation widget in blogger and why we should add page number navigation widget in blog?


How to add page number navigation widget in blogger




What is Page numbered Navigation Widget?


Page number navigation widget is a widget which helps to add numbering of page in our blog. So that any person could read our old blog post by clicking page number and it also helps to go to specific page of blog.

Navigation page number is not available in too many blog template. That's why we have to add navigation page number widget, so that any person could go our specific blog post or blog page.

By adding navigation page number widget, you can give a beautiful look of your blog. If navigation page number is not available in your blog then add this widget quickly by reading this post.



How to add page number navigation widget in blog?


If you want to add page number navigation widget in your blog then read this post carefully and add navigation page number in your blog.

1) First of all, choose any one code which you want to add that means all code have different style.


first navigation

#blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px;}
 .blog-pager {background: none;}
 .displaypageNum a,.showpage a,.pagecurrent{padding: 3px 7px;margin-right:5px;background:#E9E9E9;color: #888;border:1px solid #E9E9E9;}
 .displaypageNum a:hover,.showpage a:hover,.pagecurrent{background:#CECECE;text-decoration:none;color: #000;}
 .showpageOf{display:none!important}
 #blog-pager .showpage, #blog-pager .pagecurrent{font-weight:bold;color: #888;}

 #blog-pager .pages{border:none;}


second navigation

#blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px; }
 .blog-pager {background: none;}
 .displaypageNum a,.showpage a,.pagecurrent{font-size: 13px;padding: 5px 12px;margin-right:5px; color: #3E5801; background-color:#E0EDC1;}
 .displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#FEF6DF;text-decoration:none;color: #E16800;}
 #blog-pager .pagecurrent{font-weight:bold;color: #D25E71;background:#FFDEDF;}
 .showpageOf{display:none!important}

#blog-pager .pages{border:none;}


Third Navigation

#blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px; }
 .blog-pager {background: none;}
 .displaypageNum a,.showpage a,.pagecurrent{font-size: 13px;padding: 5px 12px;margin-right:5px; color: #AD0B00; background-color:#FAB001;}
 .displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#DB4920;text-decoration:none;color: #fff;}
 #blog-pager .pagecurrent{font-weight:bold;color: #fff;background:#DB4920;}
 .showpageOf{display:none!important}

#blog-pager .pages{border:none;}


fourth navigation

 #blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px;}
 .blog-pager {background: none;}
 .displaypageNum a,.showpage a,.pagecurrent{padding: 5px 10px;margin-right:5px; color: #F4F4F4; background-color:#404042;-webkit-box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);-moz-box-shadow:0px 5px 3px -1px rgba(50, 50, 50, 0.53);box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);}
 .displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#EC8D04;text-decoration:none;color: #fff;}
 #blog-pager .showpage, #blog-pager, .pagecurrent{font-weight:bold;color: #000;}
 .showpageOf{display:none!important}

#blog-pager .pages{border:none;-webkit-box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);-moz-box-shadow:0px 5px 3px -1px rgba(50, 50, 50, 0.53);box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);}


fifth navigation

#blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px; }
 .blog-pager {background: none;}
 .displaypageNum a,.showpage a,.pagecurrent{font-size: 12px;padding: 5px 12px;margin-right:5px; color: #222; background-color:#eee; border: 1px solid #EEEEEE;}
 .displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#E5E5E5;text-decoration:none;color: #222;}
 #blog-pager .pagecurrent{font-weight:bold;color: #fff;background:#DB4920;}
 .showpageOf{display:none!important}

#blog-pager .pages{border:none;}




2) Now open your blogger blog and click on the Theme option in dashboard.


click on the Theme option


3) Now click on the Customize option and then click on the Advanced option.


click on the Advanced option

advanced then add css option



4) After that click on the Add CSS and paste the code in code box.


5) Then click on the Apply to Blog button which is available on the right corner.

6) Then again copy the below javascript code and go to your blogger tab and click on the Theme option then click on the Edit HTML option.



7) After that put the mouse cursor between code and press Ctrl + F and find </body> tag.

8) Paste the copied code before </body> tag.


9) Then click on the Save Theme option.



I hope you liked this post so much. If you loved this post, Then, share with your friends and also give some suggestion that what should i improve in this post. Thank You So Much...... 

About Author

SUMIT KUMAR GUPTA
SUMIT KUMAR GUPTA

Author & Editor

Myself Sumit Kumar Gupta & 21 year's old person. I am a programmer and blogger. I spend much more time on programming and blogging and helps other programmers and bloggers.

2 comments:

  1. Nice Info Sir... Best Of Luck... Keep Blogging

    ReplyDelete
    Replies
    1. Thank you for give valueable time on my blog. Please visit again

      Delete

We are eager to see your comments.
Comment Rule :

1. Don't use any link in the comment box. If you have any problem related to link then contact me with the contact form.

2. Don't use the wrong word if you write the wrong word in comment box then it will get spam.