How to change the format and text of "Newer Posts" and "Older Posts" from blog

Changing the way that these links look is very similar, you just add the same codes, except instead of 

display: none;

use the CSS element for the effect you want.   For example, to make the text bigger and bold, you might use rules like

font-size: 150%;
font-weight: bold;

You need to put these commands inside the curly brackets, where the display: none; is now - make sure that each component has a semi-colon at the end of it.   It makes the code easier to read if each component is on a new line, but this isn't necessary.

Another option is to swap the "float" commands around to put "older posts" on the left and "newer posts" on the right (I've never quite understood why they were the other way around).

You can also use background images and colours, with elements like:

background-image:url('URL OF YOUR IMAGE');

background-color:#cccccc;

f you want to change the text values - either to different words, or by replacing them totally with pictures, you need to accept the disadvantages of editing your template.   If this is ok, and you you want to proceed then: 

1  Edit your template in the usual way

2  Turn the Expand Widgets checkbox to ON (ie ticked)

3  Replace the existing links:

• To replace the "newer posts" link, find <data:newerPageTitle/>  in your template, and replace it with whatever text you want.   
• To replace the "older posts" link, find <data:olderPageTitle/>  in your template, and replace it with whatever text you want.   
• To replace the "home" link, find <data:homeMsg/>  in your template, and replace it with whatever text you want.   

In each case, the code you are replacing will be inside some other code, like this:

  <span id='blog-pager-newer-link'>
      <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
      </span>

Make sure that you only replace exactly the code listed above, including the < and >'s.   The other code around sets up the links to the actual older or newer posts, and you don't want to change this.

Also, if you want to use a picture instead, replace it with <img alt='...' border='0' src='THE URL OF YOUR PICTURE'/> - of course with the right picture URL put in.