Don't Miss

How to Add Numbered Page Navigation Widget to Blogger

By Zohaib Liaqat - 3 Comments
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.
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 != &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>

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.

Tags:

3 comments to ''How to Add Numbered Page Navigation Widget to Blogger"

ADD COMMENT
  1. Thanks for nice sharing about add page number navigation widget. It is excellent post for add nice page navigation in blogger blog. I must use this post for my site.
    Thanks again.

    ReplyDelete