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!
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:
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.
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:
If you moved the Older link to the left and the Newer link to the right using the instructions above, use this CSS instead:
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.
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:
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.
If you want to change the links to say something other than "Older Posts" and "Newer Posts", you can! Here's how: