New and Refine Code|Numbered Page Navigation On Blogger Platform

This the tutorial about How to add Numbered Page Navigation On Blogger.com/Google blogs.It helps to visitor when they read your blog daily.If you have larger amount of blog posts and multiple Author the you should implement this code on your website.

This Code can categorized your  Blog posts in to Group of some posts per pages.It will shown on Blogger Home page as well as Label.

Add this Number Page Navigation widget to your blogger blog
You can add this widget in your blogger blog by following our three simple steps bellow.

Step 1:
Go to Blogger Dashboard>> Template>> Edit html
Press Ctrl + F and search the code shown below
Paste given code before the above line.

<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: 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 This Code

<b:include name='nextprev'/>

And Replace <b:include name='nextprev'/> code with code shown below.

<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>
Copy the below code and paste before the ]]></b:skin>

#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 Save Template.

Advantage :

-It helps user to easy navigate your blog.

-Reduces you blog page To long height.

Disadvantage:

-Some times it not responsive

-Slower the page loading time.

This Tutorial is related to: Numbering Blogger page,Numbered blogspot Home page,Numbering Labels,Numbering Blogger Search Pages.