¿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.

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>

<div class="post-box">

  <!-- TEXTO VISIBLE -->

  <p>

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

  </p>

  <!-- BOTÓN -->

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

  <!-- CONTENIDO OCULTO -->

  <div class="mas-texto-abuela">

    <p>

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

    </p>

    <!-- BOTÓN CERRAR -->

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

  </div>

</div>

<script>

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>

<div class="post-box">

  <!-- TEXTO VISIBLE -->

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

  <!-- BOTÓN -->

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

  <!-- CONTENIDO OCULTO -->

  <div class="mas-texto-abuela">

    <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>

    <!-- BOTÓN CERRAR -->

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

  </div>

</div>

<script>

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.

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