Page Number Navigation for Bogger

How to Add Page Number Navigation for  Blogger

This  Awesome widget for blogger. This one will replace your older link, newer link and home link with stylish number navigation. So that you can easily find your page by selecting page number navigation.
This tutorial will show you how to add page number navigation in your blogger.

1. Go to Blogger - Template - Edit HTML   and Mark Expand Widget Templates

    Find below code  

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


2. Copy below code and paste it before <b:includable id='mobile-index-post' var='post'>


<b:includable id='page-navi'>
<div class='pagenavi'>
<script type='text/javascript'>
var pageNaviConf = {
perPage: 6,numPages: 3,firstText: &quot;First&quot;,
lastText: &quot;Last&quot;,
nextText: &quot;Next&quot;,
prevText: &quot;Prev&quot;
}
</script>
<script src='http://yourjavascript.com/815315225/www.mybloggerblog.com.js' type='text/javascript'/>
<div class='clear'/>
</div>
</b:includable>

3. Find below code 

  <b:include name='nextprev'/>

4. Replace above code with following 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>

5. Add CSS code. Find this code ]]></b:skin>
    copy below code and paste before ]]></b:skin>


#blog-pager, .pagenavi {
     clear: both;
     text-align: center;
     margin: 30px auto 10px;
}
.pagenavi span, .pagenavi a {
    background: #f7f7f7;
    background: -webkit-linear-gradient(top, #f7f7f7 0%,#f5f5f5 52%,#ebebeb 100%);
    background: -moz-linear-gradient(top, #f7f7f7 0%,#f5f5f5 52%,#ebebeb 100%);
    background: -o-linear-gradient(top, #f7f7f7 0%,#f5f5f5 52%,#ebebeb 100%);
    background: -ms-linear-gradient(top, #f7f7f7 0%,#f5f5f5 52%,#ebebeb 100%);
    background: linear-gradient(top, #f7f7f7 0%,#f5f5f5 52%,#ebebeb 100%);
    padding: 5px 10px;
    text-decoration: none;
    color: #7e7e7e;
    border: 1px solid #c6c6c6;
    -webkit-box-shadow: inset 0 4px 3px rgba(255,255,255,0.6), 0 1px 3px rgba(0,0,0,.2);
    -moz-box-shadow: inset 0 4px 3px rgba(255,255,255,0.6), 0 1px 3px rgba(0,0,0,.2);
    box-shadow: inset 0 4px 3px rgba(255,255,255,0.6), 0 1px 3px rgba(0,0,0,.2);
    font-weight: bold;
    border-radius:3px;
}
.pagenavi span:hover,.pagenavi a:hover, .pagenavi a.current {
    background: #9ad6fb;
    background: -webkit-linear-gradient(top, #9ad6fb 0%,#77c4fc 100%);
    background: -moz-linear-gradient(top, #9ad6fb 0%,#77c4fc 100%);
    background: -o-linear-gradient(top, #9ad6fb 0%,#77c4fc 100%);
    background: -ms-linear-gradient(top, #9ad6fb 0%,#77c4fc 100%);
    background: linear-gradient(top, #9ad6fb 0%,#77c4fc 100%);
    border: 1px solid #72ade4;
    color: #4879a6;
    -webkit-box-shadow: inset 0 1px 4px rgba(255,255,255,0.75), 0 1px 3px rgba(79,126,167,.5);
    -moz-box-shadow: inset 0 1px 4px rgba(255,255,255,0.75), 0 1px 3px rgba(79,126,167,.5);
    box-shadow: inset 0 1px 4px rgba(255,255,255,0.75), 0 1px 3px rgba(79,126,167,.5);
    -webkit-transition: all 0.25s ease 0s;
    -moz-transition: all 0.25s ease 0s;
    -o-transition: all 0.25s ease 0s;
    transition: all 0.25s ease 0s;
}
.pagenavi { border:none; } More Details: www.shafeelive.blogspot.com


6. You are done. Save your Template and check your blogger. Enjoy with your New Awesome  Page Number Navigation.

Watch Youtube Video Tutorial