Add Number Page Navigation to Blogger Blogspot

Site Navigation widget is the must need of every blogger blog. We observe that different blogger templates possess different varieties of page numbering nav bar. It generally appeared below in all of the posts around the home page of a blog. This specialised widget helps jumping for you to previous posts of a blog or looking towards newer content by an individual click. However you may have noticed in which some professional blogger utilizing numbering pagination widget together with newer and older posts. This will turn you blog design to professional looks and it will helps for you to jump simply from any page to another page. So today I am going to share a tutorial to add number page navigation to Blogger blog.

How to Add Number Navigation?

Just follow the below simple steps to add this widget in your blog. Please follow all the steps carefully to add this widget in blog. Let go how to add this numbering widget in blogger blog.

Step1:

1. Go to blogger Dashboard:


2. Go to template>>Edit/Html:


3. Now find for the below code:



4. <b:includable id='mobile-index-post' var='post'>



5. Now paste the below given code before the above line:



6.     <b:includable id='page-navi'>
       <div class='pagenavi'>
       <script type='text/javascript'>
       var pageNaviConf = {
       perPage: 7,numPages: 5,firstText: &quot;First&quot;,
       lastText: &quot;Last&quot;,
       nextText: &quot;&#187;&quot;,
       prevText: &quot;&#171;&quot;
       }
       </script>
   
       <script type="text/javascript" src="https://www.googledrive.com/host/0B2ww3WS8P1MJYUpZd21XNXBYYW8"></script>
       <div class='clear'/>
       </div>
       </b:includable>

Step2: 

1. Now find for this code



2. <b:include name='nextprev'/>



3. Now Replace the above code with the below given code:



4. <b:if cond='data:blog.pageType == &quot;index&quot;'>
       <b:include name='page-navi'/>
       <b:else/>
       <b:if cond='data:blog.pageType == &quot;archive&quot;'>
       <b:include name='page-navi'/>
       </b:if>
       <b:else/>
       <b:if cond='data:blog.pageType == &quot;item&quot;'>
       <b:include name='nextprev'/>
       </b:if>
       </b:if>

Step3:

1. Now find for ]]></b:skin>  tag


2. Now copy the below given code and past before ]]></b:skin> >> See the screenshot

Now paste the below code as shown in the screenshots:

    #blog-pager, .pagenavi {
         clear: both;
         text-align: center;
         margin: 30px auto 10px;
    }
    #blog-pager a, .pagenavi span, .pagenavi a {
         margin: 0 5px 0 0;
         padding: 2px 10px 3px;
         text-decoration: none;
         color: #fff;
         background: #2973FC;
         -moz-border-radius: 2px;
         -khtml-border-radius: 2px;
         -webkit-border-radius: 2px;
         border-radius: 2px;
    -webkit-transition: all .3s ease-in;
    -moz-transition: all .3s ease-in;
    -o-transition: all .3s ease-in;
    transition: all .3s ease-in;
    }
    #blog-pager a:visited, .pagenavi a:visited {
         color: #fff;
    }
    #blog-pager a:hover, .pagenavi a:hover {
         color: #fff;
         text-decoration: none;
         background: #000;
    }
    #blog-pager-older-link, #blog-pager-newer-link {
         float: none;
    }
    .pagenavi .current {
         color: #fff;
         text-decoration: none;
         background: #000;
    }
    .pagenavi .pages, .pagenavi .current {
         font-weight: bold;
    }
    .pagenavi .pages {
         color: #fff;
         background: #2973FC;
    }

Now Click On Save Button And you have Done!

Final Words:

It's the time to look back at your blog and see the changes made to your blog. This widget surely attract your visitors to look at more pages by clicking on these navigation buttons. Now It's your turn to share this post with your friends and write your views in comment box till then Peace, Blessings and Happy Numbering.