How to Add Paging Widget For Blogger

In this post we will provide you tips to add page navigation for your blogger blog. Blogger default navigation shows only Older Posts and Newer Posts, many blogger want to change this into numbered page navigation.

In this post We will discuss step by step the guide of how to add paging widget to replace the blogger old navigation. 

How to Add Paging Widget For Blogger

Follow the steps below  on How to Add Paging Widget For Blogger :

1. Log in into Blogger Dashboard
2. Go to Layout and click on Add a Gadget link.
3. Select HTML/JavaScript from list.
4. Copy and paste below code into box :

   <style type="text/css">
   #blog-pager {
     height: 28px;
     padding: 10px 0 0;
     overflow: hidden;
     text-align: center;
   }
   
   .showpageArea a {
     text-decoration: underline;
     font-size: 16px;
     text-align: center;
   }
   
   .showpageNum a {
     font-size: 16px;
     text-decoration: none;
     border: 1px solid #cccccc;
     margin: 0 5px;
     padding: 5px;
   }
   
   .showpageNum a:hover {
     border: 1px solid #cccccc;
     background-color: #cccccc;
   }
   
   .showpagePoint {
     font-size: 16px;
     text-decoration: none;
     border: 1px solid #cccccc;
     background: #216FD9;
     margin: 0 5px;
     padding: 5px;
     color: #ffffff;
   }
   
   .showpageOf {
     text-decoration: none;
     padding: 5px;
     margin: 0 5px;
   }
   
   .showpage a {
     text-decoration: none;
     border: 1px solid #cccccc;
     padding: 5px;
   }
   
   .showpage a:hover {
     text-decoration: none;
     background: #cccccc;
   }
   
   .showpageNum a:link,.showpage a:link {
     text-decoration: none;
     color: #333333;
   }</style>
   <script>
       var pageCount = 7;
       var displayPageNum = 5;
       var upPageWord = "Previous";
       var downPageWord = "Next";
   </script>
   <a href="http://www.haakblog.com/" style="font-size: 0pt;">Blogger Widgets</a>
   <script src="http://netoopscodes.googlecode.com/svn/netoops-page-nav-v2.js"></script>
   
   

5. You can changed number of page count with replace 3 as your required and for change display of page number change 5 as your requirement.
6. Click on Save Button.
7. In layout arranged this widget to below blog post widget.