Skip to main content

How to change or remove the Newer Post and Older Posts links

This article explains how to hide or change the format of the "Older Posts" and "Newer Post" and "Home" links that are shown at the bottom of Blogger blogs with Layout or Designer templates.


Why are the older and newer posts links used

Most designer and layout templates have links at the bottom of your page of blog posts which let readers navigate back and forward among the list of posts.

This is basic to how a blog is intended to work:  you post regularly, and give people a way to get back to previous posts.

The pager-links are particularly important on pages that are reached using the Label or Archive gadgets, which may show more posts than you normally have on your home page, or displaying in your blog.

But some people want to remove them - and this is fine provided readers have other ways of navigating around the blog.


How to remove "Newer Posts" and "Older Posts" from your blog

To totally remove these items, you just add some new CSS rules to your template in the usual way.

To remove "Older Posts" add:
#blog-pager-older-link {
float: right;
}

To remove "Newer Posts" add:
#blog-pager-older-link {
float: right;
}

Or to remove both of them and the "Home" link that appears in between them, add:
#blog-pager {
display: none;
}

How to format the "Newer Posts" and "Older Posts"

Changing the way that these links look is very similar, you just add the same codes, except instead of 
display: none;
you need to use the CSS element for the effect you want.   For example, to make the text bigger and bold, you might use rules like
font-size: 150%;
font-weight: bold;

You need to put these commands inside the curly brackets, where the display: none; is now - make sure that each component has a semi-colon at the end of it.   It makes the code easier to read if each component is on a new line, but this isn't necessary.

Another option is to swap the "float" commands around to put "older posts" on the left and "newer posts" on the right (I've never quite understood why they were the other way around).


You can also use background images and colours, with elements like:
background-image:url('URL OF YOUR IMAGE');
background-color:#cccccc;

How to change the "Newer Posts" and "Older Posts" text


If you want to change the text values - either to different words, or by replacing them totally with pictures, you need to accept the disadvantages of editing your template.   If this is ok, and you you want to proceed then:

1  Edit your template in the usual way

2  Replace the existing links:
  • To replace the "newer posts" link, find <data:newerPageTitle/>  in your template, and replace it with whatever text you want.
  • To replace the "older posts" link, find <data:olderPageTitle/>  in your template, and replace it with whatever text you want.  
  • To replace the "home" link, find <data:homeMsg/>  in your template, and replace it with whatever text you want.   


In each case, the code you are replacing will be inside some other code, like this:
  <span id='blog-pager-newer-link'>
      <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
      </span>
Make sure that you only replace exactly the code listed above, including the < and >'s.   The other code around sets up the links to the actual older or newer posts, and you don't want to change this.

Also, if you want to use a picture instead, replace it with <img alt='...' border='0' src='THE URL OF YOUR PICTURE'/> - of course with the right picture URL put in.

Do make sure that the meaning of your pictures is obvious though - what may look like a cute "newer posts" symbol to you might be totally meaningless to someone else.


Related Articles

How to add a CSS rule to your template

How to edit your blogger template

Understand the advantages and disadvantages of template editing

Finding the URL of a picture in Picasa-web-albums

Understanding designer and layout templates
Labels:

Comments

Post a Comment

Share or Leave Your Comment

Popular posts from this blog

Putting files into Blogger's root directory

This article explains the issues, and options, for putting a file into the "root directory" of your Blogger blog. Turnips (Brassica rapa)  from Wikimedia commons Originally posted to Flickr   by thebittenword.com.   Licensed under the terms of  the cc-by-2.0. If you are using certain non-Google products to enhance your Blog, they will sometimes tell you to put a file into your root-directory .   They may even tell you to use an FTP  tool to do this. Sometimes this happens when a product also gives you code to install into your blog  , This approach is used when the code is written for websites in general rather than specifically to work with Blogger: putting useful files into a place relative to the root directory makes it a lot easier to move a website from a test-address to the live one, so is a common approach outside of Blogger. Or maybe the other tool has been designed to verify that you do own the website in this way, rather than asking...
Post a Comment
Read more

How to find the URL for a picture in Google Photos

This article describes how to get the URL or internet address of a picture in Google Photos, and the difference between Google's shareable links and URLs. Google Photos is a tool that help bloggers (and everyone else) to manage their picture collections. It replaces Google+ Photos, and works alongside Picasa-web-albums.   You can read more about it here . In Google Photos, there are two different types of web-address for a photo. One is the URL , and this can be used to refer to pictures from Blogger, or from other tools that want a link that just shows the photo, eg Twitter, Google Maps.  This is the traditional style of internet-address for a photo. The other is the shareable link.   This is what Google Photos provides from the Share function.   Shareable links can be used in Facebook, and other places where the photo that is being shared is displayed within a web-display, rather than just as a picture.   (Ref:   How to make and manage shareab...
Post a Comment
Read more

How to rename picture files in Picasa-desktop

This article is about re-naming files from within Picasa-desktop, to provide SEO benefits for your blog. Picasa's desktop software is a good tool for organizing and editing photos on your local computer.   And it is still available for you to use, even though Picasa-web-albums has been replaced by Google Albums + Google Album Archive. For pictures that are important in your blog, I still recommend preparing them in a tool like Picasa-desktop and then uploading the finished versions to Google Photos before putting them into a post, because: The desktop tool has better editing tools (cropping, zooming, auto adjustment, adding watermarks) and Picasa-web-albums does. It lets you control the size of the uploaded file It's easier to ensure sure that you still have full-size files on my local machine for printing etc, as well as smaller, more optimized, copies to use on web-pages. Picasa-desktop folders have a very nice relationship with files and directories with the Windows file s...
Post a Comment
Read more