numbered page navigation for blogger

#Note:Don't put widget Title


Manual Installation:-
1. Login To Your Blogger And Go To Design Section

2. Then Click On Edit/Html

3. Now search for </body> and place the below codes before it.

<style type="text/css">
.showpageArea{
padding:10px;
color : #003366;
text-align : left;
width : 100%;
}
.showpageArea a {
float:left;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHrJI6Urrd2jXP-KkUn3g0TiKVpB7Brv37ZlIruOtiWX0li2GHDnp_aMDOUl1pNGwQxk6MebEVlJzMFnAgMoNDjQyMfan5dbMC-4JBxt_P0yJxmTzkVRNWN7YYFZmYl8MlDPIb8y6ChEuR/) no-repeat 0 0;
text-align : center;
width : 127px;
height : 42px;
text-align : center;
display : block;
margin : 0 5px;
color : #333;
padding-top : 6px;
}
.showpageArea a:hover {
color : #333;
margin : 0 5px;
padding-top : 6px;
}
.showpageOf{
float:left;
padding-top : 6px;
}
.showpageNum a {
background : url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdVgr_b1N3uqRTLY6ORTYobgxxfm6IEeTCRFfYQguFPQVkH0IozQHDOWiFw19w9UGGcspLi_cJwxjqDiOC7SqGeE1B8pDMncFgslxQfp9DtEKBt0RBUHFjcCMS3idDf69r5p48QFRH_AAM/) no-repeat 0 0;
width : 37px;
height : 42px;
display : block;
text-align : center;
float : left;
margin : 0 5px;
padding-top : 6px;
text-decoration : none;
color : #333;
}
.showpageNum a:hover {
background : url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdVgr_b1N3uqRTLY6ORTYobgxxfm6IEeTCRFfYQguFPQVkH0IozQHDOWiFw19w9UGGcspLi_cJwxjqDiOC7SqGeE1B8pDMncFgslxQfp9DtEKBt0RBUHFjcCMS3idDf69r5p48QFRH_AAM/) no-repeat 0 100%;
color : #fff;
}
.showpagePoint {
background : url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdVgr_b1N3uqRTLY6ORTYobgxxfm6IEeTCRFfYQguFPQVkH0IozQHDOWiFw19w9UGGcspLi_cJwxjqDiOC7SqGeE1B8pDMncFgslxQfp9DtEKBt0RBUHFjcCMS3idDf69r5p48QFRH_AAM/) no-repeat 0 100%;
width : 37px;
height : 42px;
display : block;
float : left;
text-align : center;
margin : 0 5px;
padding-top : 6px;
font-weight : bold;
color : #fff;
}
.showpageNum a:link, .showpage a:link {
text-decoration : none;
color : #cc0000;
}
</style>
<script style='text/javascript'>
var pageCount=5;
var displayPageNum=1;
var upPageWord="Previous";
var downPageWord="Next";
</script>
<script type='text/javascript' src="http://bloggerblogwidgets.googlecode.com/files/BeautifulPageNavi.js"/>

#var pageCount=5; ~ Number of posts per page

Save template and Check your Blog