The best Numbered Page Navigation Widget for Blogger

Pagination Functionality can increase your website or blog's traffic. After tested many Page Navigation Widgets, I found the best one from Deluxe Blog Tips , I say "the best" because :
- It is easy to custom CSS, make it like Wordpress's Page-Navi plugin
- Easy to install to your blog
- Fast, stable and no bugs (if you install it the right way, of course!)


Edit HTML, find this line:
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>
Insert after it:
<b:includable id='page-navi'>
<div class="pagenavi">
<script type="text/javascript">
var pageNaviConf = {
perPage: 3,
numPages: 3,
nextText: &quot;&#187;&quot;,
prevText: &quot;&#171;&quot; }
</script>
<script type="text/javascript" src="https://sites.google.com/site/noctblogsite/script/pagenavi.min.js"></script>
<div class="clear" />
</div>
</b:includable>
In which:
- perPage: number of posts are shown in each page
- numPages: number of pages are shown in page navigation
- firstText, lastText, nextText, prevText: simply the "First", "Last", "Next", "Prev" text

Next, find the line:
<!-- navigation -->
<b:include name='nextprev'/>
Replace it with:
<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:include>
</b:if></b:else></b:include></b:if>
Final, choose a style, and insert the corresponding CSS code above </b:skin>

.pagenavi{clear:both;margin:10px auto;text-align:center}
.pagenavi span,.pagenavi a { font-size:12px;padding: 2px 4px 2px 4px;margin: 2px;border: 1px solid #dfdfdf;color:#000;}
.pagenavi a:visited{}
.pagenavi a:hover,.pagenavi .current{color: #FFF;background-color: #e81d1d;border: 1px solid #fb1515;text-decoration:none;}

.pagenavi{clear:both;margin:10px auto;text-align:center}
.pagenavi span,.pagenavi a { padding:4px 7px;margin-right:2px;font-size:11px;color:#555;background:#e8e8e8;border:solid 1px #ccc;}
.pagenavi a:visited{}
.pagenavi a:hover,.pagenavi .current{color: #FFF;background-color: #e81d1d;border: 1px solid #fb1515;text-decoration:none;}
.pagenavi .pages{display:none} 

.pagenavi{clear:both;margin:10px auto;text-align:center}
.pagenavi span,.pagenavi a {
border: 1px solid #BFBFBF;
padding: 3px 6px;
margin: 2px;
font-size:11px;color:#4a77ae;
background:#e8e8e8;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px; }
.pagenavi a:hover,.pagenavi .current{color:#000;background:#f6f6f6;border: 1px solid #ccc;text-decoration:none;}