How to Add Pagination to Blogger Blog (Blogspot)

You can create pagination (numbered navigation or page numbers) with the code I have in this post. Blogspot blogs do not have page numbered navigation by default. The usual themes provide only the type of navigation with:

Newer Post, Home and Older post.

You can now change this by using a simple code. This will create a better navigation experience for you and your blog readers.

If you are not someone that really in love with adding and editing code, don’t worry because everyone can do it. It’s just the same process as in when you are adding a new gadget. All you need to do is just add the following code to a HTML or JavaScript Gadget.

    <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>

Steps to Add Pagination (numbered navigation or page numbers) to Blogger Blog (Blogspot)

First go to www.blogger.com
Go to your blog’s layout option.
Then click on Add a Gadget.
A list of gadgets is available here so all you need is to scroll down and select HTML/ JavaScript gadget.
Now copy and paste the code above in the gadget box.
Save and your blog pagination is ready.

Now Check it out and it should look like this:

Blogger Pagination

 

Use the comment box to ask any question or ask for help if need be.

Hope you find this useful!

2 Comments

  • Reply July 6, 2012

    Tess

    I’ve added this gadget to my blog, and it works great on my home page but not my label pages. For some reason it’s not showing up and I just have my old ‘next’ and ‘previous’ links that I had prior to installing the widget.

    • Reply July 6, 2012

      Ahmed Ogundimu

      Oh, it works only for your index pages. Instead of clicking next to go to the following page.

Leave a Reply