COS-Blog

Cómo cambiar el diseño de tu botón Leer más

Última actualización: March 8, 2016

Cambiar el diseño de tu botón Leer más en la página de listado del blog puede ser muy útil si deseas que ese botón se destaque.

Ejemplo

Screen_Shot_2013-09-04_at_1.55.00_PM

Paso 1

Lo primero que debes hacer es crear una clase CSS que contendrá el diseño del botón «Leer más».

.read-more-btn{
			background: blue;
			border-radius: 10px;
			color: white;
			}
			

Paso 2

El segundo paso es agregar tu clase read-more-btn recién creada al enlace Leer más en la página de listado del blog. Ve al creador de plantillas y busca la plantilla de tu blog. En el módulo de contenidos del blog, haz clic en Editar opciones y aparecerá un código HTML. Ve a la sección HTML de la plantilla del listado del blog y busca el siguiente código:

<a class="more-link" href="">Read More</a>

Agrega la clase read-more-btn al enlace Leer más anterior. El código ahora debería verse de la siguiente manera:

<a class="read-more-btn" href="">Read More</a>

La siguiente captura de pantalla te muestra cómo se ve el código HTML para la plantilla del blog. Para acceder a este código, ve al creador de plantillas y busca la plantilla del blog. Una vez que hayas encontrado el código, al hacer clic en Editar opciones, puedes desplazarte hacia abajo hasta el HTML de listado para encontrar el enlace Leer más.

Screen_Shot_2013-09-04_at_3.33.16_PM