How to Insert Page Number Instead Older/Newer Page Navigation in Blogger/Blogspot

1. Sign-in your blogger account.

2. Go to Dashboard >> Design >> Edit HTML

3. Backup / Restore current template (use button in top of the showing page). Whenever you changes the HTML template, DO Backup before begin.

4. Using the find function of your browser(in most case, ctrl+F), find following expression. (You can just look up the codes to find it.)

]]></b:skin>

5. Insert following CSS code into just above the found expression.

.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;
}

6. Using the find function of your browser(in most case, ctrl+F), find following expression.

</body>

7. Insert following Javascript code into just above the found expression.

<!--Page Navigation Starts-->
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<script type='text/javascript'>
var pageCount=6;
var displayPageNum=6;
var upPageWord =&#39;Previous&#39;;
var downPageWord =&#39;Next&#39;;
</script>
<script src='http://blogergadgets.googlecode.com/files/blogger-page-navi.v1.js' type='text/javascript'/>
</b:if>
</b:if>
<!--Page Navigation Ends -->

8. Customize post numbers displayed per page.

var pageCount=3;
// This code determines the number of posts that would be displayed per page.
var displayPageNum=3;
// This code determines the number of additional page navigation numbers that will be displayed on the page.

9. 'Save Template' before going to next step.

10. Expand Widget Templates by checking Expand Widget Templates check box located in right-top side of template script box. Then, find following expression.

'data:label.url'

11. Replace that code with following code.

'data:label.url + &quot;?max-results=6&quot;'

In fact this is about 'How to Limit the Number of Pages in Labels Page'. See the page for detail.

Done. Enjoy Blogging!

Posted in Blogger, Blogger Tip, Blogging Tip, Page Navigation, Page Number Blogger, Pager