How to Add Page Number Navigation Link in Blogger/Blogspot blog

by Aditya on March 27, 2009 · 23 comments

A blogspot/blogger blog whether hosted on a .blogspot domain or own domain, does not provide navigation option flexibility as offered by wordpress self-hosted blogs. In blogger, “Older Posts” and “Newer Posts” links are used for post navigation which occupies its place by default. However, there is a way to change this traditional style of “Older Posts” and “Newer Posts” style of page navigation with wordpress style of numbered page navigation. Below is a figure illustrating what sort of navigation I meant.

b1 How to Add Page Number Navigation Link in Blogger/Blogspot blogWe can change traditional blogger navigation to the above mentioned kind of navigation by using a CSS and Javascript hack written by Mohamed Rias.

To add the numbered blog page navigation, proceed as follows:

1. Login to blogger account.

2. Click on “layout” link for the blog which you would like the navigation style to be added.

3. Go to ‘Page Element’ tab if you are not taken automatically

4. Click on “Add a gadget” anywhere in the layout of your blog. This gadget’s position would be changed in the final step.

5. In ‘Add a gadget Window’, select option to add HTML/Javascript

6. In the title field add anything which can be used to identify your gadget.

7. In the ‘content’ text field, add the following code:

<style>
.showpageArea {
padding: 0 2px;margin-top:10px;margin-bottom:10px;
}

.showpageArea a {
border: 1px solid #505050;
color: #000000;font-weight:normal;
padding: 3px 6px !important;
padding: 1px 4px ;margin:0px 4px;
text-decoration: none;
}

.showpageArea a:hover {
font-size:11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;
}

.showpageNum a {
border: 1px solid #505050;
color: #000000;font-weight:normal;
padding: 3px 6px !important;
padding: 1px 4px ;margin:0px 4px;
text-decoration: none;
}

.showpageNum a:hover {
font-size:11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;

}
.showpagePoint {
font-size:11px;
padding: 2px 4px 2px 4px;
margin: 2px;
font-weight: bold;
border: 1px solid #333;
color: #fff;
background-color: #000000;
}

.showpage a:hover {
font-size:11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;
}

.showpageNum a:link,.showpage a:link {
font-size:11px;
padding: 2px 4px 2px 4px;
margin: 2px;
text-decoration: none;
border: 1px solid #0066cc;
color: #0066cc;
background-color: #FFFFFF;}

.showpageNum a:hover {
font-size:11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;
}
</style>

<script type=”text/javascript”>

function showpageCount(json) {
var thisUrl = location.href;
var htmlMap = new Array();
var isFirstPage = thisUrl.substring(thisUrl.length-14,thisUrl.length)==”.blogspot.com/”;
var isLablePage = thisUrl.indexOf(”/search/label/”)!=-1;
var isPage = thisUrl.indexOf(”/search?updated”)!=-1;
var thisLable = isLablePage ? thisUrl.substr(thisUrl.indexOf(”/search/label/”)+14,thisUrl.length) : “”;
thisLable = thisLable.indexOf(”?”)!=-1 ? thisLable.substr(0,thisLable.indexOf(”?”)) : thisLable;
var thisNum = 1;
var postNum=1;
var itemCount = 0;
var fFlag = 0;
var eFlag = 0;
var html= ”;
var upPageHtml =”;
var downPageHtml =”;

var pageCount=5;
var displayPageNum=3;
var firstPageWord = ‘First’;
var endPageWord = ‘Last’;
var upPageWord =’Previous’;
var downPageWord =’Next’;

var labelHtml = ‘<span class=”showpageNum”><a href=”/search/label/’+thisLable+’?&max-results=’+pageCount+’”>’;

for(var i=0, post; post = json.feed.entry[i]; i++) {
var timestamp = post.published.$t.substr(0,10);
var title = post.title.$t;
if(isLablePage){
if(title!=”){
if(post.category){
for(var c=0, post_category; post_category = post.category[c]; c++) {
if(encodeURIComponent(post_category.term)==thisLable){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}

postNum++;
htmlMap[htmlMap.length] = ‘/search/label/’+thisLable+’?updated-max=’+timestamp+’T00%3A00%3A00%2B08%3A00&max-results=’+pageCount;
}
}
}
}//end if(post.category){

itemCount++;
}

}else{
if(title!=”){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}

if(title!=”) postNum++;
htmlMap[htmlMap.length] = ‘/search?updated-max=’+timestamp+’T00%3A00%3A00%2B08%3A00&max-results=’+pageCount;
}
}
itemCount++;
}
}

for(var p =0;p< htmlMap.length;p++){
if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
if(fFlag ==0 && p == thisNum-2){
if(thisNum==2){
if(isLablePage){
upPageHtml = labelHtml + upPageWord +’</a></span>’;
}else{
upPageHtml = ‘<span class=”showpage”><a href=”/”>’+ upPageWord +’</a></span>’;
}
}else{
upPageHtml = ‘<span class=”showpage”><a href=”‘+htmlMap[p]+’”>’+ upPageWord +’</a></span>’;
}

fFlag++;
}

if(p==(thisNum-1)){
html += ‘&nbsp;<span class=”showpagePoint”><u>’+thisNum+’</u></span>’;
}else{
if(p==0){
if(isLablePage){
html = labelHtml+’1</a></span>’;
}else{
html += ‘<span class=”showpageNum”><a href=”/”>1</a></span>’;
}
}else{
html += ‘<span class=”showpageNum”><a href=”‘+htmlMap[p]+’”>’+ (p+1) +’ </a></span>’;
}
}

if(eFlag ==0 && p == thisNum){
downPageHtml = ‘<span class=”showpage”> <a href=”‘+htmlMap[p]+’”>’+ downPageWord +’</a></span>’;
eFlag++;
}
}//end if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
}//end for(var p =0;p< htmlMap.length;p++){

if(thisNum>1){
if(!isLablePage){
html = ‘<span class=”showpage”><a href=”/”>’+ firstPageWord +’ </a></span>’+upPageHtml+’ ‘+html +’ ‘;
}else{
html = ”+labelHtml + firstPageWord +’ </a></span>’+upPageHtml+’ ‘+html +’ ‘;
}
}

html = ‘<div class=”showpageArea”><span style=”font-size:11px;padding: 2px 4px 2px 4px;margin: 2px 2px 2px 2px;color: #000000;border: 1px solid #333; background-color: #FFFFFF;” class=”showpage”>Page ‘+thisNum+’ of ‘+(postNum-1)+’: </span>’+html;

if(thisNum<(postNum-1)){
html += downPageHtml;
html += ‘<span class=”showpage”><a href=”‘+htmlMap[htmlMap.length-1]+’”> ‘+endPageWord+’</a></span>’;
}

if(postNum==1) postNum++;
html += ‘</div>’;

if(isPage || isFirstPage || isLablePage){
var pageArea = document.getElementsByName(”pageArea”);
var blogPager = document.getElementById(”blog-pager”);

if(postNum <= 2){
html =”;
}

for(var p =0;p< pageArea.length;p++){
pageArea[p].innerHTML = html;
}

if(pageArea&&pageArea.length>0){
html =”;
}

if(blogPager){
blogPager.innerHTML = html;
}
}

}
</script>

<script src=”/feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999″ type=”text/javascript”></script>

8. Click ‘Save’ button

9. Drag this new gadget right below “Blog Posts” element.

b2 How to Add Page Number Navigation Link in Blogger/Blogspot blog

10. Click on “Save button”

Important to know:

• For those who are using self-hosted domain name, modify the .blogspot.com and 14 (13 characters of domain name + 1) in the line of var isFirstPage = thisUrl.substring(thisUrl.length-14,thisUrl.length)==&quot;.blogspot.com/&quot;; accordingly.

• The value in the line of var pageCount =5; determines the number of posts to be shown on each page.

• The value in the line of var displayPageNum = 3; defines the number of page links in the navigation bar to be displayed (e.g. 1 – 2 – 3).

About Aditya: Aditya is a 16 year old online entrepreneur living in India. He is the founder and editor of Tech Ravings, a blog sharing latest apps and services from the tech world.Get more from Aditya on Twitter.

Subscribe to TechRavings

Full RSS FeedEmail
Follow Aditya on Twitter

Other Articles Of Your Interest

{ 23 comments… read them below or add one }

Aditya March 27, 2009 at 5:09 pm

How to Add Page Number Navigation Link in Blogger/Blogspot blog – http://tinyurl.com/cecwfp

Reply   More from author

Timaini March 27, 2009 at 11:43 pm

It will be helpful when I start a blog. BTW, a your twitter follower

Reply

Vandy March 27, 2009 at 6:15 pm

RT @anddjournal: How to Add Page Number Navigation Link in Blogger/Blogspot blog – http://tinyurl.com/cecwfp

Reply   More from author

Lazz April 2, 2009 at 4:35 am

Hi. This is exaclty what I am looking for. Unfortunately, it doesn’t seem to work.
The quotation marks look odd, for example:
var html= ”;
should be
var html=”
or
var html=”";

Let me know what you think about this problem.
Thanks!

Reply   More from author

sayem April 2, 2009 at 5:34 pm

nice post. but still it’s not working………….
please help

sayem’s last blog post..Internet Download Manager 5.16

Reply   More from author

db April 17, 2009 at 4:19 am

I got it to work fine, though I only have a border around the Page (x) of (y) element. Maybe my border color is askew somewhere. Also I get two different text styles when the script changes from first page to last page. Still trying to figure out how to jazz it up some too.

Reply   More from author

kim April 23, 2009 at 11:24 am

I followed the direction and still can’t get it working…. can you please help me? I’ve been trying for a week now.

Reply

Aditya April 23, 2009 at 11:45 am

what problem are you facing?

Reply   More from author

pixelshots May 3, 2009 at 9:36 pm

Not workin friend….

my blog is http://www.pixelshots.blogspot.com

i want to display 10 page links below each posts…can u send me the working code..

my mail is pixelshots@gmail.com

Reply   More from author

michael May 13, 2009 at 8:55 am

not working

michael’s last blog post..Five Tips on How To Increase Traffic

Reply   More from author

Rick May 17, 2009 at 12:21 am

(okay one last try)

(resending to fix html code… sorry)

Don’t waste your time with this page numbering workaround. It will NOT work.

If you need proof, just click to either of the blogs I’ve listed below. There you will see hundreds of comments from people who tried to use the same or similar widget in hopes of getting snazzy page numbering, but all they got instead was extreme frustration.

Bloggerbuster Post – August 2008

dacoolhunter.blogspot.com Post – December 2008

One of the people who commented provided this reasoning for why the widget will never work and can’t be fixed:

“The code appears to rely on post timestamps, and if you post two posts on one day, it doesn’t recognize this fact. So if the two posts on one day end up spanning two pagination pages, then it repeats the posts and leaves out one other post.

Unfortunately, I think that this is a problem that can’t be fixed, but I may look into it. There has got to be a better way to select the posts other than by date.”

Good luck!

RICK

Reply

davvut July 9, 2009 at 10:49 am

I maked page naviation for blogger in my blog.This is my blog :Page Navigation

Reply   More from author

SEO Services July 11, 2009 at 3:39 am

Wow! This is sooo cool, I would love to try it on all my blogger blogs. I’ve been trying to figure out how to do this but unfortunately I’m no code geek LOL.

Nice blog post, I’ll bookmark this for future reference. Thanks again :D

Reply   More from author

Franheit July 11, 2009 at 10:37 pm

Cool, but unfortunately it is not working correctly many of my Posts been skipped n many Link are Broken ;{

Reply

ramesh July 16, 2009 at 11:05 am

Great info but, some guys are complaining that this code will not works..so any other method you’ve friend.

Your best friend ramesh

Reply   More from author

CCCP July 28, 2009 at 7:00 am
ashish August 11, 2009 at 5:23 pm

Not Working……..it show only title of widget…..
Please Help

Reply   More from author

Fulgencio August 19, 2009 at 11:09 am

Thanxs a ton

Reply   More from author

GlenStef September 2, 2009 at 11:40 am

Everything dynamic and very positively! :)
GlenStef

Reply   More from author

mbn September 11, 2009 at 8:28 am

Check this BLog for Good example pcimage.blogspot.com & how to add Page number is showing here

Reply   More from author

balau December 22, 2009 at 3:00 pm

see this link to select all ideas about page numbers

Reply   More from author

muhafiz January 30, 2010 at 2:30 am

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

Reply   More from author

Hayden Eck February 27, 2010 at 4:41 pm

Hi,

I am using this coding to get a numbered page navigation….

But I am facing problem, I can’t able to set custom HTML widget just below blog post section.

So pl guide me how I can add this widget?

Reply   More from author

Leave a Comment

Additional comments powered by BackType