Ocultar contenido en Blogger es algo muy fácil de hacer, solo debemos agregar un código en nuestras entradas en modo HTML. Es importante también que cuando se vaya a editar la entrada se haga en modo HTML, porque o sino se perderá el efecto, y será mejor volver a agregar el código. Un buen consejo es realizar primero la entrada, y al final pasar a modo HTML y agregar los códigos.
Los siguientes códigos corresponden a la forma de ocultar contenido con un texto y con una imagen.
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.
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>
0 comentarios: