Personalizar el enlace "Más información"

5:17 a.m.

Esta opción blogger la trae por defecto en todas las plantillas que instales, la cual es útil para mostrar una parte de la entrada y con solo dar clic a un pequeño texto que dice Más Información al final de la entrada nos dará acceso a toda por completo. Esto nos sirve para que podamos mostrar varias entradas en la pagina de inicio, y tu blog cargue mucho más rapido. También se puede utilizar el Leer más automático, que solo muestra un resumen corto y una pequeña miniatura.

Para activarlo solo hacemos click en su icono que se encuentra en el editor de entradas.

Claro que es posible modificar el texto si lo prefieres, solo tienes que ir a Diseño y haz click en Editar, en el cuadro de Entradas del blog y cambias el texto que dice Más Información por el texto deseado.

Ahora que ya sabes para qué sirve y cómo modificarlo, ¿Qué tal si lo personalizamos con un poco de CSS?...

Nos vamos Plantilla, Editar HTML y buscamos

<a expr:href='data:post.url + "#more"' expr:title='data:post.title'>

Y lo sustituyes por esto:

<a class='button' expr:href='data:post.url + "#more"' expr:title='data:post.title'>

Ahora para agregar el estilo CSS buscamos ]]></b:skin> y antes agregamos:

.button {
background: #00B0F0; /* Color de fondo del boton*/
text-decoration: none;
font-size: 14px; /* Tamaño de texto*/
padding: 2px 10px;
display: inline-block;
line-height: 31px;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}

/* Estilos al pasar el cursor sobre el boton*/

.button:hover {
background: #000; /* Color de fondo del boton */
color: #fff; /* Color de letra*/
text-decoration: none;
font-size: 14px; /* Tamaño de letra*/
padding: 2px 10px;
display: inline-block;
line-height: 31px;
}