Numbered page navigation for Simplex Templates

Numbered page navigation for Simplex Templates: "Many people ask me a numbered page navigation for Simplex templates . With a lot of modifications ,Simplex templates have diferrent structure to Blogger default template ,so it's hard to find the code , insert numbered page navigation and make it work well . In this post ,I want to show you the a tip for making numbered page navigation in blogspot ( and Simplex templates ) without headache and easy to follow .
This tip is not mine ,I found it on Hontap blog by the comment of Taiki in my blog . Thanks Rilwis at hontap blog for the script and Taiki for your recommendation .
You can see numbered page navigation in my latest template Simplex Focus .

Here is instruction to make numbered page navigation :

1,Find this line ]]></b:skin> and insert the code bellow right before:
/* Page Navigation */
.pagenavi{clear:both;margin:10px auto;text-align:center}
.pagenavi span,.pagenavi a{padding:3px;margin-right:5px;background:#fff;border:1px solid #c20c0c}
.pagenavi a:visited{color:#c20c0c}
.pagenavi a:hover,.pagenavi .current{background:#c20c0c;color:#fff;text-decoration:none}
.pagenavi .pages,.pagenavi .current{font-weight:bold}
.pagenavi .pages{border:none}

this is CSS code of numbered page navigation .

2,Find this line :
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>
and insert this code right after the line above
<b:includable id='page-navi'>
<div class="pagenavi">
<script type="text/javascript">
var pageNaviConf = {
perPage: 5,
numPages: 9,
firstText: "First",
lastText: "Last",
nextText: "Next",
prevText: "Prev"
}
</script>
<script type="text/javascript" src="http://rilwis.googlecode.com/svn/trunk/blogger/pagenavi.min.js"></script>
<div class="clear" />
</div>
</b:includable>

3,Find this code :

<b:include name='nextprev'/>

and replace it with
<b:if cond='data:blog.pageType == "index"'>
<b:include name='page-navi' />
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<b:include name='page-navi' />
<b:else/>
<b:include name='nextprev'/>
</b:if>
</b:if>

Save template and you are done .
To change the number of page displayed and number of post per page ,you can change the value in step 2 :
perPage: 5,
numPages: 9,
firstText: "First",
lastText: "Last",
nextText: "Next",
prevText: "Prev"
perPage : number of post per page .
numPages : number of page displayed .
firstText ,lastText,nextText and prevText are the texts used in page navigation .


Note :
- Value of perPage variable and the maximum number of post per page in Blogger Dashboard should be equal . For example ,if you set the value of perPage in step 2 is 5 , after saving template ,go to Blogger Dashboard -> Settings -> Formatting ,and change the value of Show at most to 5

- You can change the CSS in step 1 to make numbered page navigation displayed as you want .

That's all . I hope it helpful to you .

"