If you wish to change the blogger Older / Newer Posts navigation into Number, it's your lucky day because in this post you will be guided to do so. The point of having this numeric navigation installed is of course to make easier to navigate to your old posts.
As the result you will see the following numbers navigation like in the following picture.
Steps to change Older / Newer Posts navigation into Number
Step 1. Firstly your need to go to Edit HTML of your Blogspot (Template -> Edit HTML)
Step 2. After you are in the Edit HTML, just find this code ]]></b:skin> once you found it then place this script right above that code.
.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;
}
Note. The code you just placed above ]]></b:skin> is the CSS code to form the page numbers navigation so it will look just like in the above picture example.Step 3. Now you need to find this tag </body> then place the following lines of codes right before it.
<!--Page Navigation Starts-->Save your template, now open your Blogspot homepage to see the result.
<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://bloggergadgets.googlecode.com/files/blogger_pagenavi_min.js' type='text/javascript'/>
</b:if> </b:if>
<!--Page Navigation Ends -->
No comments:
Post a Comment