How to modify “newer/older Posts” navigation become page numbers

as default, pages move navigation in blogger use link by anchor “older posts” or “newer posts”. it is not like wordpress that use page number to move to other pages so allows the visitors to jump to other pages either newer or older without need pass pages one by one. surely, it is less interesting. but, i have a tricks to modify “newer/older posts” navigation become page numbers like wordpress.

that is simple. you only must to follow and practice the steps below :

1. log in to your dashboard
2. go to “template” menu
3. choose “edit html” >> Proceed
4. find </body> code and place the code below before it.

<!–Page Navigation Starts–>
<b:if cond=’data:blog.pageType != "item"’>
<b:if cond=’data:blog.pageType != "static_page"’>
<script type=’text/javascript’>
var pageCount=5;
var displayPageNum=5;
var upPageWord =’Previous’;
var downPageWord =’Next’;
</script>
<script src=’http://bloggergadgets.googlecode.com/files/blogger_pagenavi_min.js’ type=’text/javascript’/>
</b:if> </b:if>
<!–Page Navigation Ends –>

5. to style, you can use css code below. place it on before of ]]></b:skin> code..

.showpageArea a {
text-decoration:underline;
}
.showpageNum a {
text-decoration:none;
border: 1px solid #cccccc;
margin:0 3px;
padding:3px;
}
.showpageNum a:hover {
border: 1px solid #cccccc;
background-color:#cccccc;
}
.showpagePoint {
color:#333;
text-decoration:none;
border: 1px solid #cccccc;
background: #cccccc;
margin:0 3px;
padding:3px;
}
.showpageOf {
text-decoration:none;
padding:3px;
margin: 0 3px 0 0;
}
.showpage a {
text-decoration:none;
border: 1px solid #cccccc;
padding:3px;
}
.showpage a:hover {
text-decoration:none;
}
.showpageNum a:link,.showpage a:link {
text-decoration:none;
color:#333333;
}