BLOGGER: ADDING BACKGROUND COLOR TO OLDER AND NEWER POSTS LINKS

So you find the "Older post" and "Newer post" links at the bottom too plain and you want to beautify them so that they don't look left out by the rest of the elements of your blog? We often neglect them since we don't see them a lot. We tend to focus on what we see first-- the header. Of course, we want to make a good impression to our readers but let's be consistent and just be beautiful and from our header to our footer, okay? :D

So here's what you can do to beautify these links:

Add a background color to each link. You can style them differently from each other if you wish. 

To style the "Older post" link, go to Template Designer > Advanced > Add CSS. Add these lines below:

 .blog-pager-older-link {  
 display:block;  
 background-color: #a6a2a4;  
 padding: 10px;  
 -webkit-border-radius: 5px 5px 5px 5px;   
  -moz-border-radius: 5px 5px 5px 5px;   
 border-radius: 5px 5px 5px 5px;   
 cursor: pointer;   
 }  
 a.blog-pager-older-link {  
 color:#ffffff;  
 }  

Once done, you should be able to produce something like this:
 
So here's a list of properties whose values need to be changed if you want to style it according to your taste:

1. background-color: [the background color of the link, which now looks like a button]
2. padding [the space between the text and the border]
3. radius [roundness of the button, well, technically it's a background color]
4. color [the text color]

Now let's try to change the background color of the link on mouse over

Add the codes below

 a.blog-pager-older-link:hover {  
 text-decoration:none;  
 background: #f6139e;  
 color:#ffffff;  
 }  

On mouse hover its color should look like this:

Things you can change:

1. background [background color on mouse over]
2. color [text color on hover]

Now we're done styling the Older post link! Let's move on to Newer post link.
It's pretty much the same except that you have to change the selectors. So instead of
.blog-pager-older-link
a.blog-pager-older-link
a.blog-pager-older-link:hover

CHANGE THEM TO:
.blog-pager-newer-link
a.blog-pager-newer-link
a.blog-pager-newer-link:hover

That's for styling the "Newer Posts" link. Yep, easy! You just have to change everything that says older to newer and style it differently if you want.

Next post will be Changing The Older Posts and Newer Posts links to Images. Not much CSS styling this time! Most work will be done on your favorite photo editor, or you may also grab buttons from the web. Happy blogging y'all!