How to add Number Page Navigation Widget in Blogger

Page Navigation appliance is that the would like of each blogger guide. we tend to see that totally different completely different} blogger templates have different varieties of  page list navigation bar. It unremarkably appeared below all told posts on the house page of a diary. This appliance helps in jumping to previous posts of a diary or turning to newer posts by single click. but you would possibly have noticed  that some skilled blogger exploitation list folio appliance beside newer post and older post button. this may solely flip our diary style to skilled appearance however it'll additionally helps to leap simply from page one to page five by single click. Previous day we've received many comments from our reader they require to grasp is there any thanks to add customise folio appliance with numbers beside the older post and newer post buttons. thus to form them pleased with best answer i used to be thinking why to not share a whole tutorial on adding customise list appliance to blogger.  So, during this article we are going to show you the way to feature range page navigation appliance in blogger blogspot.

Also Read:- How to create a Badge for your Blogger Blog ?

Follow the below straightforward steps to feature this appliance in your journal. Please follow all the steps fastidiously to feature this appliance in journal. giving up a way to add this enumeration appliance in journalger blog.

Step 1

• Go to blogger Dashboard.
• Go to template>>Edit/Html.
• Now find the below code.

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

• 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.mybloggerblog.com.js"></script>
    <div class='clear'/>
    </div>
    </b:includable>

Step 2 

• Now find for this code 

<b:include name='nextprev'/>

• Now Replace the above code with the below given code.

<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 

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

#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: