Change Blogspot Pages Navigation Into Numbers Navigation

In general, pages navigation in Blogspot presented with the text links wrapped with the words Older Posts and Newer Posts. Differs from Wordpress that can be changed into numbers so we can jump to the certain pages to find the older articles.

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-->
<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=5;
var displayPageNum=5;
var upPageWord =&#39;Previous&#39;;
var downPageWord =&#39;Next&#39;;
</script>
<script src='http://bloggergadgets.googlecode.com/files/blogger_pagenavi_min.js' type='text/javascript'/>
</b:if> </b:if>
<!--Page Navigation Ends -->

Save your template, now open your Blogspot homepage to see the result.