Blogger/BlogSpot Pagination (Page Navigation) Made Easy

Pagination In Blogger/BlogSpot Blogs:

LIVE DEMO (see page bottom)
Read this tutorial to add Pagination to any BlogSpot / Blogger based blog with just two steps. The pagination numbers are completely customizable.

Instructions to follow:

STEP #1:

Log in to Blogger, go to Layout -> Edit HTML

Find this code:

</body>

And paste this code immediately ABOVE/BEFORE it:

<!–PAGINATION-STARTS–>
<script type=’text/javascript’>

var pageCount=10;
var displayPageNum=3;

var upPageWord =&#39;Previous&#39;;
var downPageWord =&#39;Next&#39;;
</script>
<script src=’http://files.main.bloggerstop.net/uploads/3/0/2/5/3025338/pagination1.js’ type=’text/javascript’/>
<script src=’http://files.main.bloggerstop.net/uploads/3/0/2/5/3025338/pagination2.js’ type=’text/javascript’/>
<!–PAGINATION-STOPS–>

var pageCount=10; is the number of posts to be displayed on each page. [For ex. in a simple Google search on each page you are shown 10 search results] – change the number “10” to any number you want.

var displayPageNum=3; is the number of buttons to be shown (on each side) along with the page number currently seleted.
For eg. If a reader is on page 6, then in the pagination, page numbers will be displayed like this:

Prev 3 4 5 6 7 8 9 Next
i.e. 3 page numbers on each side of number 6.

STEP #2
Now we’ll do the styling of these pagination numbers…
By default, this code will give a purple look to the numbers.

Find this code in the template:

</head>

And immediately ABOVE/BEFORE it, paste this code:

<!–PAGINATION-STARTS–>
<link href=’http://files.main.bloggerstop.net/uploads/3/0/2/5/3025338/pagination2.css’ rel=’stylesheet’ type=’text/css’/>
<style type=’text/css’>
.showpage a:hover {
color: #FFFFFF;
background-color: #92416C;
}
// STYLE CODE FOR SELECTED PAGE STARTS
.showpagePoint {
color: #FFFFFF;
background: #92416C;
border: 1px solid #92416C;
}
// STYLE CODE FOR NUMBER BUTTONS STARTS
.showpageNum a:link,.showpage a:link {
color: #000000 !important;
background-color: #92416C;
border: 1px solid #92416C;
}

// HOVER CODE for NUMBER BUTTONS

.showpageNum a:hover {
color: #FFFFFF !important;
background: #92416C !important;
border: 1px solid #92416C;
}
// STYLE CODE FOR “PREV and NEXT” BUTTONS STARTS
.showpageArea a {
border: 1px solid #92416C;
}

// HOVER CODE for NEXT-PREV BUTTONS

.showpageArea a:hover {
border: 1px solid #92416C;
color: #FFFFFF !important;
background: #92416C !important;
}
</style>
<!–PAGINATION-STOPS-https://bloggerstop.net–>

In the code above, everywhere #92416C refers to purple color.
Replace it with the color codes you want [view color-combinations and get HTML hex-color codes from this page].
Try different colors for borders, backgrounds, hover effects, and the numbers text too, according to the instructions I have highlighted in RED/BLUE colors.

Some Popular Blogger-Pagination Examples…

NOTE: If you create something unique and it can be modified more to suit other tempates, then do comment on this page and show your work. Your blog will be featured in this post.

Save the template.

STEP #3

Download and save the files used in this tutorial as a backup on your PC [Download Link]

Credits: Pagination for Blogger was originally created by Mohamed Rias from TechieBlogger. Then most of the limitations in the code were removed and the code was optimized by Abu-Farhan from Abu Farhan. He has designed six more beautiful navigation styles.

157 thoughts on “Blogger/BlogSpot Pagination (Page Navigation) Made Easy

  1. Well Kytro, thats' the only code which has to be removed in my knowledge. Actually it shouldn't be deleted completely, simply you have to undo the steps. According to my tutorial, now you have to replace the code in BLACK with code in RED.

  2. im sorry i have never used that hack. if im stuck with this how can i make mine like yours where there are spaces between the titles not them being bunched up

  3. One question Diviya, do you know what's the exact code for the one in the image ?

    It's looking really cool, and had to made some modifications to Orange Template's one 'cause I got really confused..

    Anyways, have the code ?

    Please answer ASAP

  4. Hi Daniel,

    If you simple copy-paste the above code (with #92416C) then you'll get the pagination exactly as shown in the above image.

    I have changed the code in hot-orange template to match the overall look of the blog.

  5. Hi, my name muhafiz

    Unfortunately, my blog did not work.

    I give my password to my blog template for you this numbering will set up an appropriate color are you?

    mail me if you do you say let's communicate.
    If you need help very very glad I got it.

    Thank you dear bro …

    blogmuhafiz@hotmail.com

  6. hello.
    love the site. using a customized template, and attempting to add this feature. it saved, which means there were no errors, but the feature isn't appearing. perhaps there's a conflict with my layout…?

    my blog is coloredboy.net

  7. Hey Chris,

    Actually there's a problem in that funkyzine template you are using. Pagination hack replaces the buttons "prev" and "next" with those numbers, but the problem in that template is that the button prev and next are missing, so there's nothing to replace and so no page-numbers !

  8. Hi Divya,

    I tried this hack and got the pagination working, except I'd like to fix two things, and don't know how:
    1. I'd like to change prev and next to Spanish if possible, and the color of the text from black to a #666666 grey which I think would blend better with my blog. Also is there a way to change the font?

    2. I set up my blog so 3 posts would show up on the main page, and before installing the pagination hack, every time I hit next, it would show 3 posts per page (which is the way I like it). But now the pagination says I only have 2 pages, the first with 3 posts, and the rest with all the others. Is there a way to make it show just 3 posts per page on all the pages?

    Hope you can help… thanks for all your great tutorials 🙂

    Kind regards,

    Louma / http://www.amormaternal.com/

  9. Hey Louma,

    first I'll answer your second query, to display 3 posts on each page, in the STEP #1, you have to change this code:
    var pageCount=10;
    to this:
    var pageCount=3;

    And now your first query:
    yes, you can use words in Spanish, just replace these words Previous and Next in the code of STEP #1:

    var upPageWord ='Previous';
    var downPageWord ='Next';

    and to change the color of text, edit this:

    color: #000000 !important;

    make it:

    color: #666666 !important;

  10. Hey Divya!

    Thank you so much for dropping by, and responding so fast… I've fixed the language of prev and next, but have not found where to change "pages" to "páginas". I've also messed around with the colors a bit, but haven't been able to get it to change from black to grey… 🙁

    Any other ideas?

    Thanks anyway 😉

    Louma

  11. @Louma,

    you have to edit the word "pages" in the file:
    http://files.main.bloggerstop.net/uploads/3/0/2/5/3025338/pagination1.js

    (it will be present at two places, edit at both the places)
    then upload it to either mydatanest.com or sigmirror.com (recommended) and change the link in the code above.

    @Louma and Nikk

    Actually some changes are bing made at Blogger (LINK_HERE), due to which some bloggers couldn't see the newer-older page links in their blogs, may be the customization problems are related to it (missing borders etc.)

  12. @nikk,

    Actually it shouldn't cause a conflict with border color, let's c….try this in the code:

    wherever you see this line in the code above:

    border: 1px solid #92416C;

    add "!important" to it, like this:

    border: 1px solid #92416C !miportant;

  13. hi divya this pagination is nt working on my template? pls tell wat shuld i do? i had use it this on my preivous template buts its nt working on my current template pls help me

  14. @Vicky,

    There's either some mistake in your template, or it is due to the updates being done at Blogger.com
    Even without this pagination hack, the older and newer page links are not visible in your blog, so thi s hack has nothing to replace in your blog.
    If the older-newer page links are not visible due to the updates being done at Blogger.com then wait for some days and when you get your links back, then the pagination will appear. And if it is the mistake of the template, then you have to change the complete template.

  15. Hi
    Thanks for this codes about numbering pages.. it really helps alot although i have certain progress to fix, maybe next time i'll ask question cause for now i'm busy working in my job..

    Here's my blog to weakness the development..

    http://solomode.blogspot.com/

    Just click on the recent/older post (tab menu)… to navigate you to the numbering….
    Thanks and more power

  16. This is great stuff. Only one question, though: Can this be done for a post with more than 200 comments?

    I have a page I designed for my wife @ http://gags4myhag.blogspot.com/ and I've hit this bump in the road. My randomizer needs links from displayed comments, but they all go away when the grand total is 200 or more.

    This page (http://darkufo.blogspot.com/2007/11/blogger-now-supports-openids-for.html) has figured it out wonderfully. And while I would love to know how they added a "like" button to each comment and how they were able to reorder the newest and most popular comments to the top, I am just dying to figure out how they paginated the comment section. This would be wonderful bcuz I'd truly like to keep this tradition of ours alive. I love her.

    This page tried to explain it, but not so well: http://www.benyhirmansyah.com/display-next-coments-for-more-than-200-comments/

    I'm also up for any other maneuvers you might be able to suggest or some more savvy ideas, if I'm able to avoid all of this. I have used your posts for design assistance before, and I am wondering if you have a donations location. Thank you for all your great work.

    -Elmer

  17. @it 's yuu'r

    That is because, your template is a custom designed template and the code for newer-older page/post navigation has been removed. This pagination hack replaces that old code to show new buttons/numbers but now when there's no code to replace, then neither the newer-older buttons nor the numbers will be displayed.

  18. @ GÖK-TÜRK
    No you don't have to change/edit any code in this tutorial (except the numbers "10" and "3" in step #1 and that is also not necessary). Simply copy-paste all the code, and it should start working in your blog.
    In which of your blog, are you trying this hack?

  19. Great code, thanks for the share. Works great on my template (using Minimalist by default). Can't wait to customize more of my blog using your techniques.

  20. Hi Divya..Aditya again..

    Dude i hv nthr issue..ur pagination method is only showing 34 pages with 6 posts per pages..even when i selected 15 posts per pages..

    🙁

    It means only around 200 posts are being listed…but dude i have more than 1500 posts on my blog..please helk me out with this..

  21. just an update… it's working on my Labels pages now. i don't know why it decided it was going to work on there today and it didn't last night. i don't think i changed anything. oh, well, i'm just glad it's working fully now.

    🙂

    thanks! yours is the only hack i tried that worked for me on my template!

  22. Well Lesa, to be frank, although this code should display the pagination buttons in the label pages too, but it doesn't show up on my blog (BloggerStop) too.
    I am more than happy for you that it has started working in your blog (you are referring to freek12edu?)

    For those bloggers, who are still unable to get the pagination on their label/archive pages, I will recommend Abu-Farhans newer pagination script.

  23. well, maybe your code is working in conjunction with the widget code that's available.

    maybe i'll figure out how/why it's working as i hack different blogs that i have.

    i'm just happy it's working. 😀

  24. Buddy i can see the numbers on your blog, it's working fine.
    BTW you have a nice blog, the posts are really good (i mean useful), but to make them more informative, to attract more traffic from search engines, you need to put more content into your posts….keep up the work…

  25. I tried a million times but iam not able to make it work properly.the Pages are shwing up but when i click 2nd r 3rd page there are no posts in them.

    Will you help to integrate this Code correctly in my template.i can uplad my template for yu if you are ready to help me ..do mail me vinay24k@gmail.com

    Thanks in advance 🙂
    vinay24k

  26. Hello, I have tried to put what you say exactly, but nothing appears in my blog… but there's no error either… Just my blog looks like before… and I would be very happy if it can works ! Can you help me please ? (and sorry if my english is too bad, I'm french girl 🙂 ! )

  27. Simple steps to use displaytag for pagination. Display tag is a high level opensource suite which is used for paginating a page. You can paginate a content and display it.

  28. Hey Divya sai,
    Nice post. This was the one i was searching for long tym. I liked the Previews, etc. but it does not work for me!@! could you please assist me in this?
    My mail id is taurusvignesh@gmail.com
    It would be better if you mail me regarding this.
    congrats !! keep posting this kinda articles~.

  29. Hi,

    I'm not sure if you're still maintaining this script, but could you take a look at this if you are?

    I'm setting up a blog with a single post for each page. The script works beatifuly on the main pages of the blog (http://adoodledaily.blogspot.com/) but when I click to the individual post (http://adoodledaily.blogspot.com/2011/12/002-mobile-home.html) I just get the old "previous, home, next" links. Since I want the main and post pages to be as much alike as possible, I'd like to know if this can be fixed.

  30. thanks sir ,
    sir how i can creat number navigation of each lable heading
    like good morning sms and good evening sms
    exame sms.in all pages,s navigation numbering

Leave a Reply

Your email address will not be published. Required fields are marked *