How to add Numbered Page Navigation Widget for Blogger

By | 5th October 2016
16

Hi friends You can add this widget in just two easy steps:-

  1.                Adding the CSS
  2.               Adding the script
  1. Adding The CSS:-

Step 1. Go to Blogger Dashboard Template click on the Edit HTML button

Step 2. Click anywhere inside the code area and press the CTRL + F keys and find the  ]]></b:skin>  to open the Blogger search box.

Step 3. Now choose one of the following numbered page navigation styles and copy the code just below it. Just above paste the code of the style that you want to use:

            
            

12

 

 #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;}

 

13

 

 #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);}

 

14

 

 #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;}

 

16

 

#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;}

15

 

 #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;}

 

Now It’s Time to add Script Code:-

  1. Find (Ctrl + F)  </body>  tag in editor  window
  2. Add the following script:-

<b:if cond=’data:blog.pageType != &quot;item&quot;’>

 

<b:if cond=’data:blog.pageType != &quot;static_page&quot;’>

 

<script type=’text/javascript’>

 

  /*<![CDATA[*/

 

    var perPage=7;

    var numPages=6;

    var firstText =’First‘;

    var lastText =’Last‘;

    var prevText =’« Previous‘;

    var nextText =’Next »’;

    var urlactivepage=location.href;

    var home_page=”/”;

  /*]]>*/

</script>

  <script src=”http://helplogger.googlecode.com/svn/trunk/page-navigation2.js”/>

</b:if>

</b:if>

 

Now final Save your Page and look your blog you would be able to show your stylish navigation on your Blog.

Leave a Reply