How to add numbered page navigation to your blog

Adding Numbered Page navigation will be useful for readers to easily go through your posts.Please follow the below instructions to add a page navigation to your blog.

First go to Blogger Dashboard, then select Template and then Edit HTML.

STEP #1:

Find the below code by pressing Ctrl+f and type the below code in it.

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

Paste below code before the above line.

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

STEP #2:

Now find the below code

<b:include name=’nextprev’/>

Now, Replace the above code with the given below 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  ]]></b:skin>

Paste the below code before the above code.

#blog-pager, .pagenavi {

     clear: both;

     text-align: center;

     margin: 30px auto 10px;

}

#blog-pager a, .pagenavi span, .pagenavi a {

padding: 10px;

background: #ffffff;

color: #333333;

text-decoration: none;

font-family: arial;

font-size: 14px;

position: relative;

margin: 0px 4px 4px 0px;

-webkit-transition: all 0.4s ease 0s;

-moz-transition: all 0.4s ease 0s;

-ms-transition: all 0.4s ease 0s;

-o-transition: all 0.4s ease 0s;

transition: all 0.4s ease 0s;

} 

#blog-pager a:visited, .pagenavi a:visited {

     color: #fff;

}

#blog-pager a:hover, .pagenavi a:hover {

     color: #fff;

     text-decoration: none;

     background: #54c0d1;

box-shadow: 2px 2px 7px rgba(0, 0, 0, 0.5);

position: relative;

}

.pagenavi .current {

     color: #fff;

     text-decoration: none;

     background: #54c0d1;

}

.pagenavi .pages, .pagenavi .current {

     font-weight: bold;

}

Now, click Save Template and I hope you like this widget. Please give your valuable comments