How To Change Blogger Home, Older And Newer Post Links With CSS

Maybe some of you would like to customize these three Blogger links: Home, Older Posts, Newer Post, which are located below the blog post.

Just like what I have done to this blog.  You can see it right below this post.

Switch "Older and Newer Link Position

As it is, the "Older Posts" link is at the right of the page and the "Newer Posts" link at the left.

It is kind of odd, don't you think? Usually when we go to a new page of a book or newspaper, automatically we move our hand to the right side of the book or newspaper and flip it over, right?

Anyway, here is how to switch the Newer Post to the right and Older Post to the left.

1. Log  into your Blogger Dashboard.

2. Click on "Theme".

3. Click on "Advanced".

4. Click on "Add CSS".

5. Now paste the code below inside the box.

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

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

6. Now click on "Apply to blog" button.

7. That's all.

Change Font For Older Posts, Newer Posts, And Home Links

The procedure is the same as above from #1 to #4.

But this time you paste this code in the box:

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

Then click "Apply to blog" button.

* YOUR MAIN FONT NAME HERE means the font of your preferred choice. It has quote marks.

* FALLBACK FONT HERE means those fonts likely to be present on a wide range of computer systems. In case your key font cannot be displayed by some computers, then it will automatically use the these fonts.

Example: font-family: Helvetica, 'Arial', Verdana, Georgia, sans-serif;

The example above means the preferred font is Arial, while the rest are fall out fonts.

How To Increase And Bold The Font

1. Using the same code above, you just add these additional code (highlighted in red) just before this closing brace as shown here:

 }

#blog-pager-newer-link,
#blog-pager-older-link,
.home-link {
font-family: 'YOUR KEY FONT NAME HERE', FALLBACK FONT HERE;
font-weight: 900;
font-size: 15px;
}

* font-weight is to make the font bolder. You can increase or decrease the digit 900 to your preference.

* font-size is of course is the size of the font. You can adjust the number "15"  to some other digit of your choice.

Preview it before you saved it by clicking it on the "Apply to blog" button.

That's all.