HOW TO ADD NUMBER PAGE NAVIGATION WIDGET IN BLOGGER

Page Navigation widget is the need of every blogger template.we see that different blogger templates have different styles of page numbering navigation bar.It commonly apperared below in all posts on the home page of a blog.This widget helps in jumping to previous posts of a blog or turning to newer posts by single click.However you might have noticed that some professional blogger using numbering pagination widget along with newer post and loder post button.This will only turn our blog desigh to professional looks but it will also helps to jump easily from page 1 to page 7 by single click.Previous day we have received several comments from our reader they want to know is there any way to add customize pagination widget with numbers along with the older post and newer post buttons.so to make them happy with best answer i was thinking why not to share a complete tutorial on adding customize numbering widget to bloggeer.So,in this article i will show you how to add number page navigation widget in blogger blogspost,

Add Number Page Navigation Widget in Blogger

follow the below simple steps to add this widget in your blog.Please follow all the steps to add this widget in blog.

Step.1

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 past the below given code before the above line.

    <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="http://yourjavascript.com/815315225  /www.creatingablogsite.blogspot.in.js"></script>
    <div class='clear'/>
    </div>
    </b:includable> 

Step.2

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> 

Step.3

1. Now find for ]]></b:skin> tag
2. Now copy the below given code and past before]]></b:skin>

     3.  Now past 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;
    }



   
   4.   Now Click On Save Button and you done almost.