How to Add Page Number on Blogspot

By default your blogspot blog doesn't provide any page numbered navigation system. Instead of it the usual themes provide Newer Post, Home and Older post. But reader of the blog as well as the admin of the blog how difficult it is to navigate in this system. 

In this post I am providing a code that can turn your old navigation system into numbered navigation system.  

It is as easy as adding a gadget. All you need to do is just add a HTML or JavaScript Gadget. Just follow the steps below: 

1. First go to www.blogger.com
2. Then go to your blog's layout option.
3. Now click on Add a Gadget.
4. Here you'll find a list of gadgets. Scroll down and select HTML/ JavaScript gadget.  
5. Now copy and paste the following code in the gadget box. 
6. Now save the gadget and refresh your blog to see the result! 

<style type='text/css'>#blog-pager{padding:10px 0;clear:both;}
.showpageNum a {color:#333333;text-decoration:none;border: 1px solid #CCCCCC;margin:0 3px;padding:3px 7px;background-color:#FFFFFF;}
.showpageNum a:hover, .showpage a:hover, .showpagePoint {color:#333333;border: 1px solid #CCCCCC;padding:3px 7px;background-color:#CCCCCC;margin:0 3px;}
.showpageOf {color:#333;text-decoration:none;padding:3px 7px;margin: 0 3px 0 0;}
</style>
<script style='text/javascript'>
var numshowpage=10;
var postperpage =5;
var upPageWord="Previous";
var downPageWord="Next";
var urlactivepage=location.href;
var home_page="/";
</script>
<script style='text/javascript' src='http://bloggerblogwidgets.googlecode.com/files/way2blogging_bloggerpagenavi.js'></script>

This gadget will create a number system like below:

Stay with Marks PC Solution to get more interesting IT topics!