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.

Comentarios

Charkleons.com

Entradas populares de este blog

¿Qué animal soy en el Horóscopo Chino?

Colores HTML

Animales internos y Animales secretos