Numbered Page Navigation For Blogspot
Page Navigation is an awesome feature. You might have seen numbered page navigation on many wordpress blogs But Number navigation is really essential feature for every blog site. You can make easily page number navigation from now.
2.Don’t click the checkbox which says ‘Expand Widget Templates’
3.Now find
]]></b:skin>
and replace it with
.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;
}
]]></b:skin>
Next is the JavaScript part. Find
</body>
and replace it with
<!--Page Navigation Starts-->
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<script type='text/javascript'>
var pageCount=5;
var displayPageNum=5;
var upPageWord ='Previous';
var downPageWord ='Next';
</script>
<script src='http://blogergadgets.googlecode.com/files/blogger-page-navi.v1.js' type='text/javascript'/>
</b:if>
</b:if>
<!--Page Navigation Ends -->
</body>
As you can see,there are some customizable parameters in this code
var pageCount=5;
This code determines the number of posts that would be displayed per page.
var displayPageNum=5;
This code determines the number of additional page navigation numbers that will be displayed on the page.
var upPageWord ='Previous';
var downPageWord ='Next';
These two lines determine the text that would be shown for the previous page and next page respectively.
