Cómo personalizar el botón leer más en Blogger

En esta ocasión les mostrare como personalizar el botón de leer más y para esto primero debemos tener habilitada la opción de “Salto de Línea” en alguno de nuestros post. Si tú ya cuentas con un salto de línea para personalizar ve al “Paso 2” y si no vamos a agregarlo de la siguiente manera.

Paso 1.- Abrimos el post que queramos y posicionamos el puntero del mouse en el lugar que necesitamos incluir el salto de línea y en seguida presionamos el icono que parece una hoja cortada por la mitad, tal y como se muestra en la siguiente imagen.

Clic sobre la imagen para ampliar.

En la siguiente comparativa podemos ver como luciría nuestro post SIN un salto de línea y la apariencia que tendría si agregamos el salto de línea. Por lo regular los saltos de línea se usan para ahorrar espacio a la hora de mostrar nuestros post y de esta forma tener un blog más ordenado.

Clic sobre la imagen para ampliar.

Como pudieron ver en la imagen anterior, una vez que nuestro post cuenta con un salto de línea, aparece la opción de “LEER MÁS” y esto es lo que vamos a personalizar a nuestro gusto.

Paso 2.- La primer personalización que haremos es el texto que nos gustaría mostrar a los lectores de nuestro blog, para esto iremos a la opción de “Diseño” y en el recuadro dedicado para nuestros post, daremos clic en “Editar” y se abrirá una nueva ventana con varias opciones, pero la que más nos interesa por ahora es la que dice “Opciones de la página principal”, aquí podemos ver el número de post o entradas que queremos mostrar en la página principal de nuestro blog y el texto que aparecerá cuando insertemos un salto de línea.

Clic sobre la imagen para ampliar.

Por default siempre aparece el texto “Leer Más”, pero podemos cambiarlo para que diga “Seguir leyendo”, “Ir al artículo”, etc. esto dependerá de cada uno de ustedes yo para este ejemplo solo lo dejare en mayúsculas y recuerden que una vez modificado del texto tenemos que dar en “Guardar”, para que los cambios se apliquen al blog.

Paso 3.- Ahora lo que haremos es ir a la opción “Tema” o “Plantilla”, entrar a “Editar HTML”, dar clic dentro del código de nuestra plantilla, presionar las teclas Ctrl+F y en el recuadro de búsqueda escribir lo siguiente:

]]></b:skin>
Justo encima del texto que acabamos de encontrar vamos a pegar lo siguiente:

/* 1UpMonkeys_Botón (1) Leer Más
----------------------------------------------- */
.jump-link{
font: normal 12px 'Arial', serif; /*Fuente y tamaño del Texto*/
letter-spacing: 2px; /*Espacio entre letras*/
text-align: center; /*Alineación del texto*/
text-transform:uppercase; /*Texto en Mayúsculas*/
margin-top: 40px; /*Distancia del margen superior*/
margin-bottom: 60px; /*Distancia del margen inferior*/
}
.jump-link a{
color:#ffffff; /*Color texto*/
background:#607D8B; /*Color fondo del texto*/
border:1px solid #ddddd3; /*Color del borde*/
padding:12px 30px; /*Espaciado alrededor del texto*/
}
.jump-link a:hover{
color: #000000; /*Color del texto al pasar el cursor*/
background:#ffffff; /*Color de fondo al pasar el cursor*/
border:1px solid #ddddd3; /*Color del borde*/
text-decoration: none;
}
Debe de quedarnos algo así una vez que pegamos el código en el editor HTML del blog:

EXPLICACIÓN El código que acabamos de insertar en nuestra plantilla o tema del blog, consta de 3 partes: .jump-link, aquí se agregan todas las características con las que contara el texto de “LEER MÁS”, como el tipo y tamaño de fuente, espacio entre letras, alineación, etc. en caso de no necesitar alguna de estas características solo hay que borrar la línea completa o modificar los valores de cada uno de ellos y así solo mostrar solo lo que más nos guste. . jump-link a, incluye el color de texto para el botón “LEER MÁS”, el color de fondo, color de borde y el tamaño del botón que se mostrara. Todos los colores se deben de escribir en hexadecimal. .jump-link a:hover, contiene las mismas características que el anterior, solo que estas se mostraran únicamente al momento de pasar el puntero del mouse por encima del botón de “LEER MÁS.

Paso 4.- Ya solo tenemos que dar clic en “Guardar tema” e ir a nuestro blog para ver el resultado final. Ahora cada vez que insertemos un salto de línea en nuestros post, estos tendrán el botón de “LEER MÁS” con la misma apariencia que personalizamos anteriormente.

"GRACIAS POR TU VISITA"

---

Si te gusto este artículo sobre “Cómo personalizar el botón leer más en Blogger”, por favor compártelo con tus conocidos, en tus redes sociales y sobre todo no olvides dejar un comentario, todo esto me será de gran ayuda para seguir mejorando la calidad del blog.

---