Bienvenido a mi blog. Aquí encontrarás todas las cosas que he creado e ido aprendiendo con el tiempo, útiles para ti y tu sitio web.

Ocultar y mostrar información

Este es un truco Blogger que aprendí en Ciudad Blogger (*0*). Muchas gracias m(_ _)m

"Ocultar y mostrar" (spoiler) es para, como su nombre lo dice, mostrar y ocultar. Se usa para ocultar información y a su vez mostrarla. Se puede usar en los post o sidebar, para ocultar texto, imágenes o incluso códigos (etc! se puede ocultar todo lo que desees).

Bueno aquí abajo (↓↓↓) podrás ver cada tipo de spoiler y su respectivo código:


SÓLO TEXTO


CÓDIGO (↓↓↓)

<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>


MOSTRAR Y OCULTAR COMÚN


CÓDIGO (↓↓↓)

<div class="divspoiler">
<input type="button" value="Mostrar" onclick="if (this.parentNode.nextSibling.childNodes[0].style.display != '') { this.parentNode.nextSibling.childNodes[0].style.display = ''; this.value = 'Ocultar'; } else { this.parentNode.nextSibling.childNodes[0].style.display = 'none'; this.value = 'Mostrar'; }" />
</div><div><div class="spoiler" style="display: none;">
Aquí el contenido que queremos ocultar
</div></div>


MOSTRAR CON IMAGEN


CÓDIGO (↓↓↓)

<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>


Nota:

  • Si estas haciendo estos códigos en una entrada (como yo, aquí) debes CONTINUAR en la pestaña 'HTML' y NO cambiar a 'Redactar' hasta que estés seguro que terminaste con el código y el contenido dentro de él.
  • O has como yo, abre un Blog de notas y escribe todos los códigos que vayas a usar y guárdalos. Luego copia copia todo en la entrada que estés editando (ojo en HTML no en Redactar).
  • Tampoco modifiques los espacios del código para que funcione correctamente.
  • Y por último modifica los códigos pintados en color rosado como más guste.



Fácil de usar ¿Verdad? Claro que sí. Espero que este tutorial haya sido de ayuda (^^). Por ahora me retiro, haré un poco de tarea. Regreso más tarde (/* 0*)/

5 comentarios:

  1. muchas gracias yo muy pronto pondre muchos tutoriales nuevos de cosas interesantes a y te kiero pedir un favor como pones eso de mmm como lo digo lo de bajar y subir eso ke esta en el lateral ke sube y baja no se si me entiendes

    ResponderEliminar
    Respuestas
    1. Hola Candela-chan, te refieres a "ENTRADAS RECIENTES"? a ese widget? (^^)

      Eliminar

HOME STAFF AFILIATE FOLLOW CONTACT
HOME STAFF AFILIATE FOLLOW CONTACT
Copyright© Nemuri Kuma | Powered by Blogger.
Design n' Blogger template by Kuma.