TUTORIAL BLOGGER | PERSONALIZA EL BOTÓN LEER MÁS

A veces nuestros posts son tan largos que debemos recurrir al botoncito de leer más o sigue leyendo (el texto lo elige cada uno). Yo hasta hace bien poco no le hacía ni caso, porque lo veía práctico sí, pero no del todo. Quedaba ahí al final del corte del post, pero en ningún momento te decía: ¡eh! ¡que estoy aquí! ¡haz click en mí para ver el post entero!. ¿No os ha pasado alguna vez? A lo mejor son manías mías jejeje. Así que lo que hice fue resaltarlo para que la gente se diese cuenta de que el post seguía. Y es tan fácil como copiar y pegar unos códigos. El elemento que buscamos se llama .jump-link. Y como es un enlace jugaremos con sus pseudo-clases .jump-link a y .jump-link a:hover (este último es el que modificará las propiedades del elemento al pasar el ratón por encima).

Lo que debéis hacer es ir a PLANTILLA - PERSONALIZAR - AVANZADO - AÑADIR CSS y copiar el siguiente código:

.jump-link{
font-size: 12px;
margin-top: 20px;
margin-bottom: 20px;
}

.jump-link a{
color: #ffffff;
background: #000000;
padding: 6px;
}

.jump-link a:hover{
color: #000000;
background: #eaeaea;
padding: 6px;
}

Una vez hecho, antes de aplicar los cambios al blog, modificad a vuestro gusto las propiedades. Y después aplicad los cambios, ¡tan fácil como eso! Ahora os dejo con algunos ejemplos para que veáis los resultados cambiando las propiedades (Pasad el ratón por encima de los botones).

LEER MÁS

/* Este es un botón con un padding de 0px (el fondo queda pegado al texto) */

.jump-link{
font-family: 'Trebuchet MS', sans-serif;
font-size: 20px;
margin-top: 20px;
margin-bottom: 20px;
}

.jump-link a{
color: #ffffff;
background: #000000;
padding: 0px;
}

.jump-link a:hover{
color: #000000;
background: #eaeaea;
padding: 0px;
}

LEER MÁS

/* Este es un botón con un padding de 6px */

.jump-link{
font-family: 'Trebuchet MS', sans-serif;
font-size: 20px;
margin-top: 20px;
margin-bottom: 20px;
}

.jump-link a{
color: #000000;
background: #ffeee3;
padding: 6px;
}

.jump-link a:hover{
color: #ffffff;
background: #f3f3f3;
padding: 6px;
}

LEER MÁS

/* Este es un botón con un padding de 6px y un borde negro de 2 px */

.jump-link{
font-family: 'Trebuchet MS', sans-serif;
font-size: 20px;
margin-top: 20px;
margin-bottom: 20px;
}

.jump-link a{
color: #000000;
background: #ffffff;
border: 2px solid #000000;
padding: 6px;
}

.jump-link a:hover{
color: #ffffff;
background: #82ceca;
border: 2px solid #000000;
padding: 6px;
}

En los ejemplos he añadido la propiedad font-family para el tipo de fuente, porque no quería que fuese la misma que el del texto del post, si vosotros queréis hacer lo mismo añadid esa línea. ¡Ah! el margin-top y el margin-bottom sirven para dar un poquito de espacio al botón y que no quede pegado al pie de página. ¿Qué os ha parecido el tutorial? ¡Que tengáis un buen Miércoles!