Knowledge is good only if it is shared. As a new blogger, I had learned to change the Web template, and found out the tips, tricks, hacks, and tweaks of altering the Blogger template, customizing CSS, widgets, layout, blog design, inserting JavaScripts, HTML codes, Google AdSense, and other settings the hard way, through many trials and errors. For the purposes of this guide, I had started with the old Blogger “Minima” template. As I made the changes or learned something new, I had documented them. Before changing any template, please remember to save a copy of the current template. After editing the template, preview it, and save it when you are satisfied with the change. Hope this guide will help those who are finding the way around, just like me.

Search Tips for New Bloggers

We have extended our month-long vacation by a couple of days. We shall be posting articles the moment we return. We noticed that Google had updated the Page Ranks. New bloggers who have been waiting anxiously for this can check their blogs' Page Ranks. We have the PR checker link in our SEO Tools - Search Engine Optimization article.

The blog we created recently in Aug 2007, Blogger FAQ and Help, has also got its first Page Rank, a PR4. All our blogs are now ranked:-

Tips for New Bloggers - PR6
Business Fables and Management Lessons - PR4
Famous Motivational and Inspirational Quotes - PR4
Blogger FAQ and Help - PR4

Thanks to everyone for the support!

May 4, 2007

Digg This Story

Remove Older Post and Posts (Atom) Links

In the new default Blogger templates, you will see at the bottom of the page the words “Subscribe to: Posts (Atom)”. On every other page, you there are the words “Newer Post”, “Home” and “Older Posts”. These serve a good purpose. Nevertheless, some people may like a neater layout by removing these links and this guide will discuss the simplest method that involves minimal change to the template.

Older Post, Home and Newer Post links

Remove Older Post and Posts (Atom) Links

When there is an older post than the post on the page, Blogger automatically displays a link to the older post. Similarly, if there is a newer post, there will be a link to that post. If you are writing a serial story, where one chapter leads to another, this is a good navigational tool for your readers. However, for many of the blogs, like ours, readers are interested in particular topics. They will look at the article list, labels or tags that you have in your site and are not likely to browse through every single article. Removing these links therefore makes sense and may make your Blog less cluttered and unsightly.

Do note that Blogger displays 20 posts on the page. If you have, for example, 30 posts bearing a certain label, people clicking that label will only see the latest 20 posts. To view the remaining 10 posts, they have to click the “Older Posts” link.

If you choose to remove these links, login to your Dashboard. Go to Template -> Edit HTML. Scroll to where you see this and add the codes (in red):-

#blog-pager-newer-link {
display: none;
}

#blog-pager-older-link {
display: none;
}

#blog-pager {
display: none;
}


What we have done is simply to tell the browser not to display these links. Should you change your mind in future, simply remove the codes (in red) and you will see the links again.

Note that these CSS styles are what you see in the new Blogger templates. If yours is an old template or a modified version, you can try looking for headings that look similar to the above. Always Preview the template before saving. In that way, if you don't like it, you can choose to Clear Edits.

Change the text or replace with pictures

Instead of removing these links, if you wish to change the text from “Older Posts” or “Newer Posts” to some other words, or to have them replaced by pictures, you may refer to the article on Status Message and Older Post picture link. In that article, we discuss as well how you can switch the positions of the links by having the Older Posts link on the left and the Newer Posts link on the right.

Posts (Atom) links

Remove Older Post and Posts (Atom) Links

Under Settings -> Site Feed, when you click the “Advanced Mode”, you are able to determine the settings for your Blog Posts feed and Comment feeds. You may syndicate a Short or Full version of your contents, but it is not advisable to select None for your Blog Posts feed. Depending on your settings, there will be a feed link at the bottom of your Blog Posts for readers to Subscribe to: Posts (Atom) and/or Comments (Atom).

Remove Older Post and Posts (Atom) Links

While this link is useful, readers can easily subscribe to your feed via their browsers. Also, if you have signed up with feed aggregator services like Feedburner which we use, they will provide you with better landing pages for your would-be subscribers in addition to nicer chicklets which you can place on your Blog for readers to add the Blog feed. As you can see on this page, putting the feed subscription tools on the sidebar may catch more attention than a link right at the bottom of the page.

Should you wish to remove this feed link, go to Template -> Edit HTML, scroll to this style definition and add the code (in red):-

.feed-links {
display: none;
}


Again, note that we are merely telling the browser not to display the feed link. Other sites may suggest different methods like deleting the detailed style definitions or adding comment tags to “b:include name='feedLinks'”. They do work, but we think that it is better not to mess around with the template too much. The above code is simple enough and can be easily reversed if you wish to show the feed link.

© Tips for New Bloggers

Found this article useful? Mention us in your post, subscribe to our feed, link to us, or bookmark this site. Thanks for your support!AddThis Social Bookmark Button

34 comments:

Juanmanuel Lopez said...

amazing! thanks! really! ^^

Andrew said...

Exactly what I was looking for (to remove subscribe to: link at the bottom). Thanks!

Candace Dempsey said...

Hi, this worked great to me. I wanted to remove the atom line but keep the home-older-newer line. Did that.

Now I am wondering. How can I get rid of the big gap between the last post at bottom of page and the next element (in this case, the Italian video gadget). There's just a lot of unnecessary space on the home page.
You can see here
http://womanatthetable.blogspot.com/

bizwhiz said...

Hi Candace

If you want to reduce the gap slightly, look for this and reduce the margins and paddings to 1 or 0.5 -

.sidebar .widget, .main .widget {
margin:0 0 0.5em;
padding:0 0 0.5em;

Pl preview the template before saving.

RRAAJJ said...

Hi, Thanks for all the info.

I am windering, how can I remove the
"Showing posts with label NAME-of-LABLE. Show all posts"

Link from the top of post.

krissie said...

i was actually looking how to add the "older" "newer" thing to my blog.

ive been messing with it for a really long time so i dont have the

}
#blog-pager-newer-link {

}

anywhere in my template... Help?

bizwhiz said...

Hi krissie

In a Minima template, you will find this:-

.deleted-comment {
font-style:italic;
color:gray;
}

#blog-pager-newer-link {
float: left;
}

#blog-pager-older-link {
float: right;
}

#blog-pager {
text-align: center;
}

.feed-links {
clear: both;
line-height: 2.5em;
}

You may add them into your template and see if you are able to see the older/newer links as well as the subscribe to feed link. If you don't, let me know. It could be that you have also deleted the details in the later part of the template.

bizwhiz said...

Hi RRAAJJ

We have discussed how you can remove the status message in our new article Status Message and Older Post picture link.

poojitha said...

This Blog was very helpful thanks,i'm a frequent visitor

Ricardo said...

thank you so much! works like a charm!

D. Elizabeth said...

I'm hosting our wedding website on Blogger, and I'm doing everythig I can to make it as "unblog-like" as possible. So this was exactly what I needed.

Seriously, you have helped me make my blogs so personalized, just how I wanted them. Everything I've learned about html, I've learned here.
=) So grateful.

Nikop said...

It was the code what i was looking for: "Remove Add to Atom feed -link"

Thank you!

Wombaticus said...

Fantastic, thanks for the great advice.

brblife.com said...

hey bizwhiz, can you send me your email address, i need to ask you about adding the older/newer post links at the bottom of the main page (without switching to new blogger).
thanks

bizwhiz said...

Hi brblife

If you have something to ask, ask here. We have stated that our guides are for the new Blogger templates only.

fonts said...

very good! you have done a good job. Exactly what I was looking for (all) Thanks!

Nomanymore said...

Hi!

I'd like to ask sthing. I have Classic (old) blogger, I've added

#blog-pager-newer-link {
float: left;
}

#blog-pager-older-link {
float: right;
}

#blog-pager {
text-align: center;
}

& it seems not work, I'd like to know if I have to switch to new blogger?
If possible is there anyway to add 'older' 'newer' posts without switching ?

Thanks

Dadzer said...

Works perfectly; thanks for the tip!

Dadzer

Cindy, the Original Wheelgirl said...

This is great. I was wondering if there was a way to decrease the number of posts that are shown on the page after you click "older posts". 20 seems excessive.

AmyC said...

Hi there. Thank you so much for this post. I'm actually looking to ADD the older posts link at the bottom. It's not there, and I don't ever recall it being there. I'm using the Minima, and I added in the code that you mentioned, but nothing happened.

Any ideas on what to do next?

baby~amore' said...

hi thanks for the great blogger tips

.feed-links {
clear: both;
line-height: 2.5em;
}

where do I add the code to remove the atom feed -

display -none

also In Minima template - I have changed to three column and the navbar/background content screen width to 910 - can you please advise me.
the scroll bar at bottom scrolls across but not showing all 3 columns on the screen.

Billy said...

Hi, bizwhiz, if only you knew how long I've been searching for a way to get rid of that ugly grey results bar - 'there are 3 posts that match....'

Your method worked first time. Thank you.

Thing is, it was more the appearance of the bar that disgruntled me, and I would rather have been able to edit it so that it fitted with my design better, rather than hide it altogether.

Any suggestions?

ConsciousFlex.com said...

Thank you this helps a lot but I was wondering if you could tell me how to put the "older posts" and "newer posts" at the top of every article post above the title? That would save me a lot of work and time. I would appreciate it very much as I am sure many others would too.

Jesper petersen said...

Exactly what I was looking for.
Digg / All News, Videos, &
Images

kiM said...

hello bizwhiz, is thr any way to add the older/newer post links at the bottom of the main page for old blogger...

your blog is really helpful!!!Thanks

John Treadgold? said...

For my blog the 'about me' section is very important.

However i can't seem to change the formatting. I can't insert new paragraphs or change the font.

I have tried including html in the body text but it won't accept it??

Posy said...

I realize this was discussed over a year ago, but this is the only place I've come close to an answer, so here goes.

I downloaded a new template from Amanda at bloggerbuster.com. It has all of the code that you typed on your post but for some reason "older, home & newer" shows up at the top of my page (under the header) rather than on the bottom. any help? I really want it at the bottom like my old template.

my address is http://polkadotmama.blogspot.com
Thanks.

J.J. said...

I can't find the lines of code you mention. Can you help?
My website: http://www.domainlists.eu/

Anonymous said...

I have a problem of another type. I created several blogs and in the first one I posted the pieces of text, which are links to the individual articles published in another blog. That is to say journalist style. So instead of deleting the older/newer/main links I want to redirect them, or in other words, to make the link "main" lead to ANOTHER PAGE. How can I do that. I know that I need to deal with this part of my blog

b:if cond='data:blog.homepageUrl != data:blog.url'
a class='home-link' expr:href='data:blog.homepageUrl' data:homeMsg

writing another wed adress instead of 'data:blog.homepageUrl' did not really help. Thank you in advance

Anonymous said...

Hi there, how can I remove only the Home link, but keep the Older/Newer Posts?

And also manipulate the Older/Newer Posts font/color/size?

r.

Ankit said...

I have

#blog-pager-newer-link {
float: left;
margin-left: 29px;
}

#blog-pager-older-link {
float: right;
margin-right: 16px;
}

#blog-pager {
text-align: center;

in my template but still I am not getting link to older posts.

Swedeheart said...

Hi Bizwhiz, your sites are great: I've only ever used the internet for sending emails before, that's about how technically gifted I am, but in spite of being a new blogger and not knowing the first thing about html I've managed during the past week to get myself a favicon, make links open in a new window, add tiny icons to the links in the sidebar, combine an immobile image with an animation, add a link-to-site text box and remove the Posts (Atom) thingy - just using your sites. Thank you so much - my blog is turning into the oasis I want it to be.

Just one more thing left to adjust and perfection must surely ensue: I want to keep the older posts/newer posts links, but the older-link is too close to the sidebar (aesthetically speaking) - have a look-see at my site:

http://swedehearthaiku.blogspot.com/

...and you'll see what I mean. This is what the html code looks like, and my question is how can I somewhat reduce the gaps between the word Home and the two "floats" respectively?

Thanks in advance!


#blog-pager-newer-link {
float: $startSide;
}

#blog-pager-older-link {
float: $endSide;
}

#blog-pager {
text-align: center;
}

dcloud said...

My friend, after searching Google for many moons I have to say a big THANK YOU for this great article. As you said everyone else suggests removing the detailed style definitions, but I agree we should just leave those alone.

Also, you were the only one to point out that the ".feed-links" is already in the CSS section of the template code - everyone else said to copy and paste that style in the template.

Gennita said...

Thank you for such clear instructions. I wonder whether there is a way to set a limit to the number of older entries being linked? For example, when a reader click "older posts," I would like them to read only one or two, instead of 20, posts.

Thank you.