Pensar en voz alta: ¿Cómo poner el "seguir leyendo" en tu blog?

A petición popular hoy he decidido dedicar el viernes de tutoriales a cómo poner el botón de "seguir leyendo" en tus post para que se abran como un acordeón.

Antes de empezar quiero advertir que con este botón, blogger no registra del todo bien cuanta gente lee el post porque técnicamente no se están metiendo en el link sino que lo están leyendo desde la página principal por lo que para que lo lea bien deberían darle al título del blog y no al botón. Si las estadísticas no son un problema para ti como no lo son para mi pues este es tu tutorial.

(Me gustaría decir antes de proceder, hoy que estoy editando este post, 17 de julio de 2026, que ya he dado con la solución para contrarrestar el problema que teníamos con este tipo de "seguir leyendo" por lo que después de este tutorial añadiré el otro. El problema es que con la versión que sí cuanta bien las personas que han entrado en tu post no se puede poner la animación interactiva, así que allá cada uno con sus preferencias a la hora de elegir el botón que desee)

Como siempre voy a poner el código que vas a tener que copiar en notas para modificarlo a placer y luego ya te explicaré cómo se pone:

<style>

/* BOTONES */

.seguir-btn-abuela, .cerrar-btn-abuela {

font-family: 'Slackey', cursive;

font-size: 00px;

color: #00000;

background: linear-gradient(90deg, rgba(0,0,0,0.2), #00000, rgba(0,0,0,0.2));

border: none;

padding: 6px 12px;

border-radius: 999px;

cursor: pointer;

display: inline-block;

margin-top: 10px;

transition: transform 0.2s ease, box-shadow 0.2s ease;

}

.seguir-btn-abuela:hover, .cerrar-btn-abuela:hover {

transform: scale(1.08);

box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);

}

.seguir-btn-abuela:active, .cerrar-btn-abuela:active {

transform: scale(0.97);

}

/* CONTENIDO OCULTO */

.mas-texto-abuela {

display: none;

}

</style>

<p>

Aquí va tu introducción visible del post...

</p>

<button class="seguir-btn-abuela">seguir leyendo</button>

<p>

Aquí va TODO el resto del contenido (puedes meter imágenes, spans, lo que quieras).

</p>

<button class="cerrar-btn-abuela">cerrar</button>

</div>

document.addEventListener("DOMContentLoaded", function(){

document.querySelectorAll(".post-box").forEach(post => {

const btnAbrir = post.querySelector(".seguir-btn-abuela");

const btnCerrar = post.querySelector(".cerrar-btn-abuela");

const contenido = post.querySelector(".mas-texto-abuela");

if(!btnAbrir || !btnCerrar || !contenido) return;

btnAbrir.addEventListener("click", () => {

contenido.style.display = "block";

btnAbrir.style.display = "none";

});

btnCerrar.addEventListener("click", () => {

contenido.style.display = "none";

btnAbrir.style.display = "inline-block";

});

</script>

Guay pues ahora te explico: donde pone "font-family: 'Slackey', cursive;" puedes cambiar el tipo de letra, pero recuerda que tienes que poner el nombre completo de la fuente porque sino no va. Después viene "font-size: 00px;" con el que cambias el tamaño de la letra y el color lo cambias con "color: #00000;".
¿Ves que el fondo es como si tuviese degradado? Pues e hace con esta parte "background: linear-gradient(90deg, rgba(0,0,0,0.2), #00000, rgba(0,0,0,0.2));" y tienes que poner en los dos rgba el mismo color y en el #00000 el color principal que quieras que tenga tu botón. Recuerda que para saber qué colores puedes usar puedes ir a HTMLcolorcode y verlos.

La siguiente parte modificable es "box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);" con la que le pones color a la sombrita que sale cuando pasas el cursor por encima del botón y lo tienes que poner en rgb.

El siguiente paso es el texto, esta es la parte más complicada tel tutorial pero te lo voy a explicar paso a paso con imágenes:

Primero escribe tu post con normalidad.

Después en el lápiz de arriba a la izquierda selecciona "Vista en HTML" y te saldrá una movida tal que así (en código, básicamente):

Ahora es cuando viene lo bueno. Tienes que decidir qué parte quieres que se vea y que parte no por lo que vas a seleccionar las partes EN CÓDIGO del escrito y en notas lo vas a pegar a tu código de la siguiente manera:

(imagínate que es la app de notas)

<style>

/* BOTONES */

.seguir-btn-abuela, .cerrar-btn-abuela {

font-family: 'Slackey', cursive;

font-size: 00px;

color: #00000;

background: linear-gradient(90deg, rgba(0,0,0,0.2), #00000, rgba(0,0,0,0.2));

border: none;

padding: 6px 12px;

border-radius: 999px;

cursor: pointer;

display: inline-block;

margin-top: 10px;

transition: transform 0.2s ease, box-shadow 0.2s ease;

}

.seguir-btn-abuela:hover, .cerrar-btn-abuela:hover {

transform: scale(1.08);

box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);

}

.seguir-btn-abuela:active, .cerrar-btn-abuela:active {

transform: scale(0.97);

}

/* CONTENIDO OCULTO */

.mas-texto-abuela {

display: none;

}

</style>

<p style="text-align: left;">Ejemplo ejemplo ejemplo ejemplo ejemplo ejemplo ejemplo ejemplo ejemplo ejemplo ejemplo ejemplo ejemplo ejemplo ejemplo ejemplo ejemplo ejemplo,</p>

<button class="seguir-btn-abuela">seguir leyendo</button>

<p style="text-align: left;">Ejemplo ejemplo ejemplo ejemplo. Ejemplo ejemplo ejemplo ejemplo ejemplo ejemplo ejemplo ejemplo ejemplo ejemplo ejemplo ejemplo ejemplo ejemplo ejemplo.</p><p style="text-align: left;">Ejemplo ejemplo ejemplo ejemplo ejemplo ejemplo ejemplo ejemplo ejemplo ejemplo ejemplo ejemplo ejemplo ejemplo ejemplo ejemplo ejemplo ejemplo ejemplo ejemplo ejemplo ejemplo ejemplo ejemplo ejemplo ejemplo ejemplo ejemplo ejemplo.</p><p style="text-align: left;">Ejemplo ejemplo ejemplo ejemplo ejemplo ejemplo ejemplo ejemplo ejemplo ejemplo ejemplo ejemplo ejemplo ejemplo ejemplo ejemplo ejemplo ejemplo.</p><p style="text-align: left;">Ejemplo ejemplo ejemplo ejemplo ejemplo ejemplo...</p><p style="text-align: left;">Ejemplo ejemplo ejemplo ejemplo ejemplo ejemplo ejemplo ejemplo ejemplo ejemplo ejemplo ejemplo ejemplo ejemplo ejemplo ejemplo ejemplo ejemplo ejemplo ejemplo ejemplo ejemplo ejemplo ejemplo ejemplo ejemplo ejemplo ejemplo ejemplo ejemplo ejemplo ejemplo ejemplo ejemplo ejemplo ejemplo ejemplo ejemplo ejemplo ejemplo ejemplo ejemplo.</p><div><div><br /></div></div>

<button class="cerrar-btn-abuela">cerrar</button>

</div>

document.addEventListener("DOMContentLoaded", function(){

document.querySelectorAll(".post-box").forEach(post => {

const btnAbrir = post.querySelector(".seguir-btn-abuela");

const btnCerrar = post.querySelector(".cerrar-btn-abuela");

const contenido = post.querySelector(".mas-texto-abuela");

if(!btnAbrir || !btnCerrar || !contenido) return;

btnAbrir.addEventListener("click", () => {

contenido.style.display = "block";

btnAbrir.style.display = "none";

});

btnCerrar.addEventListener("click", () => {

contenido.style.display = "none";

btnAbrir.style.display = "inline-block";

});

</script>

Bien, una vez hecho eso vas a borrar TODO lo que has escrito en el post anterior. Todo es todo. Y vas a pegar en la parte de "Vista en HTML" el código que has hecho junto con el texto que has escrito. y entonces, al volver a darle a "Vista en redacción" se verá así:

Ahora puedes añadir todos los colores, las imágenes y todo lo que se te ocurra respetando siempre los botones.

Cuando hayas terminado y lo publiques se debería ver así:

Lo he puesto de otro color para que veas cómo queda diferente.

Y pues ya estaría, la verdad es que es fácil pero es un tostón hacerlo cada vez que vas a escribir, pero bueno, ajo y agua.

Ahora haré el otro modo del que hable antes: las consecuencias de usar este modo es que no tendrá la animación que yo puse en mi botón pero por otro lado sí calculará cuanta gente leyó realmente tu blog.

Primero de todo vas a ir a "Tema" y en la flechita que hay al lado de "Personalizar" vas a buscar donde ponga "Editar HTLM". Una vez dentro le darás a cntrl+F para abrir la barra de búsqueda y pondrás:

<b:if cond='data:post.hasJumpLink'>

Ahora dentro de este trozo

<b:if cond='data:post.hasJumpLink'>

</div>

</b:if>

añadirás esto antes de los "</div></b:if>"

Donde pone lo de center/left/right elige uno para ponerlo, yo lo tengo en left, pero hay mucha gente que lo pone en center.

Una vez tenga el código vas a ir a ImgBB para subir la foto que quieras que salga, yo lo que hice fue captura del "seguir leyendo" que ya tenía y lo puse tal cual pero si quieres puedes hacerlo con Canva, Texto glitter o lo que más te guste.

Una vez subida la foto vas a seleccionar "HTML completo enlazado" y vas a copiar solo la parte del URL. Te pongo un ejemplo:

Para mi botón subí la captura y me salió este HTML completo pero solo seleccioné lo que esta en otro color

Eso que he seleccionado tienes que ponerlo donde pone "URL de la imagen" en el código que he puesto antes. Con todo hecho te debería quedar el código ya editado a tu preferencia tal que así:

<b:if cond='data:post.hasJumpLink'>

</div>

</b:if>

En donde está escrito heigth y width es donde podéis cambiar el tamaño, yo lo tengo a 35px x 165px, por si os sirve. Ahí lo vais amoldando a cómo os guste.

Para activarlo debéis darle a la barrita que hay en la barra de edición mientras estas escribiendo tu blog, donde eliges el tamaño, la fuente, si poner la letra en negrita o en cursiva, pues ahí, casi al final del todo, hay una raya y es la que lo activa.

Espero que os haya servido a todas y si tenéis alguna duda decidme por los comentarios <33 Nos vemoss