How To Add Together Numbered Page Navigation Widget For Blogger
So this tutorial volition demo y'all how to add together numbered page navigation using Javascript to a Blogger/ blogspot blog. You tin select 1 of the seven available styles below.
![How to Add Numbered Page Navigation Widget for Blogger nosotros convey the pick to laid the issue of posts nosotros desire to display per page past times going to the How to Add Numbered Page Navigation Widget for Blogger](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwE-LQS-AP5AfJGtFpQZDKGLUFav1cgGo0hYFlyLZ7ALWMHVaqAeNEY3nu1Nov9U94TXqux6ZSY1RUsyvRPLI2Enxgbtrg2GDdrergCP7FNlM4nIs4sd6IdVOc-K2oJvEWpqrLpERrRu4Y/s1600/numbered-page-navigation-javascript-widget-for-blogger.png)
Adding Numbered Page Navigation to Blogger
You tin add together this widget inwards but 2 steps.- Adding The CSS.
- Adding The Script.
1. Adding The CSS
Step 1. Go to Blogger Dashboard > "Template" > click on the "Edit HTML" button:![How to Add Numbered Page Navigation Widget for Blogger nosotros convey the pick to laid the issue of posts nosotros desire to display per page past times going to the How to Add Numbered Page Navigation Widget for Blogger](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi75EoeUAzFKBlzOleUz8y8leYj08Suh1-C_m1f52ZS0OFSXii2Adsr_Mlx5iZC-Q-Hsp29bjhXMIXF3T7cc2BaUPdEr2rTASu3VRhaqvYTDpthW4eCPegppb1NpiKubrhXamu_iAarw1xd/s1600/blogger_blogspot_template_edit_html_tutorial.png)
Step 2. Click anywhere within the code expanse in addition to press the CTRL + F keys to opened upwardly the Blogger search box.
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjr9fp7YzBIhpRVAKKfy2capYxB-kJP20iw7z4mklSCKC-IMXN6THH3fmx343rMPtpEV06W9rqwSKEg3my_Pe8G4Ea3RgN13IykyuxAEYvFAP5w7RJ3JZpkeynokzUNTRczLozy3cjuT9bp/s1600/open-blogger-search-box-ctrl%252Bf.png)
... type or glue the next tag within the search box in addition to hitting Enter to respect it:
]]>Step 3. Now select 1 of the next numbered page navigation styles in addition to re-create the code but below it. Just inwards a higher identify ]]> glue the code of the means that y'all desire to use:
Numbered Page Navigation on Gray
![How to Add Numbered Page Navigation Widget for Blogger nosotros convey the pick to laid the issue of posts nosotros desire to display per page past times going to the How to Add Numbered Page Navigation Widget for Blogger](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWF2eKB5alEEUWXJXlY2_s7MkPuEt3mFI49FKMV3ynfM4MppnxdivrAWWWfwMtra5Y_txmJ0aA_RLjLVNJxxl0OqRPQbElpew9RWlq5AIS8DlLIfpWo9GwnR9iAnk3BbmrFNR8fnpjzBhS/s1600/page-navigation-widget-for-blogger-style-1.png)
#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 venture #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;}
Black Numbered Page Navigation With Orange Current Page
![How to Add Numbered Page Navigation Widget for Blogger nosotros convey the pick to laid the issue of posts nosotros desire to display per page past times going to the How to Add Numbered Page Navigation Widget for Blogger](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjY6iSvH09wfhzkcW_1-A3jl-mnc8ZzP5Y3hOyUoFgRuBT6zdg66Hx33_yoQsZOVeEQCwmr0E9jGIYPho8kXfeGXXiHKg1lHsrrwlBnWWdOAOyhrQEVb9TrulbYH2QBmxY3UPqhzQVZByQn/s1600/page-navigation-widget-for-blogger-style-2.png)
#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);}
Dark Numbered Page Navigation With Blue Current Page
![How to Add Numbered Page Navigation Widget for Blogger nosotros convey the pick to laid the issue of posts nosotros desire to display per page past times going to the How to Add Numbered Page Navigation Widget for Blogger](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3CKjp45SaOHziHcD_P_THiWFnmko9rjkekbEa3qWUX6DmyVximpDsLXoiZ_g5_ej5ydp2ga0UkhHgAUH_l9JS45h5vv1DZJPt8xM0obRDKP0FvAMvyNQfb6-NSRePs3aJ19TEB21k-S0a/s1600/page-navigation-widget-for-blogger-style-3.png)
#blog-pager{clear:both;margin:30px auto; padding: 7px; text-align:center;font-size: 11px;background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #000000),color-stop(1, #292929));background-image: -o-linear-gradient(top, #000000 0%, #292929 100%);background-image: -moz-linear-gradient(top, #000000 0%, #292929 100%);background-image: -webkit-linear-gradient(top, #000000 0%, #292929 100%);background-image: -ms-linear-gradient(top, #000000 0%, #292929 100%);background-image: linear-gradient(to top, #000000 0%, #292929 100%); padding: 6px;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;}
.blog-pager {background: none;}
.displaypageNum a,.showpage a,.pagecurrent{padding: 3px 10px;margin-right:5px; color: #fff;}
.displaypageNum a:hover,.showpage a:hover,.pagecurrent{background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #59A2CF),color-stop(1, #D9EAFF));background-image: -o-linear-gradient(top, #59A2CF 0%, #D9EAFF 100%);background-image: -moz-linear-gradient(top, #59A2CF 0%, #D9EAFF 100%);background-image: -webkit-linear-gradient(top, #59A2CF 0%, #D9EAFF 100%);background-image: -ms-linear-gradient(top, #59A2CF 0%, #D9EAFF 100%);background-image: linear-gradient(to top, #59A2CF 0%, #D9EAFF 100%);text-decoration: none;color: #000;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;}
.showpageOf{display:none!important}.blog-pager-older-link, .home-link, .blog-pager-newer-link {background: transparent;}
a.blog-pager-older-link, a.home-link, a.blog-pager-newer-link {color: #fff;}
#blog-pager .pages{border:none;background: none;}
Gray Page Navigation With Blue Page Number
![How to Add Numbered Page Navigation Widget for Blogger nosotros convey the pick to laid the issue of posts nosotros desire to display per page past times going to the How to Add Numbered Page Navigation Widget for Blogger](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSlI73f1wpvGBpUpvvx-DohksnavruAXiVx42kjPvO_bIZGuqQbrykGc27X9-WX1zyGOZIQZb6OSMB9sKVjlVJsmQtOpR-C2xvLpv6ndKScaeD6Gz0AzTpJ0SjHR3rveXYZ2T6tbczVGMT/s1600/numbered-page-navigation-javascript-widget-for-blogger-4.png)
#blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px;}
.blog-pager {background: none;}
.displaypageNum a,.showpage a,.pagecurrent{font-size: 14px;padding: 5px 12px;margin-right:5px; color: #666; background-color:#eee;}
.displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#359BED;text-decoration:none;color: #fff;}
#blog-pager .pagecurrent{font-weight:bold;color: #fff;background:#359BED;}
.showpageOf{display:none!important}
#blog-pager .pages{border:none;}
Blogger Pagination on Green alongside Orange in addition to Pink on Hover
![How to Add Numbered Page Navigation Widget for Blogger nosotros convey the pick to laid the issue of posts nosotros desire to display per page past times going to the How to Add Numbered Page Navigation Widget for Blogger](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-gf9Lizp4VKuXuWMwGWK9zk9ixJvpJnqg-RFYuq2fsRzcVYxEZ3rxHDWyATRcJvxMiXBI3sTzsfDq5tU4R08RF_E8kX0cwzCkMkFRMu_tGYC3D1DOwDDqoZPjk84moC74a-HIO0P6ld8-/s1600/numbered-page-navigation-javascript-widget-for-blogger-5.png)
#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;}
Orange Numbered Page Navigation Widget for Blogger
![How to Add Numbered Page Navigation Widget for Blogger nosotros convey the pick to laid the issue of posts nosotros desire to display per page past times going to the How to Add Numbered Page Navigation Widget for Blogger](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVfVsHZJtXTpls232Y_J0eyZuY3RWltcBWhizeZeDHhJVN6hwT5dgRhWIj3CwSugNbpj7RaGxeXMazC_AlRlmxJMUJT3s5WaO1Kj34NghrfqV5dTf-KE51QM8qhDo7DnkNe8USyQ8EQplk/s1600/numbered-page-navigation-javascript-widget-for-blogger-6.png)
#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;}
Grey Paged Navigation for Blogger alongside Red Current Page
![How to Add Numbered Page Navigation Widget for Blogger nosotros convey the pick to laid the issue of posts nosotros desire to display per page past times going to the How to Add Numbered Page Navigation Widget for Blogger](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhv2M1McqijreF4AFhUPHOAvdrolhrbpoMfVz6G1mLdGoPaqCyqo_Iu2DXVtNSVVJzZV4zgJfl_eiM_soKpro1JMoG247iiVx3NleYK52ezgEhlhyphenhyphenmfhxHUH70RbbgnQ2HFM7-8LonpnWWY/s1600/numbered-page-navigation-javascript-widget-for-blogger-7.png)
#blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px; }Note: if y'all desire to enshroud the "First" in addition to "Last" buttons add together this draw of piece of job below the CSS code:
.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 venture #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;}
.firstpage, .lastpage {display: none;}