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 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;}
<script style='text/javascript'>
var numshowpage=10;
var postperpage =7;
var upPageWord="Previous";
var downPageWord="Next";
var urlactivepage=location.href;
var home_page="/";
<script style='text/javascript' src=''></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!



  1. thanks,,,this post is very usefull

  2. this thing really helped me and its easy.

  3. vaia ami size barate chai amar blog e choto dekhay ki korbo ?

  4. awesome , awesome , awesome , Atlast it's working , thanks bro .

    This is my blog ,,,,

    Download latest bluray hd movies and music videos in 720p and 1080p from mediafire and torrents free

  5. Replies
    1. Sorry buddy. Maybe server is down. You can find a different code from other sites. But this code was really handy.

      This is the server -
      of this code. And it's down currently. I will try to use a different code.