Pesonalizar los links de Entradas Recientes, Pagina Principal y Entradas Antiguas

Generalmente no veo plantillas que tengan personalizados los links de "Pagina Principal", "Entradas Recientes" y "Entradas Antiguas". Para mi es parte importante de la navegación del visitante porque estos links, que quedan casi perdidos, pueden hacer que el usuario intereactue y siga viendo el blog, y asi evitar el porcentaje de rebote. Se que no es un factor determinante pero pequeñas cosas hacen un gran conjunto.
En esta ocasión vamos a darle un fondo con degradado en CSS, redondearemos los bordes, le daremos negrita al texto y cambiaremos su color y aplicaremos un efecto "hover" para que cambie al posicionar el cursor.

Esta función esta puesta en este mismo blog, es la de la imagen y la pueden ver yendo hasta el final.

El código esta probado en la plantilla simple de blogger y funciona en Chrome, Firefox e Internet Explorer salvo la función de redondear los bordes que nuestro amigo IE no reconoce... (como siempre IE arruinando nuestras vidas).

 Para aplicarlo deben ir a la edición HTML de la pantilla y justo antes de ]]></b:skin> deben pegar el siguiente código CSS:

.blog-pager a{
border-radius: 5px 5px 5px 5px; /* Bordes redondeados */
color: #585858; /* Color de texto */
display: inline-block !important;
margin-top: 5px;
padding: 5px 5px !important;
text-decoration: none !important;
font-weight:bolder;
font-size:12px; /*Tamaño del texto */
background-color:#fcfff4;  /* Color alternativo para versiones que no soporten degradados */
background-image:-webkit-linear-gradient(#fcfff4, #dfe5d7, #b3bead); /* Safari y Chrome */  
background-image:-moz-linear-gradient(top, #fcfff4, #dfe5d7, #b3bead);/* Firefox */
background-image:-o-linear-gradient(top, #fcfff4, #dfe5d7, #b3bead); /* Opera  */
filter:progid:DXImageTransform.Microsoft.gradient(startColorStr='#fcfff4', EndColorStr='#b3bead'); /* IE */  
}

.blog-pager a:hover{
background-color:#dfe5d7;  /* Alternativo para navegadores que no soporten degradados */
background-image:-webkit-linear-gradient(#b3bead, #dfe5d7, #fcfff4); /* Safari y Chrome */  
background-image:-moz-linear-gradient(top, #b3bead, #dfe5d7, #fcfff4);/* Firefox */
background-image:-o-linear-gradient(top, #b3bead, #dfe5d7, #fcfff4); /* Opera  */
filter:progid:DXImageTransform.Microsoft.gradient(startColorStr='#b3bead', EndColorStr='#fcfff4'); /* IE */
}


Para personalizarla a su gusto tengan en cuenta que los colores son esos que están después del # (Ej.: #b3bead). El que aparece e primer lugar es el esta desde arriba, el segundo es el color que queda en medio y el tercero es el que queda hasta abajo. Lo demás esta mismo en el código aclarado a la derecha entre "/* y */".

Espero les sirva de ayuda para personalizar su blog.
Gracias por pasar!