Print Friendly and PDF

Cómo ocultar contenido en Blogger

Cómo ocultar contenido en Blogger - Charkleons.com
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 &#9660;&#9650;</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.

7 comentarios:

  1. Al final de un texto largo viene bien un botón para ocultarlo, como se hace?

    ResponderEliminar
    Respuestas
    1. Hola, 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.

      Eliminar
  2. Gracias 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.

    ResponderEliminar
  3. Soy 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

    ResponderEliminar
    Respuestas
    1. Hola, 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.

      Eliminar
    2. Hola, 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.

      Eliminar
    3. Hola, aquí está el tema » https://www.charkleons.com/2018/10/como-desvanecer-contenido-en-blogger.html Saludos.

      Eliminar

Gracias por comentar.

Charkleons.com