Cómo Agregar el Botón "Seguir leyendo" en Blogger

¿Quieres mejorar la apariencia de tus publicaciones en Blogger y facilitar la lectura de tus artículos? Agregar un botón de "Seguir leyendo" es una excelente forma de hacerlo. En esta guía te enseñaré paso a paso cómo lograrlo.

Paso 1: Accede a tu cuenta de Blogger

Inicia sesión en tu cuenta de Blogger y selecciona el blog en el que deseas hacer el cambio.

Paso 2: Edita una Publicación

1. Ve a Entradas en el menú de Blogger.
2. Abre la entrada en la que quieres agregar el botón de "Seguir leyendo" (o crea una nueva entrada).

Paso 3: Inserta el Salto de Página

1. En el lugar donde quieras que se corte la vista previa de tu publicación, coloca el cursor.
2. Si estás trabajando en modo vista de redaccion: En la barra de herramientas de la entrada, busca el ícono de Insertar salto de página

3. Haz clic en el ícono, y verás que se inserta una línea con la palabra "Leer más".
4. Si estás trabajando en modo vista de html, escribe el siguiente texto:

<!-- more -->

Paso 4: Guarda y Visualiza

1. Guarda los cambios y publica (o actualiza) la entrada.
2. Ve a la vista del blog para asegurarte de que el botón de "Leer más" aparece donde lo deseas.

Personalización del Texto (Opcional)

Por defecto el texto aparecerá en inglés para personalizarlo:

1. Ve a Diseño > Principal > Entradas del blog > Editar.

2. Modificamos el texto:

Personalización del Botón (Opcional)

Para cambiar el estilo del botón de "Seguir leyendo", puedes agregar algo de código CSS personalizado:

1. Ve a Tema > Personalizar > Avanzado > Agregar CSS.
2. Pega el siguiente código para cambiar el estilo del botón:

.jump-link{
	font: normal 12px 'Lora', serif; /*Fuente y tamaño del Texto*/
	letter-spacing: 2px;
	text-align: center;
	text-transform:uppercase;
	margin-top: 40px;
	margin-bottom: 60px;
}
.jump-link a{
	color:#FFF; /*Color texto*/
	background:#000; /*Color fondo del texto*/
	border:1px solid #ddddd3; /*Color del borde*/
	padding:12px 30px; /*Espaciado alrededor del texto*/
}
.jump-link a:hover{
	color: #000;/* Color del texto al pasar el cursor*/
	background:#fff;/* Color de fondo al pasar el cursor */
	border:1px solid #ddddd3;
	text-decoration: none;
}

¡Listo!

Si quieres leer más tips