How to Add Numbered Page Navigation Widget to Blogger

Blogger default navigation shows "Newer Posts" and "Older Posts" links in our homepage, this default navigation is not so much attractive and user friendly. In order to make our navigation easy and attractive we use Numbered Page Navigation System. The main advantage of this system is that our 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, we have designed a simple and attractive navigation system for you and in this tutorial we'll show you that How to Add Numbered Page Navigation Widget to Blogger.

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 != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<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>

Customization:

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 you're done

From Editors Desk

We hope that this article helped you in adding a Numbered Page Navigation System to your blog. Share it with your friends and don't forget to subscribe us.