How to Add Numbered Pagination in Your Blogger Blog

Advertisements
Are you still wondering that how most of the famous blogs are using numbered pagination, instead of displaying older and new post buttons at the bottom of every Blogger archive page? Recently, one of our users asked us, How to add Numeric Pagination in Your Blogger Blog? We have been using number pagination on MyBloggerLab for quite a while now, and from our experience it gives you 10 times better pageviews than the older and newer post button. It is more user friendly, attractive, and SEO friendly. Most of the advance Blogger templates like Templateism comes with builtin Numeric pagination. In this article, we will show you how to add numbered pagination in your blogger blog?

What is Numbered Pagination?

Numbered pagination is a numeric navigation menu which is usually present at the bottom of the archive pages. It divides your whole blog into different pages, just like the pages of a book. Users can simply navigate through page 1, 2, 3, 4 and etc . We have attached a screenshot below, so that users can easily understand our words.

How to Add Numbered Pagination in Blogger?

The firest thing you need to do is to login into your Google account. Once logged in go to Blogger Dashboard >> Template >> Edit HTML and search for the Skin tag ]]></b:skin>. After finding the skin tag, just above it paste the following piece of coding.

.showpageNum a {
background: #02ab68;
padding: 5px;
padding-left: 10px;
border: 1px solid #b9b9b9;
padding-right: 10px;
margin-right: 5px;
color: #000;
font-weight: bold;
}
.showpage a {
background: #02ab68;
padding: 5px;
padding-left: 10px;
border: 1px solid #b9b9b9;
padding-right: 10px;
margin-right: 5px;
color: #000;
font-weight: bold;
}
.showpageArea {
float: left;
}
.feed-links {
display: none;
}
.showpageArea a {
float: left;
font-size: 15px;
color: #fff!important;
padding-left: 15px;
padding-right: 15px;
}
.showpagePoint {
float: left;
font-size: 15px;
padding-left: 15px;
padding-right: 15px;
}
.showpageArea a {
text-decoration: none;
}
.showpageArea {
float: left;
width: 363px;
margin-top: 10px;
}

Now once the style sheet is added to your template, it is the time to add the JavaScript coding that would turn the ordinary looking order/newer post buttons into a robust and user-friendly  numeric pagination. Search for the ending </body> tag and just above it paste the following JavaScript coding. Once everything is done press “Save Template” button located on the top right corner of your screen.

<!--Page Navigation Starts-->
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<script type='text/javascript'>
var pageCount=6;
var displayPageNum=6;
var upPageWord =&#39;Previous&#39;;
var downPageWord =&#39;Next&#39;;
</script>
<script src='http://templateism.com/js/blogger_pagenavi_min.js' type='text/javascript'/>
</b:if>
</b:if>
<!--Page Navigation Ends -->

Congratulations: You have successfully added numbered pagination in blogger. Now go and check out the interactive preview to see the amazing navigation in action. With a little modification is CSS, anyone can customize to give it the desire touch that he needs.

We hope this tutorial may have helped you in learning how to add numbered pagination in blogger. If anyone find any difficulty then don't be shy to make a comment below or tweet us @mybloggerlab.
Advertisements

The Editorial Team of MyBloggerLab consists of a group of Professional Blogger geeks Led by Syed Faizan Ali (Founder of MyBloggerLab).

Comment With:
OR
Choose Wisely!

61 comments

September 7, 2013 at 10:05 PM

Bro, I think something mistake had happen. After implementing this code, it showing page navigation like Templateism

Editorial Team MOD
September 8, 2013 at 12:07 PM

Just Updated!

September 8, 2013 at 4:09 PM

thanks. i need a rt to lt pagination pleaze

September 8, 2013 at 5:13 PM

not working properly. >.<

Editorial Team MOD
September 9, 2013 at 1:16 PM

What error you are facing?

September 9, 2013 at 7:04 PM

helloo bro how to remove blogspot from url

Anonymous
September 13, 2013 at 6:32 AM

where is the 'skin tag'?

September 15, 2013 at 6:38 AM

hello, in my blog i used template from you and thank about it. :D

Editorial Team MOD
September 15, 2013 at 3:35 PM

Here it is ]]></b:skin>

Editorial Team MOD
September 15, 2013 at 3:43 PM

Purchase a custom .com domain and then convert .blogspot.com to .com

September 16, 2013 at 7:20 AM

Hi,

I am able to achieve it but numbers are coming in disoriented way. Can you please check http://phototravelings.blogspot.com/ and suggest?

Anonymous
September 16, 2013 at 10:29 AM

Hello, thank you. It is really help full. It works on me but I don't know how to remove defoult page navigator. Now there are both.

Plus, it shows 7 pages but, the 7 page is blank.
Thank you for all.

September 19, 2013 at 11:54 AM

It shows "Pages (6)" which I not want to. Check my test blog here:
http://unblogobisnuit0.blogspot.ro/search?updated-max=2013-09-15T08%3A58%3A00%2B03%3A00&max-results=6

Any help, please ?

Thanks !

Editorial Team MOD
September 20, 2013 at 12:08 AM

Search for this in your template var pageCount=6; and replace 6 with any number you like

Editorial Team MOD
September 20, 2013 at 12:26 AM

Go to Blogger >> Template >> Edit HTML >> Search for </head> and just above it paste this code

<style>
.showpageArea {
width: 100%!important;
}
</style>

Editorial Team MOD
September 20, 2013 at 12:26 AM

Search for this in your template var pageCount=6; and replace 6 with any number you like

September 20, 2013 at 5:36 AM

Sorry, you didn't understand me. I do not want that text to appear.
Look in this picture, please, for more details:
http://i43.tinypic.com/f4e8v5.jpg

Thanks a lot !

Editorial Team MOD
September 23, 2013 at 10:37 AM

Blog is removed i think

September 30, 2013 at 4:49 AM

how to remove this- Eg:Page(17) before Next

October 1, 2013 at 2:38 AM

Add this to the CSS

.showpageOf {
display: none;
}

October 11, 2013 at 10:14 PM

Hi i tried your pagination but what i'm having issue now is that when i click on the next page, it does not shoe my previous blog posts accordingly.. It's all messed up... Why is it so? Thanks!

October 14, 2013 at 12:29 AM

I am trying to get this pagionation in my articles but I cant find any tips about that. This is all working I got the pagination in my website. Can someone help me and give me a tip how to do this in my articles?

Editorial Team MOD
October 14, 2013 at 4:54 PM

Just Add this in the second Step and it will appear on your article page too

<script type='text/javascript'>
var pageCount=6;
var displayPageNum=6;
var upPageWord ='Previous';
var downPageWord ='Next';
</script>
<script src='http://widcraft.googlecode.com/svn/blogger_pagenavi_min.js' type='text/javascript'/>

Editorial Team MOD
October 14, 2013 at 5:03 PM

It works correctly, There might be some problem with you blog? What's the URL of your site.

October 31, 2013 at 5:32 AM

hey thanks for the great post. but whenever i click a post the pagination is gone.

Editorial Team MOD
November 3, 2013 at 4:15 AM

Yes because on posts you have "older and newer buttons" which takes you to new articles. If you will use pagination is posts than it will take you to archive page instead of the next post.

January 4, 2014 at 8:24 AM

Thanks it has worked for me. Any suggestions on modifying the page number styling to match it with the overall blog appearance.

January 4, 2014 at 12:40 PM

Thanks, I was able to make this work on my blog. But I see that some of my posts are not appearing on any of the pages. Can you suggest why would that be happening? 2 such posts are not appearing. The posts before and after these are appearing fine.

January 9, 2014 at 11:04 AM

can you help me? its not working for me? not sure what i did wrong!

Editorial Team MOD
January 9, 2014 at 11:53 AM

Can I see your blog URL?

SRC
January 24, 2014 at 3:50 AM

Hello Bro I wanted to test this code. So i applied this on a test blog but its not appearing. the test blog url is -

testblog-webdesignspider.blogspot.com

February 8, 2014 at 9:41 AM

Can't working for me when I add this coding my OLDER NEWER POSTS + NAvigation menu goes hidden! :P So what can I do now? ;(
CHECK : http://techfeld.blogspot.com/

Editorial Team MOD
February 10, 2014 at 11:17 AM

You need more posts to show it up

February 19, 2014 at 3:28 PM

thanks, it's working properly on my blog, but why if I click labels the number pagination not show up? and I replace var pageCount=6; with 10 but not change, can you suggest, this is my blog http://eddysupriadi.blogspot.com/search/label/Java

Editorial Team MOD
February 20, 2014 at 8:19 AM

The pagination is visible at the following URL http://eddysupriadi.blogspot.com/search/label/Java?&max-results=1

The only difference is a & after the ? in the max result thing

Instead of ?max-results=4 use ?&max-results=4

February 23, 2014 at 10:42 PM

Hello Mod, You save me from this problem. It already took me a day and im lucky that i search this solution in your blog. And thanks to EDDY SUPRIADI for asking for a solution to that problem when viewing on labels pagination is not working.

"The only difference is a & after the ? in the max result thing"

That solution made my day =) It fixes my problem in my blog at bloggertemplatescloud.blogspot.com

Thanks MBL!

March 2, 2014 at 1:15 PM

Hi,

I am having troubles editing this into my blog. I followed all the steps listed above, but when I save and refresh the page I still see all the entries on the page and it still says "older post" at the bottom.

Any advice?
http://rantbrat.com

March 7, 2014 at 7:12 AM

Hello i have a problem with my blog that it shows only three or four pages on the home page automatically i don know why sometimes 3 others 4 i went to settings and made sure that it is 7 so what is happening what should i do ??? pls help

this is my blog url http://5minuteenglish.blogspot.com/

Editorial Team MOD
March 8, 2014 at 11:17 PM

Try Adding Page Break to your posts

May 10, 2014 at 12:32 AM

After ONE year , i wd like to say, thax.

May 14, 2014 at 9:03 AM

Thanks, its working on my blog :D

May 14, 2014 at 12:08 PM

Just wanted to mention that if anyone is having problems with their older pages not showing any posts, make sure the "pageCount" in the script matches the number of posts you've set your blog to show. I had this problem but after doing so, it worked fine! Also just wanted to say thanks for the widget!

May 19, 2014 at 12:03 PM

It isn't working for me, All the CSS coding is being shown on the Nav bar, check it out. http://gamingpakistan.blogspot.com/
please tell me how to fix it?

June 1, 2014 at 10:17 AM

Can you please help me? On the first/home page the pagination is fine. It displays the numbers 1-7 and Next button . However when I click the next button, the pagination now display numbers 1-8 and the Previous and Next buttons. It keeps adding numbers every time I click next. What should I do so that when I reach page 8, the numbers display are 2-8? Just like the pagination on my tumblr: http://pixelated-dinosaur.tumblr.com/

Blogspot: http://simplyaverage.blogspot.com/
Thanks :D

June 1, 2014 at 10:21 AM

Never mind, found a way around it :D

June 10, 2014 at 10:49 PM

thank you!!!

June 26, 2014 at 1:21 AM

Hello brother i installed this widget in my blogger and it also work fine but the problem is that the CSS code is not working which is provided above. Please help me. The panination is displayed without any style which is provided above. I installed the css code carefully in template and also again and again check it but the css styles are not displaying.
Please guide me
here is my blog adress to check as live.
http://www.pakmax.net/

Editorial Team MOD
June 30, 2014 at 4:31 AM

You need to Add CSS to add style to it. Please follow the tutorial.

July 30, 2014 at 5:41 PM

Successfully added the code but it only separated my 8 blog posts into two pages. Anyway I can code it to separate it post by post? Or will that come when I add new posts?

Editorial Team MOD
July 31, 2014 at 12:40 AM

Post by post sepration is kind of not possible right now in blogger

October 18, 2014 at 1:23 PM

I'm not having any luck! Also, my blog posts are set at 5 for each label and the homepage, any thoughts?
http://www.trainingcor.com/
http://www.trainingcor.com/search/label/blog

April 25, 2015 at 10:16 AM

Hello my friend! I follow the tutorial but I can´t see the pagination my url is monkeymotor.net Thank you!!

Editorial Team MOD
April 26, 2015 at 11:52 AM

Now works fine, code updated.

Editorial Team MOD
September 6, 2015 at 1:47 AM

Search for <body

January 16, 2016 at 10:18 AM

Thx bro, but not working on smartphone

April 25, 2016 at 2:44 AM

how do i remove it i got it from a free template i downloaded it doesnt show most of my previous post when i click next

Anonymous
July 4, 2016 at 11:51 AM

Please Help I want to add Numbered widget in my blogger post are only, not for blogger template, how I add please help me

Editorial Team MOD
July 10, 2016 at 3:35 AM

Here's the tutorial

http://www.mybloggerlab.com/2015/07/how-to-break-your-post-into-multiple.html

August 21, 2016 at 9:28 PM

hi editorial team

can this widget work with multiple label searh
just like this format /search/label/LABEL1+LABEL2+

regards

September 9, 2016 at 5:18 AM

hey bro..my blogger posts does not show on home page plz help,,

Editorial Team MOD
September 10, 2016 at 9:26 AM

Please provide me your Blog URL?

Post a Comment

We’re eager to see your comment. However, Please Keep in mind that all comments are moderated manually by our human reviewers according to our comment policy, and all the links are nofollow. Using Keywords in the name field area is forbidden. Let’s enjoy a personal and evocative conversation.

Helping You to do Cool Things With Blogger Since 2012™.

© Copyright 2012 - 2018. MBL Networks, All Rights are Strictly Reserved.