Los siguientes códigos corresponden a la forma de ocultar contenido con un texto y con una imagen. Los pueden usar en una entrada en modo HTML, o en un gadget HTML/Javascript. Importante: Si guardan la entrada estando en modo Redactar el código no funcionará en el tema publicado, para corregir esto solo deben Actualizar/Guardar el tema estando en el modo HTML. Pueden editar el tema pasando de modo Redactar a modo HTML y viceversa sin problemas, solo deben guardarlo/Actualizar en modo HTML.
Ocultar contenido con un texto
<div class="divspoiler">
<a href="javascript:void(0);" 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';}" >Mostrar / Ocultar ▼▲</a>
</div><div><div class="spoiler" style="display: none;">
Aquí el contenido que queremos ocultar
</div></div>
Ocultar contenido con una imagen
<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>
Cabe mencionar que al tener que agregarse el código en modo HTML, el contenido que ubiquemos dentro de él puede ir personalizado, es decir, admite contenido ya editado en su tipo de fuente, tamaño, color y otros, igualmente puede ir video incrustado, por ejemplo un código iframe de YouTube.
Ejemplos:
Texto
Imagen
El contenido de estos códigos o el código en sí, también puede ir centrado o dentro de un div de alineación, la forma básica de centrarlo sería agregando al inicio la etiqueta <center> y al final la etiqueta </center>.
En el código que muestra una imagen, podemos usar el código que muestra dos imágenes en una, tendríamos que reemplazar la parte en color verde.
<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>
Código con dos imágenes en una:
<div class="divspoiler">
<img src="URL Imagen que se visualiza" onmouseover="this.src='URL Imagen que cambia con Mouse';" onmouseout="this.src='URL Imagen que se visualiza';" 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>
Ejemplo:
Espero que esta información les sea muy útil.
Gracias.
Al final de un texto largo viene bien un botón para ocultarlo, como se hace?
ResponderEliminarHola, gracias por comentar. Me podrías pasar un ejemplo por favor, una página que muestre lo que comentas. Porque para ocultar contenido solo conozco lo que se plantea en este tema, pero podría según lo que vea decirte si es fácil hacerlo o no. Saludos.
EliminarGracias por tu amabilidad, en este enlace puedes ver la pagina de prueba en donde quiero replegar el texto, espero que entiendas lo que te quiero decir: https://rafael-villaverde.blogspot.com/p/seccion-1-lorem-ipsum-dolor-sit-amet.html. Espero tu respuesta y gracias de nuevo. Un saludo.
ResponderEliminarSoy Rafael Villaverde, corrijo el enlace, el bueno es el siguiente https://rafael-villaverde.blogspot.com/2016/07/naci-en-una-aldea-cercana-santiago-de.html#more
ResponderEliminarHola, para lo que comentas en mi opinión podrías usar las flechas de ir arriba y abajo, las que llevan al inicio y al final de la página. Por experiencia te comento que cuando se usa un gadget para ocultar contenido, también queda oculto para los buscadores, entonces las visitas a tu página para ese tema bajarían desde los resultados de búsqueda. En el momento no tengo un tema publicado sobre este tema, pero si gustas lo puedes encontrar en google como: «flechas para ir arriba y abajo blogger». Disculpa que no te pueda colaborar de una mejor manera. Saludos.
EliminarHola, ya encontré lo que necesitas, voy a hacer un tema nuevo ya que puedo resumir y facilitar el uso para los demás usuarios de lo que encontré (en inglés). Cuando lo publique te aviso. Saludos.
EliminarHola, aquí está el tema » https://www.charkleons.com/2018/10/como-desvanecer-contenido-en-blogger.html Saludos.
Eliminarbuenas noches amigo, estoy creando una pagina de series, y me vendria bien este metodo para ocultar el iframe de cada capitulo en una imagen pequeña asi no se verian 10 iframe en una misma entrada, es el mismo metodo? porque lo intente pero no me funciono, la imagen no me despliega el iframe
EliminarHola, gracias por comentar. Podría ser que haya de pronto una etiqueta div con el iframe, o al copiar y pegar el código haya faltado, o sobrado algún elemento. También recuerda que se debe guardar siempre en modo redactar. O que el código haya quedado dentro de otra etiqueta div, por ejemplo una para alineación o tipo de fuente, etc, esto anularía el funcionamiento del código. Espero que puedas solucionar este incoveniente. Saludos.
EliminarLlevo tiempo queriendo hacer algo similar en algunas de mis entradas, pero me gustaría que el acceso a esa información oculta se hiciese mediante contraseña. ¿Es eso posible? ¿Cuál sería en tal caso el código a implementar en la entrada en cuestión? Gracias de antemano. Un saludo.
ResponderEliminarHola, gracias por comentar. Disculpa la demora en la respuesta. No manejo ese tema, pero encontré algo que te podría servir » https://forobeta.com/temas/poner-contrasena-al-blog-a-una-entrada-o-pagina-de-el.549122/ Saludos.
EliminarMillones de gracias por responder tan rápido, y con tanto acierto. Estaba convencida de haberte respondido para agradecértelo, pero veo que no. Así que te pido disculpas. He echado un ojo al enlace que me indicas y aunque aún no lo he implementado, creo que es justo lo que andaba buscando.
EliminarUn saludo.
De nada, con el mayor de los gustos. Saludos.
Eliminar