Changing the "Older Posts" By the Numbers

In general, the navigation to move pages in blogspot typically using a link with the text "Older Posts (long post)" and "Newer Posts (new post)". Differences with wordpress who can navigate shaped figure that can make it easier to skip a few pages to the old one and the new post.
Nha trick this time will explain how to replace the link "Older Posts (long post)" and "Newer Posts (new post)" becomes as shown in the figure below


1 The first step of course must go to your template design and then to "Edit HTML"
2 after that find this code]]> </ b: skin> if you have found this script put before the 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;
}

3. And than find this code </ body> then put this script before the code.

<! - Page Navigation Starts ->
<b: if cond = 'data: blog.pageType! = & quot; items & quot;'>
<b: if cond = 'data: blog.pageType! = & quot; static_page & quot;'>
<script type = 'text / javascript'>
PageCount var = 5;
displayPageNum var = 5;
upPageWord var = 'Previous';
downPageWord var = 'Next';
</ script>
<script src = 'http: //bloggergadgets.googlecode.com/files/blogger_pagenavi_min.js' type = 'text / javascript' />
</ b: if> </ b: if>
<! - Page Navigation Ends ->

If it please see the result.