How to create Page Numbers Navigation?

here is example image of page numbers.

1. Add Style
    - go to your dashboard and template/ editHTML/ 
    - don't click the check box which say: "Expand Widget Templates"
    - find  "]]></b:skin>"
- replace it with code below:
.showpageNum a { padding: 3px 8px; margin:0 4px; text-decoration: none; border:1px solid #999; -webkit-border-radius:3px;-moz-border-radius:3px; background: #ddd; } .showpageOf {margin:0 8px 0 0;} .showpageNum a:hover { border:1px solid #888; background: #ccc; } .showpagePoint { color:#fff; text-shadow:0 1px 2px #333; padding: 3px 8px; margin: 2px; font-weight: 700; -webkit-border-radius:3px;-moz-border-radius:3px; border:1px solid #999; background: #666; text-decoration: none; } ]]></b:skin>

2. Add JavaScript
     - find word: </body>
     - replace it with:
       &lt;script type='text/javascript'&gt;
       var home_page=&quot;/&quot;;
       var urlactivepage=location.href;
       var postperpage=7;
       var numshowpage=4;
       var upPageWord ='Prev';
       var downPageWord ='Next';
       &lt;script src=''               type='text/javascript'&gt;&lt;/script&gt;

Change based on your blog setting :
var postperpage=7;
var numshowpage=4;

Postperpage : How many Post every Page for your blog
numshowpage : how Many number will show in Your page Navigation

3. Custom your label
    - go to editHTML / check "expand widget templates"
    - find this: 'data:label.url'
- and replace with this: 'data:label.url + &quot;?&amp;max-results=7&quot;'
Change 7 base on how many post every page.
      hope you will done as well. it's so easy...