Customizing the Older and Newer Post Links in Blogger

Recently, I've received requests for tutorials on how to make changes to the "Older Posts" and "Newer Posts" links at the bottom of Blogger pages. So, I decided to bundle all the answers into one post. Today I'll show you how to move, style, and make changes to the text of your Older and Newer post links. Let's get to it!

Switch the Older and Newer Link Positions

It's undeniably odd that Blogger places the "Older Posts" link at the right of the page and the "Newer Posts" link at the left by default. But, it's also very easy to switch them around. Here's how:

Go to Template > Customize > Advanced > Add CSS and enter this in the "Add CSS" box:

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

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

Press the orange "Apply to Blog" button and you're done! Now the "Older Posts" link will be at the left and the "Newer Posts" link will be at the right.

Add Arrow Icons to the Links (or any other icon you like)

With a little bit of CSS, you can add arrows or other icons next to your Older and Newer links. Here's how:

First, upload your icon images to the Picasa album for your blog (or your favorite image hosting service). Keep that tab open while you work, you'll need direct links to those images to add the icons to your blog.

Next, go to Template > Customize > Advanced > Add CSS and enter one of the following sets of CSS in the "Add CSS" box.

If your Older and Newer link are in their default right and left positions, use this CSS:

.blog-pager-older-link:after {
content: url('IMAGE URL HERE');
}

.blog-pager-newer-link:before {
content: url('IMAGE URL HERE');
}

If you moved the Older link to the left and the Newer link to the right using the instructions above, use this CSS instead:

.blog-pager-older-link:before {
content: url('IMAGE URL HERE');
}

.blog-pager-newer-link:after {
content: url('IMAGE URL HERE');
}

Replace IMAGE URL HERE with the direct links to your icon images.

If you uploaded the image to Picasa, click into the full-sized version of your image and find the "Link to this photo" link near the bottom of the right column. If you see the "Select size" dropdown menu, set it to "Original size". Then, click the "Image only (no link)" option below the size menu. Copy the "Embed Image" link — it will be long!

If you don't see the "link to this photo" option, or if the options don't match what you see here, you can get your image's URL by right clicking it and selecting "copy image location" or "copy image URL" from the menu.

Change the Font of the Older Posts, Newer Posts, and Home Links

If you read my Blog Font Style series you probably already have a good idea of how to do this, but for those who missed it, here's how:

Go to Template > Customize > Advanced > Add CSS and enter this in the "Add CSS" box:

#blog-pager-newer-link,
#blog-pager-older-link,
.home-link {
font-family: 'YOUR FONT NAME HERE', FALLBACK FONT HERE;
}

Replace YOUR FONT NAME HERE with the name of your chosen font. You can either use a web-safe font, or you can use a custom font that you've installed in your blog (you can learn how to use Google Web Fonts in this tutorial).

Replace FALLBACK FONT HERE with your choice of fallback font. I'd recommend using serif or sans-serif. There are other fallback options, but they can be quirky.

Change the Text of the Older and Newer Post Links

If you want to change the links to say something other than "Older Posts" and "Newer Posts", you can! Here's how:

1. First, back up your template. Seriously, don't skip this step. Go to Template and click the "Backup/Restore" button in the upper right. Click the "Download full template" button on the next screen and save your template copy to your computer.
2. Next, click the "Edit HTML" button below your "Live on Blog" screenshot.
3. Then, place your cursor over your template code, click once, then press Control and F at the same time (PC) or Command and F (Mac) to open a search box inside your template (see screenshot below). Your browser's search feature won't find the code you need to find, you have to use the template search.
4. Enter <data:newerPageTitle/> in the search box and press enter. The code will jump to that line in your template's code and highlight it in yellow.
5. Delete the highlighted code and replace it with what you'd like the Newer link to say instead.
6. In the next code block, look for <data:olderPageTitle/>. Delete that and replace it with what you'd like the Older link to say instead.
7. Press the "Preview Template" button at the top of the template window and scroll down to the bottom of your page. You should see your Older link with its new text. If it's correct, press the orange "Save template" button.
8. After you've saved your template, view your blog and go to the second page. You should see your Newer and Older links both updated with your chosen text.