Personalizar ''Leer más'' en Blogger

En un post anterior mostraba cómo habilitar el Continuar leyendo o Leer más en Blogger, en esta oportunidad mostraré como darle estilo a este enlace.


Por defecto se verá así:

Vamos a personalizarlo un poco:


Paso 1: Cambiando el mensaje:

Puedes usar un ''Leer más'', ''Seguir leyendo'', o lo que tú quieras, para cambiar este mensaje, deberás ir a ''Diseño/Elementos de la página'' y buscamos ''Entradas de Blog'', hacemos clic en ''Editar'':

En la zona superior de configuración, aparecerá una sección en la que deberás cambiar el mensaje:

Guardas los cambios y listo:

Paso 2: Aplicarle estilos al enlace:

Ahora que ya tenemos el mensaje que queremos, le aplicaremos estilos de tal forma que quede como un botón:

Primero vamos a ''Diseño/Edición HTML'' y buscaremos el siguiente código:

• ]]></b:skin>

Antes de este código, pega el siguiente:

.jump-link {
float:right;
background: #04B4AE; /* Color de fondo del botón */
border: 1px solid #000;
font-weight: bold;
padding: 1px 2px;
margin-left:20px;
}
.jump-link a {
color: #FFF; /* Color del texto */
text-decoration: none;
font-weight: bold;
}
.jump-link:hover {
background: #045FB4; /* Color de fondo al pasar el cursor */
border: 1px solid #000;
text-decoration:none;
}

Cambias los códigos de los colores a los deseados y guardas la plantilla.

Si no sabes cómo obtener los colores en hexadecimal, puedes utilizar esta tabla dinámica o si lo deseas puedes utilizar esta tabla estática de colores.

Variación: Cambiar ''Leer más'' por una imagen:

Si lo que deseas es utilizar una imagen en lugar de este botón, deberás hacer lo siguiente:

Primero vamos a ''Diseño/Edición HTML'' y expandimos las plantillas de artilugios.

Buscamos el siguiente código:

<data:post.jumpText/>

Lo reemplazas por:

• <img src="URL de la imagen"/>

En donde reemplazas URL de la imagen por la dirección de la imágen a utilizar, guardas los cambios y listo.

.