Featured post

Show your Image on System Properties!!

Few years ago I showed you how to show custom picture on USB flash drive . That time it was a quite interesting trick among the PC ...

How to Add Page Number on Blogger Blog


By default your blogger blog doesn't have any numbered page navigation system. Instead of it the usual themes provide Newer Post, Home and Older post to navigate the site. But it will be very convenient for the visitors to navigate your site, if you place a page number navigation system at the bottom of your contents!


In this post I'm gonna share a code with you. And this can turn your old navigation system into numbered navigation system! Hope this will help you lot.

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

  1. First go to www.blogger.com and open your dashboard.
  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. 
 
Also have a look at the live demo below:



 

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