Add a Numbered Page Navigation Widget

Numbered Page Navigation Widget is very unique style for blogger be'coz it gives a a very different look and feel to blogger and it also reduce the coding of Home, Newer, Older buttons and we can jump to any page directly from the home page and also come previous from any page. Most important thing is that we can easily customize and designed this widget according to our needs.


Read Also: Top 3 Numbered Page Navigation Widget

Add Page Navigation Widget in Blogger

• Login to Blogger > Dashborad
• Click on Drop Down Menu and select Template
• Backup your Template before making any changes to your blog
• Now Click on Edit HTML > Proceed >  Expand Widget Templates
• Press Ctrl + F and search the code shown below.

]]></b:skin>

• Paste below code just before it.

.pagenavi{
clear:both;margin:10px auto;text-align:center
}
.pagenavi span,.pagenavi a{
padding:10px;
margin-right:5px;
padding-top:5px;
padding-bottom:5px;
background:#FFFFFF;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.pagenavi a:hover,.pagenavi .current{
background:#ff8400;color:#fff;text-decoration:none
}
.pagenavi .pages,.pagenavi .current{
font-weight:bold
}
.pagenavi .pages{border:none}

• Now find below code

<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>

• If above code doesn't found then search for below code

<b:widget id='Blog1' locked='false' title='Blog Posts' type='Blog'>

• Now paste below code after above codes.

<b:includable id='page-navi'>
<div class="pagenavi">
<script type="text/javascript">
var pageNaviConf = {
perPage: 5,
numPages: 5,
firstText: "First",
lastText: "Last",
nextText: &quot;&#187;&quot;,
prevText: &quot;&#171;&quot; }
</script>
<script type="text/javascript" src="https://dl.dropbox.com/u/63968842/navigation%20numbered%20widget%28www.widgetgenerators.blogspot.com%29.js"></script>
<div class="clear" />
</div>
</b:includable>

• Now again find below code

<b:include name='nextprev'/>

• Now replace it with below codes.

<b:if cond='data:blog.pageType == "index"'>
<b:include name='page-navi' />
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<b:include name='page-navi' />
</b:if>
</b:if> 

• Now Finally Save Your Template and you are done