Inicio Condiciones de Uso Mapa del sitio ▼ Ayuda Blogger Afiliación ¡Enlázame! Vótanos en... ▼ Contáctame Acerca de...

lunes, 8 de agosto de 2011

Spoilers en blogger

Muchas veces tenemos un contenido muy extenso, que es preferible ocultar hasta que el lector decida leerlo, para esto se utilizan los Spoilers, que son botones que al hacer clic sobre ellos muestran un contenido oculto, esto ya puede ser vídeo, imagines, tablas, texto o cualquier otro elemento.
Hoy vamos a aprender a añadir Spoilers a nuestras entradas y también a personalizarlos

SPOILER DE BOTÓN:

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


¡Hola! Soy un contenido oculto dentro de este Spoiler de botón, si quieres dejar de verme, pulsa de nuevo en el botón.

SPOILER DE 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 quieras ocultar</div></div>


SPOILER DE IMAGEN, tan sólo cambia lo que está en verde, por la URL de la 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 quieras ocultar</div></div>


Recuerda que tras poner estos códigos en las entradas, no debes volver a la opción Redactar de la misma, sino, no funcionarán correctamente.
Si te funciono el truco o te gusta el post, un comentario se agradece.

18 comentarios:

  1. Pana te mande el mensaje de intercambio de links y aun no respondes, ya puse tu banner en el mio si queres aqui esta el de 150x150

    http://dowpic.com/images/70621569243434821113.jpg

    mi web ya te la mande en el mensaje por el formulario de contacto

    ResponderEliminar
  2. Eso está bien para blog de series o películas que comentan el contenido y ocultan datos para que la gente no se dea cabezazos en la pared.

    Un abrazo.

    ResponderEliminar
  3. La verdad es que es una buena herramienta para ocultar cosas, gracias por comentar.
    Saludos,
    Óliver.G

    ResponderEliminar
  4. Perdón Simon, es que llevo el tiempo un poco atareado y apenas puedo entrar a publicar algo en el blog.
    Ya mismo te enlazo,
    Óliver.G

    ResponderEliminar
  5. Gracias Oliver!
    Ya mismo voy a probarlo en mi blog de prueba.
    Después vuelvo y te cuento cómo salió.
    Un abrazo cordial.
    Elsa

    ResponderEliminar
  6. De nada Elsa, me alegro de que te sirviera,
    espero que te sirva para lo que quieres, espero noticias pronto.
    Un abrazo,
    Óliver.G

    ResponderEliminar
  7. Oliver, estoy probando con una página. Puse un vídeo, quedó excelente. Pero,pero...en la MISMA PÁGINA, quiero ocultar UN TEXTO, y ya no sale. Seguro tiene que ver con "no volver a la opción REDACTAR", pero no te entiendo qué es.
    ¿podrías indicarme?
    Un beso.

    ResponderEliminar
  8. Vale Elsa, es muy fácil, cuando estás escribiendo un entrada o una página, en la parte superiro derecha de donde escribes te da dos opciones, la primera dice Edición de HTML y la otra Redactar, para poder agregar los Spoilers debes ir a la de Edición de HTML, seguro que eso lo sbaias porque sino no te hubiera funcionado ninguna vez, pero una vez que metas esos códigos, no vuelvas a la opción de Redactar.

    Eso mismo me paso al intentar poner los ejemplos esta mañana para esta entrada, y después tuve que volver a hacerla de nuevo, porque el Spoiler no funcionaba, realmente no se porque sucede eso.

    Espero que lo entendieras,
    Óliver.G

    ResponderEliminar
  9. Era así, Oliver...quedó perfecto.
    Mira:http://aulaelsa1062.blogspot.com/p/fisica-quimica.html.

    Antes probé con una imagen,pero salió grande y en ella no dice Mostrar/Ocultar.
    Pero,con tiempo lo intentaré.
    Me encantó esto.No te imaginas qué útil me será para esas páginas tan extensas.
    (Sólo hice dos, ahora debo irme al colegio).
    MUCHAS GRACIAS!!!
    Elsa

    ResponderEliminar
  10. Es que esa imagen la hice yo con el word, con un cuadro de texto y luego la subi a blogger :)
    Me alegro de que al final te sirviera, quedó muy bien :)
    ¿Ya te vas al colegio? Bueno... es que por mi reloj son las 10 de la noche xD
    Un abrazo,
    Óliver.G

    ResponderEliminar
  11. Buen cambio de imagen le has hecho, ahora es mucho más agradable de leer, auque echo de menos no tener a mano los post anteriores (3 o 5), pero bueno. Lo que si que me incomoda es la ventaniata esa para que te voten en boosterblog, porque sigue apareciendo aún ya habiéndote votado en el dia. por cierto, tambien estoy allí, te agradecería un votico. Saludos Oliver, te sigo leyendo

    ResponderEliminar
  12. Muchas gracias Edertano por comentario, visita y voto.
    Lo de la ventana de Boosterblog estoy intentando solucionarlo, para que mediante un cookie solo salga una vez, pero todavía no he conseguido que funcione.
    Muchas gracias por tu paciencia.
    Un abrazo,
    Óliver.G

    ResponderEliminar
  13. Bueno idea sobre todo para web de bloggin que incluyen muchos códigos ;)

    ResponderEliminar
  14. Hola Fede GR, me alegro de que te gustase...
    ¿pero que es web de bloggin?
    Saludos,
    Óliver.G

    ResponderEliminar
  15. Hola Oliver, sigo aplicando a mis páginas esto. Cambié algunas cosas, por ejemplo, en el cuadrito donde se abre un vídeo, puse "Ver Vídeo" y quedó de 10.
    Respecto al horario de la escuela, yo trabajo de 19:30 a 23hs.
    Un beso

    ResponderEliminar
  16. Si se puede modificar el texto que pone en el botón y así queda mejor. Me agrada que tantos hayan encontrado útil este post.
    Saludos,
    Óliver.G

    ResponderEliminar
  17. Muy bueno el post, pero me gustaria saber si se puede hacer un comentario dinamico, que vaya refrescandose en la pagina, he intentado llamar a una funcion pero ya no me funciona el boton...=(
    si tienen alguna idea??? Gracias

    ResponderEliminar
  18. Hola y Gracias por el dato pero me gustaría saber si adicional al dar clic y mostrar el contenido oculto se pueda abrir una dirección web..?

    Cómo quedaría el código...

    Gracias por responder.

    ResponderEliminar

Puedes comentar todo tipo de cosas, absteniéndote de:
- Realizar SPAM.
- Escribir insultos faltando al respeto de los demás usuarios.
Recuerda que en este blog, la moderación de comentarios está activada, así que piénsalo bien antes de enviar tu comentario si tiene algo "prohibido".