page navigation simple code for blogger

Add Number Page Navigation Widget In Blogger

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 past 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="http://yourjavascript.com/815315225/www.mybloggerblog.com.js"></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 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;
    }

Now Click On Save Button And you done almost: