How to Add Page Number on Blogger Blog

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 =7;
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:

Customization of this Code: You can customize the above code as below.

• var numshowpage=10; here 10 is the number of pages will be shown. You can use 8, 12 or any number you want.
• var postperpage =7; here 7 indicates how many posts will be shown per page. Normally blogger blog shows 7 posts per page. If you wanna increase or decrease the number of posts per page then go to Settings > Post and Comments > Show at most (choose the number you want) > Save settings. 
• var upPageWord="Previous";  var downPageWord="Next"; the words Previous and Next are the words that will be shown before and after the page number. Actually you don't need to change the word. But if you wanna use other language then you can do this. 

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