Poner un botón Spoiler en Blogger




Para los que no saben, entonces un spoiler es una herramienta un botón para mostrar o ocultar cualquier contenido para ahorrar espacio para colocarlo en los posts, es fácil colocar, no es nada de modificar nada extravagante en la plantilla, Como colocarlo:


  • En forma de botón:
<div><input value="Mostrar" onclick="if(this.parentNode.getElementsByTagName('div')[0].style.display != ''){this.parentNode.getElementsByTagName('div')[0].style.display = '';this.value = 'Ocultar Contenido';}else{this.parentNode.getElementsByTagName('div')[0].style.display = 'none'; this.value = 'Mostrar Contenido';}" type="button" /><div style="display: none;">AQUI EL CONTENIDO QUE QUIERAS OCULTAR</div></div>

El texto rojo lo puedes cambiar, donde pone "Mostrar" sera el nombre del botón, "Ocultar Contenido" sera el nombre del botón para cerrar el spoiler una vez abierto, y "Mostrar Contenido" el nombre del botón una vez abierto antes, y en el otro fragmento en rojo es donde debes colocar lo que quieres que se muestre al abrir el spoiler.

Para ponerlo en una entrada nueva le damos a Edición HTML y copiamos este fragmento en el lugar donde quieras mostrarlo.

Guarden y listo. Aqui un ejemplo:



AQUI EL CONTENIDO QUE QUIERAS OCULTAR
No solo podemos ocultar texto, también videos e imagenes:



Y también decir que podemos cambiar el botón por una imagen cual sea que queramos, para ello modificamos la URL donde se indica a continuación y colocamos la URL de la imagen que queramos que sea el botón

<div class="divspoiler">
<img src="URL de la imagen" onclick="if (this.parentNode.nextSibling.childNodes[0].style.display != '') { this.parentNode.nextSibling.childNodes[0].style.display = ''; } else { this.parentNode.nextSibling.childNodes[0].style.display = 'none';}" />
</div><div><div class="spoiler" style="display: none;">
Aquí el contenido que queremos ocultar
</div></div>

Quedaria asi:


Bueno y poco mas que decir, creo que esta información de spoilers esta bastante bien tenerla a mano, sencillo de hacer y viene muy bien.

Saludos y espero que les haya servido ;)

4 comentarios:

  1. Muchas gracias, muy práctico, queda muy bien.

    ResponderEliminar
  2. Gracias por el mini tuto, pero el boton con imagen no me funciona... ni tampoco el de tu ejemplo.

    Se agradece :D

    ResponderEliminar
  3. Ami tampoco no me funciona el de la imagen

    ResponderEliminar
  4. Muchas Gracias por el codigo de spoiler. Me funciono de maravilla.

    ResponderEliminar