Blogger/BlogSpot Pagination (Page Navigation) Made Easy

Pagination In Blogger/BlogSpot Blogs:

Blogger/BlogSpot Pagination (Page Navigation) Made Easy

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.

Leave a Reply

157 Comments on "Blogger/BlogSpot Pagination (Page Navigation) Made Easy"

Notify of
avatar
Sort by:   newest | oldest | most voted
Ms Hetal Patil
Guest

Hello Divya,

I am getting XML error message after following Step 2

View Comment
Anup
Guest

Hmmm this is cool. I have used before.

View Comment
hunterforyou
Guest

I'm also getting the same error… It says…


XML error message: The entity name must immediately follow the '&' in the entity reference.

View Comment
अर्कजेश
Guest

same error , not working ..

View Comment
Sai @ BloggerStop
Guest

Oops sorry, there's a mistake in the last blue line, replace "PREV & NEXT" with this "PREV and NEXT"
I'll update the post in a few minutes.

View Comment
Divya Sai
Guest

Thanks for reporting the error guys, I have corrected and updated the post. It'll start working now.

View Comment
Analyst
Guest

Thanks , it is of a greta use.
regards
Indian-Share-Tips.Com

View Comment
Kytro
Guest

thanks it worked out prefectly for my blog. just one issue. when i go to the next button it lists the posts with their titles. it doesnt show like the actual post itself. here is a link to my blog if you can help.

http://www.guidegoods.blogspot.com

View Comment
ErwinSK
Guest

Nice and good BLOG!

View Comment
Divya Sai
Guest

Welcome guys,

@Kytro
You are using a Blogger-SEO hack "Show only titles in Blogger archive pages" which is required to prevent content duplication in Blogger blogs (although not really necessary). If you want to show complete/truncated posts instead of only titles, then read & remove that hack from your blog.

View Comment
Kytro
Guest

@divya sai i deleted the code and it still has the same issue

View Comment
Divya Sai
Guest

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.

View Comment
Kytro
Guest

can you please help i undid the hack but its still there

View Comment
Divya Sai
Guest

@Kytro,

Are you using the auto-read more hack in your blog? Not sure but that's a possible reason too.

View Comment
Kytro
Guest

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

View Comment
Divya Sai
Guest

Well that is possible Kytro. Follow that tutorial and in that code there are two <br/> tags, that will leave some space between the titles. You can remove/add one more br/ tag if you want.

View Comment
MetaMorph
Guest

Amazing! It works… Damn… thanks man! 😀

View Comment
Danoxs
Guest

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

View Comment
Sai @ Blogger Widgets
Guest

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.

View Comment
Fahad bin Khalid
Guest

🙁 not working

View Comment
wpDiscuz