How to Add Numbered Navigation Page Widget to Blogger

By default blogger navigation shows "Newer Posts" and "Older Posts" links in homepage, this default navigation is not much attractive and user friendly. In order to make navigation easily and attractive you can use Numbered Page Navigation System. The main advantage of this system is that the visitors can easily navigate to any page without wasting their time. You might have seen many Navigation Systems with their different styles. However the latest templates comes with this Navigation System but some old templates we have to install it. So, here designed a simple and attractive navigation system for you and bellow in this few steps will show you that How to Add Numbered Page Navigation Widget to Blogger.

Look for Page navigation

How to Add Numbered Page Navigation Widget to Blogger

Step 1. Log in to your Blogger Account

Step 2. Select your Blog and Go to Template >> Edit HTML and Search (Ctrl + F) for the following tag

]]></b:skin>

Step 3. Copy and Paste the following piece of code just above/before it

#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;border:4px solid #000;}

.displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#666666;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);}

Step 4. Now find (Ctrl + F) this tag

</body>

Step 5. And add the following script just above/before it

<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=6;

    var numPages=6;

    var prevText ='◄';

    var nextText ='►';

    var urlactivepage=location.href;

    var home_page="/";

  /*]]>*/

</script>

  <script src='https://googledrive.com/host/0B43vwjPtKakCYW43X0V3LTM0ZGs'/>

</b:if>

</b:if>

Modification for Code above:

var perPage=6; No. of posts to show perPage

var numPages=6; No. of pages to show in Navigation

var prevText ='◄'; Text to show for Previous Page button

var nextText ='►'; Text to show for Next Page button

Step 6. Press the Save Template button

And  now you're done.

---------------------------done-------------------------------