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.
<b:include name='page-navi'/>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<b:include name='page-navi'/>
</b:if>
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<b:include name='nextprev'/>
</b:if>
</b:if>
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: "First",
lastText: "Last",
nextText: "»",
prevText: "«"
}
</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 == "index"'>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<b:include name='page-navi'/>
</b:if>
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<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
