blogging design web design

Customize your Blogger’s Older and Newer Page Links

**Before making any changes to your blog be sure to download the most current backup/restore file.


It is a little weird that Blogger places the newer on the left and the older link on the right but with some simple code you can switch this.
 
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;}
Be sure to press the “Apply to Blog” button.

 

Replace the older/newer links with images



Go to your Picasa Album for your blogger (or whatever your favorite image hosting site is) and upload the photos you are going to use.
Go to Template > Customize > Advanced > Add CSS
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’);}

Replace the IMAGE URL HERE with the direct URL to your image.
Be sure to press the “Apply to Blog” button.

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 the IMAGE URL HERE with the direct URL to your image.
Be sure to press the “Apply to Blog” button.

 

Change the font of the older/Newer links.



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 a web safe font
Be sure to press the “Apply to Blog” button.


You’re Finished!

Did this help you? Looking for a code? Let me know below!

Blogger and software developer from Pennsylvania, USA. A lover of cosmetics, nature, tech, and animals. An appreciator of Earths' beauty and wonder.