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:
<script type='text/javascript'>
var home_page="/";
var urlactivepage=location.href;
var postperpage=7;
var numshowpage=4;
var upPageWord ='Prev';
var downPageWord ='Next';
</script>
<script src='http://scriptabufarhan.googlecode.com/svn/trunk/pagenaviv202-min.js' type='text/javascript'></script>
</body>
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 + "?&max-results=7"'
Change 7 base on how many post every page.
hope you will done as well. it's so easy...