como-hacer-desplegable-parte-entrada-post-tutorial-blogger-crear pagina de faqs

Cómo añadir SPOILER en un post [mostrar | ocultar] Tutorial Blogger

Tutorial Blogger: Hacer desplegable una parte de tu entrada/post crear página de paqs

A veces queremos ocultar un Spoiler en nuestra entrada, cómo añadir spoiler, o bien queremos hacer desplegable una parte del texto sin más, y por ello traigo este tutorial tan sencillo para que puedas lograrlo en tu blog de Blogger.

También se le llama acordeón, por que funciona más o menos así, como un acordeón de texto.

En muchas ocasiones esta funcionalidad de acordeón o desplegable se usa para las preguntas frecuentes, o FAQ’s de tu web o blog. Resulta muy útil por que no hace que nuestro post o página sea demasiado largo y a la vez crea un diseño muy atractivo para la lectora o el lector.

Os comparto dos formas distintas de lograrlo, una con script, y otra sin él. La mejor manera siempre es sin script, por que el script ralentiza la carga de la página, pero es cosa de preferencias al fin y al cabo, así que te dejo las dos opciones.

Este tutorial está super completo, para que puedas lograr lo que quieres, pero es cierto que si no tienes unos conocimientos básicos de código te costará personalizarlo o colocarlo donde realmente quieres. Presta atención a los vídeos que completan el tutorial para que entiendas mejor cómo funciona.

Cómo insertar un acordeón o desplegable en una entrada o página de tu blog sólo con CSS

cÓMO AÑADIR DESPLEGABLE O ACORDEON EN MIS ENTRADAS PARA OCULTAR SPOILER O AÑADIR PÁGINA DE FAQS

Para esta opción no puedes tener en tu entrada ningún formulario con “input” por que le damos estilo al input en este caso. Así que, es bueno para páginas donde no tenemos formulario de suscripción pero no te funcionarán ambas cosas en una entrada con formulario de suscripción. Todo tiene sus pros y sus contras.

De todas formas es mucho más recomendable usarlo sin script, así que si puedes, elige esta forma de crear el desplegable o acordeón.

  • Para usarlo simplemente creamos o editamos nuestra entrada/post o página y nos vamos a la parte de HTML, arriba a la izquierda.
  • Ahí debemos pegar el siguiente código:
<br/><br/>
<div class="tab"> 
<input id="tab-one" type="checkbox" name="tabs"> 
<label for="tab-one">Sección 1</label> 
<div class="tab-content"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque.</p> </div> 
</div> 

<div class="tab"> 
<input id="tab-two" type="checkbox" name="tabs"> 
<label for="tab-two">Sección 2</label> 
<div class="tab-content"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque.</p> </div> 
</div> 

<div class="tab"> 
<input id="tab-three" type="checkbox" name="tabs"> 
<label for="tab-three">Sección 3</label> 
<div class="tab-content"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque.</p> </div> 
</div> 
<br/><br/>
 
<style> 
.tab { 
position: relative; 
margin-bottom: 1px; 
width: 100%; 
color: #fff; 
overflow: hidden; 
} 
input{ 
position: absolute; 
opacity: 0; 
z-index: -1; 
} 
label { 
position: relative; 
display: block; 
padding: 0 0 0 1em; 
background: #8fb59e; 
font-weight: bold; 
line-height: 3; 
cursor: pointer; 
} 
.tab-content { 
max-height: 0; overflow: hidden; 
color:#000; 
background: #fff; 
-webkit-transition: max-height .35s; 
-o-transition: max-height .35s; 
transition: max-height .35s; 
} 
.tab-content p { 
margin: 1em; 
} 
/* :checked */ 
input:checked ~ .tab-content { 
max-height: 10em; 
} 
/* Icon */ 
label::after { 
position: absolute; right: 0; top: 0; display: block; width: 3em; height: 3em; line-height: 3; text-align: center; -webkit-transition: all .35s; -o-transition: all .35s; transition: all .35s; 
} 
input[type=checkbox] + label::after { 
content: "+"; 
} input[type=radio] + label::after { 
content: "25BC"; 
} 
input[type=checkbox]:checked + label::after { 
transform: rotate(315deg); 
} 
input[type=radio]:checked + label::after { 
transform: rotateX(180deg); 
} 
</style>
  • Ahora toca editar el texto de las secciones. Recuerda que seguimos en la parte HTML del post.
  • Si quieres añadir o eliminar secciones, solo debes añadir o eliminar la suiguiente parte, fíjate donde empieza y donde termina.
<div class="tab">       
<input id="tab-two" type="checkbox" name="tabs">       
<label for="tab-two">Sección 2</label>       
<div class="tab-content">         
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque.</p>       
</div>     
</div>  

Esa es la parte del código que crea el desplegable con el texto dentro.

  • Después de tener lista esta parte, puedes ir a “Redactar” y añadir antes o después del código el resto de la entrada.

Ver vídeo tutorial paso a paso para añadir desplegable css en una entrada del blog

Cómo añadir un spoiler a un post o insertar un acordeón o desplegable en una entrada o página de tu blog con script

Así se vería este tipo de acordeón:

Cómo insertar acordeón o desplegable en mi blog entrada o página tutorial blogger

Para realizar este tutorial debes seguir el paso a paso para no tener problemas. Además debes editar el HTML de tu entrada o página. Con lo cual te recomiendo que, si puedes, hagas primero esta parte, y luego añadas el texto que acompañe, imágenes o lo que sea. Pero primero inserta este código completo en HTML para que luego no tengas que editar nada. Si no lo haces así puede que te cueste mucho más trabajo, ya que cuando editamos el HTML de nuestra entrada y luego volvemos a “Redactar” y luego de nuevo a “HTML” pueden sufrir cambios en el código que luego son muy difíciles de identificar si no entiendes de código. Más abajo explico más detalles.

Hay dos formas de hacerlo. Si lo vas a usar en varias páginas lo mejor es que lo hagas como esta primera opción si solo lo haces en una entrada, sigue el siguiente, al final de este.

La estructura de código que usaremos es la siguiente:

<button class="accordion">SECCIÓN 1</button>
<div class="panel">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

<button class="accordion">SECCIÓN 2</button>
<div class="panel">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

<button class="accordion">SECCIÓN 3</button>
<div class="panel">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

Vamos a usar este código en un bloc de notas, para escribir todo lo necesario y prepararlo y luego copiarlo y pegarlo en nuestra entrada.

Antes de editarlo en nuestro block de notas vamos a añadir el estilo CSS en nuestra plantilla y el script que hace que funcione.

  • Toca editar nuestra plantilla así que vamos a Tema, hacemos una copia de seguridad y le damos luego a Editar HTML y luego buscamos en plantilla el siguiente código (si no sabes cómo, mira este vídeo)
b:skin

El segundo enter, osea, el segundo resultado , es el que nos interesa.

  • Justo antes de los dos corchetes de cierre :
]]></b:skin>
  • Escribimos lo siguiente:
.accordion {
    background-color: #eee;
    color: #444;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 15px;
    transition: 0.4s;
}

.active, .accordion:hover {
    background-color: #ccc;
}

.accordion:after {
    content: '02B';
    color: #777;
    font-weight: bold;
    float: right;
    margin-left: 5px;
}

.active:after {
    content: "2212";
}

.panel {
    padding: 0 18px;
    background-color: white;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
}
  • Y guardamos.

Como siempre sabes que puedes editar a tu gusto. Colores (#444 y #ccc y similares), tipos de letra  y puedes añadir todo lo que consideres.

En este ejemplo tienes la SECCIÓN que es el título y un párrafo.

  • Para crear párrafos dentro de la sección podemos usar <p> aquí dentro el párrafo </p> o también usar la etiqueta de espacio, que es como un “enter” y se escribe de la siguiente forma: <br/>
  • Para crear listas escribimos <li> para abrir la línea de lista y </li> para cerrar la línea de lista.
  • Es importante que cuando edites este tipo de contenido no cambies en tu entrada de “Redactar” a “HTML” por que Blogger suele molestar incluyendo más código o influyendo en él de manera negativa y puede que luego no funcione de forma adecuada. Por ello os recomiendo hacerlo primero en un block de notas.

Ahora debemos insertar el script que hará que funcione.

  • Para ello en nuestra plantilla buscamos (si no sabes buscar un código en tu plantilla mira este vídeo)
</body>
  • Justo encima pegamos el siguiente script
<script>
var acc = document.getElementsByClassName("accordion");
var i;


for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    if (panel.style.maxHeight){
      panel.style.maxHeight = null;
    } else {
      panel.style.maxHeight = panel.scrollHeight + "px";
    } 
  });
}
</script>
  • Guardamos plantilla y listo

  Cuando tengas en tu block de notas el primer código de esta parte del tutorial preparado lo insertas en la entrada en la parte de HTML, y luego vas a “Redactar” y redactas el resto de la entrada, antes o después de tu zona de desplegable.    Si controlas un poco de código podrás insertarlo donde quieras, después de redactar todo el post. Pero si no controlas también puedes redactar primero toda la entrada y luego insertar en la parte HTML al final de todo, la parte desplegable y listo. Esto ya es cosa de tus conocimientos en el tema.

Añadir spoiler en un post, el desplegable con script a una sola página

Para esto es muy sencillo por que solo debemos editar el post en el que queremos insertar el desplegable o acordeón de texto.  

  • Vamos a crear o editar nuestra entrada y le damos a HTML arriba a la izquierda.
  • Luego pegamos el siguiente código:
  <br/><br/>
<button class="accordion">SECCIÓN 1</button> 
<div class="panel">   
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> 
</div> 
<button class="accordion">SECCIÓN 2</button> 
<div class="panel">   
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> 
</div> 
<button class="accordion">SECCIÓN 3</button> 
<div class="panel">   
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> 
</div>
<br/><br/> 
<style> 
.accordion {   
background-color: #eee;   
color: #444;   
cursor: pointer;   
padding: 18px;   
width: 100%;   
border: none;   
text-align: left;   
outline: none;   
font-size: 15px;   
transition: 0.4s; } 
.active, .accordion:hover 
{   
background-color: #ccc; 
} 
.accordion:after {   
content: "02B";   
color: #777;   
font-weight: bold;   
float: right;   
margin-left: 5px; 
} 
.active:after {   
content: "2212"; 
} 
.panel {   
padding: 0 18px;   
background-color: white;   
max-height: 0;   
overflow: hidden;   
transition: max-height 0.2s ease-out; 
} 
</style> 
<script> var acc = document.getElementsByClassName("accordion");   var i;   for (i = 0; i < acc.length; i++) {     acc[i].addEventListener("click", function() {       this.classList.toggle("active");       var panel = this.nextElementSibling;       if (panel.style.maxHeight) {         panel.style.maxHeight = null;       } else {         panel.style.maxHeight = panel.scrollHeight + "px";       }     });   } </script>
  • Edita la parte de secciones que quieres crear. Cada sección va desde <button class=”accordion”>  hasta </p> </div> . Puedes copiar la sección y pegarla si quieres añadir más, o borrar desde el código de principio hasta el último como te he dicho. La sección es así siempre:
<button class="accordion">SECCIÓN 1</button> 
<div class="panel">   
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> 
</div>
  • Luego de editar esa parte ya puedes pasar al “Redactar” y completar el post encima o debajo de las secciones.

Ver vídeo tutorial paso a paso para añadir spoiler desplegable con script en una entrada del blog

  -VÍDEO PENDIENTE-              

Esto es todo, espero que te haya resultado útil. Recuerda que me ayuda muchísimo que compartas en tus redes sociales, que comentes y me recomiendes!! Muack!!

Comparte

CONSIGUE

LA VIDA QUE DESEAS

GRACIAS A UN NEGOCIO ONLINE RENTABLE

Disfruta de mi curso gratuito “Cómo tener un Negocio Online Rentable no solo económicamente”, en el que comparto las áreas más importantes a trabajar para conseguir la vida que deseas con tu Emprendimiento Online.

Interacciones con los lectores

19 comentarios

  1. Arcandres

    Siempre me gustó el truquito del checkbox, te ahorra el evento click aunque es un poco sucio usarlo sólo para eso, digo yo :$

    Te comento que HTML5 nos permite hacer esto de una forma nativa sin necesidad de Javascript con los elementos <details> y <summary>, no sé si se podrá animar con CSS ya que no me he dado la tarea de investigar a fondo pero vale la pena tenerlo en cuenta.

  2. Etérea

    ¡Hola Mónica!
    Te he dejado un tweet con mi problema a la hora de introducir los FAQs en Blogger, y es que me corta todo lo que quiero introducir en cada sección, ¿qué tendría que tocar en el modo de añadir desplegable solo en una página?

    Supongo que por aquí es más difícil de entender a lo que me quiero referir pero en twitter (con el usuario eterilina22) te he adjuntado una imagen de como se queda.

    Gracias de antemano, ¡me encanta este modo de adicción de información sin que con el consentimiento del lector tenga que spoilearse o para que se entere de aquello que quiere y no tenga que estar leyéndolo todo! Es una forma original de organizar los posts.

    Un saludo 😀

    Etérea

  3. Kat Wish Books

    ¡Hola! me ha gustado tu entrada pero me ha surgido un problemilla intento hacer el tipo de añadir spoiler pero en el html del tema de mi blog, como lo indicaste en el vídeo desde tab hasta el } pero solo me sale todo el código sobre la cabecera de mi blog, ¿crees que podrías agregar a este post de qué manera se agrega el primer tipo (el que es medio verde y se despliega) en el html general del blog, de donde a donde, buscando qué y así? Por favooooooor♥ Te lo agradecería mucho, desde ya te lo agradezco xD pero te lo agradecería más jajajaj!♥
    Un beso y un abrazo! n.n

    • monicalemos

      Holaaa!!! es que no puedo ayudar a todo el mundo 🌍 es imposible, y yo trabajo creando identidades de marca y páginas webs profesionales, pero aquí tenéis todo el paso a paso con video tutorial y todo!!! mucho ánimo!!! 🖤✨🤗

  4. Ƹ̴Ӂ̴Ʒ Rebeca Gonzalo Ƹ̴Ӂ̴Ʒ

    ¡Hola, Mónica!:

    He aplicado esto en mi plantilla, incluyendo el CSS en el HTML de la misma, y por alguna extraña razón entra en conflicto con algunos de los elementos que se visualizan en ella y adapta el estilo al que figura en el nuevo código insertado. Además me desplaza hacia abajo la barra de navegación con las pestañas y sobre ella inserta una línea horizontal con una flecha. En cambio si aplico tanto el estilo como el códido con el div del spoiler en la "plantilla" de las entradas esto no me sucede. Así que me he tenido que decantar por eso al final.
    Igualmente gracias por tu tutorial. Me parece magnífico.
    Un abrazo.

  5. Rebeca Gonzalo

    Como siempre formidablemente explicado. Pero tengo una consulta, ¿sería viable esto mismo pero usando una contraseña? Realizo un reto mensual en mi blog, y a modo de recompensa a los usuarios más participativos me gustaría que tuvieran acceso a información privilegiada, como por ejemplo comodines o similares, pero obviamente no quiero que todo el mundo pueda acceder a esos beneficios. Así que lo ideal sería poder ocultarlos mediante contraseña. Si se puede realizar, ¿cuál sería el código a aplicar? Sería sólo para algunas entradas, y para una parte de ellas, no para el post completo.

    En fin, un saludo. ¡Feliz 2019, por cierto!

  6. SkySilver

    Hola Monica, use el método CCS, le cambie el color todo bien, pero en el momento de poner el texto que quiero ocultar este sale cortado, solo muestra unas 6 lineas (dependiendo del tamaño de la letra).
    No sé que hacer para arreglar esto, si me pudieras ayudar te lo agradecería mucho

  7. Anónimo

    ¡Hola! He usado tu primer método para poner un acordeón en una entrada de mi blog y funciona correctamente, pero por algún motivo hay algo en el código que hace que cuando esa entrada esté visible, en los gadget de la sidebar que utilizan algún tipo de caja en la que puedes escribir (como el de buscar o el de seguir por e-mail)desaparece dicha caja. He probado con más gadget, o añadirlos directamente mediante HTML y siguen sin aparecer siempre que la entrada con el acordeón esté visible.
    ¿Sabrías decirme por qué ocurre esto?
    Muchas gracias de antemano.

  8. Graficas Mutual

    Hola Como estas?-

    Soy muy principiante en el tema y la verdad intente muchas veces pero no logro aumentar la cantidad de spoilers en la lista,
    solo son tres pero necesito incorporar mas, que parte debería modificar?, te agradezco mucho tu aporte.

    • Camilo

      Hola.
      Para agregar otro spoiler debes copiar esto: Considera que donde dice “two” debes escribir el número que corresponda ese spoiler en específico. Por ejemplo si vas a colocar un cuarto spoiler, debes escribir four, si agregas la quinta, escribes five…

      Sección 2

      TEXTO o CONTENIDO OCULTO

  9. Rebeca

    A la hora de intentar implementar esto en el HTML de la plantilla del blog se genera un error. Con lo cual me he decidido a insertarlo en la entrada, pero una vez ahí, aunque aparentemente se visualiza, por alguna extraña razón al pulsar sobre el ’02B” yo lo he sustituido por ‘+” y en after el “2212’ por un ‘-‘, no sale contenido alguno, y eso que he comprobado varias veces haber insertado el texto en la parte pertinente entre y. En fin, seguiré inverstigando.

    Gracias, no obstante, porque si llego a hacerlo funcionar me parecerá formidable, la verdad.

    • monicalemos

      Hola Rebeca, te recomiendo que sigas el paso a paso tal cual en el tutorial. ¡Funciona! y como bien dices el resultado es impecable 🙂
      ¡Ánimo!

Deja tu comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *