How To Add Page Number Navigation Widget For Blogger

Page Number Navigation widget for blogger is most common widget and almost every bloggers are using this. It allows your readers to Navigate Blog pages like Book, By using this your blog visitors can easily go to an appropriate page they want. By default Blogger allows Older Posts and Newer Posts link to Navigate between Blog pages which is very poor and also it dose not look good and professional. It is very difficult for your readers to navigate profoundly into your Blog's Posts, so the Page Number Navigation Widget will surly helps you to solve this problem.

Numbered Page Navigation Widget is a JavaScript hack for blogger to easily navigate blogger pages.

How to Add Numbered Page Navigation Widget for Blogger / Blogspot.

1. Go to Blogger dashboard > Template > Edit HTML.

2. Now Search the below code.

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

3. Now 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: "First",
lastText: "Last",
nextText: "»",
prevText: "«"
}
</script>
<script src='http://awesome-navigation.googlecode.com/files/onlinetrick.js' type='text/javascript'/>
<div class='clear'/>
</div>
</b:includable>

- You can change 7 (in blue color) to show how many posts per page you want to display
- You can change 5 (in green color) to show How many number will show in your page Navigation.

4. Now Search the below code.

<b:include name='nextprev'/>

5. Now Replace above code with code given 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>

6. Now Find  ]]></b:skin>   and add one of the following Page Number Navigation style code to your blogger blog.

1. Page Number Navigation Style 1

#blog-pager, .pagenavi {
clear: both;
text-align: center;
margin: 30px auto 15px; }
.pagenavi .pages { display: none; }
#blog-pager a, .pagenavi span,
.pagenavi a {
padding: 5px 10px; text-decoration: none; font-family: arial; color: white; margin: 2px;
background: black;
background-position:
bottom; -webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
border-radius: 30px; font-size: 20px;
}
#blog-pager a:hover, .pagenavi a:hover
{
background: orange; }
#blog-pager-older-link,
#blog-pager-newer-link
{
float: none;
}
.pagenavi .current
{
background: orange;
}

2. Page Number Navigation Style 2

#blog-pager, .pagenavi {
clear: both;
text-align: cent  margin: 30px auto 10px;
}
#blog-pager a, .pagenavi span, .pagenavi a {
border: 1px solid #3d8bf2;              
padding: 5px 10px;              
text-decoration: none;              
font-family: arial;              
color:#fff;              
margin: 2px;              
background-image: url('http://onlinetrick-ot.googlecode.com/svn/image/menubg1.PNG');
background-position: left;          
-webkit-transition: all 0.7s ease-in-out;            
-moz-transition: all 0.7s ease-in-out;              
-o-transition: all 0.7s ease-in-out;
}
#blog-pager a:hover, .pagenavi a:hover {
background-position:right;
}
#blog-pager-older-link, #blog-pager-newer-link {
float: none;
}
.pagenavi .current {
background-position:right;
}

3. Page Number Navigation Style 3

#blog-pager, .pagenavi {
clear: both;
text-align: center;
margin: 30px auto 10px;
}
#blog-pager a, .pagenavi span, .pagenavi a {
text-decoration: none;
color: #333;
text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
background-color: #F8F8F8;
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#fffcfcfc,EndColorStr=#fff8f8f8);
background-image: -moz-linear-gradient(top,#FCFCFC 0,#F8F8F8 100%);
background-image: -ms-linear-gradient(top,#FCFCFC 0,#F8F8F8 100%);
background-image: -o-linear-gradient(top,#FCFCFC 0,#F8F8F8 100%);
background-image: -webkit-gradient(linear,left top,left bottom,colorstop(0,#FCFCFC),color-stop(100%,#F8F8F8));
background-image: -webkit-linear-gradient(top,#FCFCFC 0,#F8F8F8 100%);
background-image: linear-gradient(to bottom,#FCFCFC 0,#F8F8F8 100%);
padding: 5px 10px;
border: 1px solid lightGrey;
font-weight: bold;
font-size: 12px;
vertical-align: middle;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
margin: 2px 2px;
-webkit-transition: .0s ease-in!important;
-moz-transition: .0s ease-in!important;
-ms-transition: .0s ease-in!important;
-o-transition: .0s ease-in!important;
transition: .0s ease-in!important;
}
#blog-pager a:hover, .pagenavi a:hover {
border-color: #C6C6C6;
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#fff8f8f8,EndColorStr=#ffeeeeee);
background-image: -moz-linear-gradient(top,#F8F8F8 0,#EEE 100%);
background-image: -ms-linear-gradient(top,#F8F8F8 0,#EEE 100%);
background-image: -o-linear-gradient(top,#F8F8F8 0,#EEE 100%);
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,#F8F8F8),color-stop(100%,#EEE));
background-image: -webkit-linear-gradient(top,#F8F8F8 0,#EEE 100%);
background-image: linear-gradient(to bottom,#F8F8F8 0,#EEE 100%);
}
#blog-pager-older-link, #blog-pager-newer-link {
float: none;
}
.pagenavi .current {
border-color: #C6C6C6;
background-color: #E9E9E9;
background-image: none;
-moz-box-shadow: inset 0 1px 1px rgba(0,0,0,.20);
-ms-box-shadow: inset 0 1px 1px rgba(0,0,0,.20);
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .20);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .20);
}
.pagenavi a:active {
border-color: #C6C6C6;
background-color: #E9E9E9;
background-image: none;
-moz-box-shadow: inset 0 1px 1px rgba(0,0,0,.20);
-ms-box-shadow: inset 0 1px 1px rgba(0,0,0,.20);
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .20);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .20);
}