4 maneras de poner un spoiler en el blog

8 de mayo de 2014 121 comentarios ,


Los spoilers sirven para ocultar cierto contenido de una entrada del blog, ya sea por estrategia o por estética, estos spoilers ocultan contenido y lo muestran sólo cuando el usuario lo solicita.
En esta entrada veremos 4 métodos para poner un spoiler y así puedas elegir el método que más se adapte a tus necesidades.

Spoiler sólo con CSS

Con este método usaremos las bondades del CSS sin tener que recurrir a scripts, sólo CSS y nada más. Pero, tiene dos desventajas, la primera es que se necesitan dos botones, uno para mostrar el contenido y otro para ocultarlo. El otro inconveniente es que al mostrar el contenido la página hace un pequeño scroll hasta posicionar la página donde esté el contenido.



Lorem ipsum, quia dolor sit, amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt, ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam.



El código que usarías en tus entradas para este tipo de spoiler con CSS sería el siguiente:
<input onclick="window.location='#mostrar1';" type="button" value="Mostrar"/>
<input onclick="window.location='#';" type="button" value="Ocultar" />
<div id="spoiler1">
<div id="mostrar1">

...Aquí el contenido que quieres ocultar...

</div>
</div>
<style>
#spoiler1 > div {display: none;}
#spoiler1 > div:target {display: block;}
</style>
En color rojo debes poner el contenido que estará oculto. Lo que está en color azul lo debes cambiar cada vez que agregues un spoiler, por ejemplo, si agregas uno más cambia spoiler1 por spoiler2 y mostrar1 por mostrar2


Spoiler usando Javascript


Este tipo de spoiler es similar al spoiler que vimos hace algunos años, sólo que ligeramente modificado. Su uso requiere Javascript, muy poco en realidad. Básicamente hace lo mismo que el spoiler con CSS pero llamando los estilos con Javascript.



<input type="button" onclick="if(document.getElementById('spoiler1') .style.display=='none') {document.getElementById('spoiler1') .style.display=''; this.value = 'Ocultar'; }else{document.getElementById('spoiler1') .style.display='none';this.value = 'Mostrar'; }" value="Mostrar"/><div id="spoiler1" style="display:none">

...Aquí el contenido que quieres ocultar...

</div>
De igual forma deberás cambiar el ID spoiler1 (todas las veces que aparece) cada vez que quieras añadir uno nuevo.


Spoiler usando Scriptaculous


Este método ya lo vimos alguna vez en el post "expandir y contraer partes de una entrada". Éste a diferencia de los anteriores muestra el contenido oculto con un efecto deslizante, dándole un toque más atractivo.



Para usarlo necesitamos tener Scriptaculous, si aún no lo tienes agrégalo antes de </head>
<script src='http://ajax.googleapis.com/ajax/libs/prototype/1/prototype.js'/>
<script src='http://ajax.googleapis.com/ajax/libs/scriptaculous/1/scriptaculous.js'/>
Y cuando quieras poner el spoiler en una entrada usa este código:
<input onclick='Effect.toggle("spoiler1","slide"); return false' type='button' value='Mostrar'/><div id='spoiler1' style='display: none;'>

...Aquí el contenido que quieres ocultar...

</div>
En este caso también deberás cambiar las partes en azul siempre que quieras añadir más.

Spoiler usando jQuery


Por último vamos a ver cómo ocultar contenido con jQuery, con el cual también podremos conseguir un efecto deslizante al mostrar u ocultar el contenido del spoiler.



Si no tienes jQuery ponlo después de <head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js' type='text/javascript'/>

Y en tu entrada usa este código cada vez que quieras poner tu spoiler:
<input type="button" id="spoiler1" value="Mostrar"/>
<div class="mostrar1" style="display: none;">

...Aquí el contenido que quieres ocultar...

</div>
<script>jQuery.noConflict();jQuery(document).ready(function(){jQuery('#spoiler1').click(function(){jQuery('.mostrar1').slideToggle("slow");});});</script>
Aquí otra vez hay que cambiar lo que está en azul cada vez que quieras añadir uno nuevo, por ejemplo spoiler1 por spoiler2 y mostrar1 por mostrar2



Y así de sencillo puedes ocultar contenido en las entradas de tu blog, incluso en un gadget HTML/Javascript y como puedes ver son códigos super cortos y sencillos de aplicar. El contenido que puedes poner para ocultar puede ser el que sea, una imagen, texto, un reproductor, videos, etc., etc.




121 comentarios en:

" 4 maneras de poner un spoiler en el blog "

  1. Hola Potro, soy el primer comentario ;D Una pregunta, quiero hacer en mi blog, en la mañana diga: Buenos Dias, y en la tarde, buenas tardes, segun en donde este la persona, Saludos

    ResponderEliminar
    Respuestas
    1. Hola Jérôme, un script muy sencillo sería este:
      <script>
      dia = new Date()
      hora = dia.getHours()
      hora1 = hora - 12
      if (hora < "6") {
      document.write(" ¿Tan temprano y ya estás despierto? ")
      }else if (hora < "12"){
      document.write(" ¡Buenos días! ")
      }else if (hora < "13") {
      document.write(" Es hora de comer ")
      }else if (hora < "17") {
      document.write(" Hola, buenas tardes ")
      }else if (hora < "22") {
      document.write(" Es una hermosa noche, ¿no crees? ")
      }else if (hora >= "22") {
      document.write(" Buenas noches, parece que alguien se está desvelando ")
      }
      </script>

      Eliminar
    2. Muchísimas Gracias, otra pregunta, ¿como le cambio el tamaño de letra?

      Eliminar
    3. Encierra el script en un DIV y a ese DIV aplícale los estilos. Por ejemplo:
      <div style="font-size:20px;" >

      ...Aquí el script...

      </div>

      Eliminar
    4. Se que no corresponde al tema, pero me interesa saber donde pongo el script en el html, que le enseñaste a Jérôme. (Entre que cosas, debajo de tal parte, etc...) Si hay algún tema, me rediriges y ya, para no perder este hilo.
      Saludos ;)

      Eliminar
    5. El código iría en un gadget HTML/Javascript, ya que lo pongas puedes arrastrar el gadget hasta la posición que quieras (estando en la sección Diseño).

      Eliminar
    6. Potro como estas? .. me gustaria aplicar esto en mi blog!
      Pero no se donde lo debo aplicar en mi plantilla, me podrias ayudar?
      Tambien quiero saber bien, si el primer codigo script que le das a Guitton, es lo que debo agregar en el segundo codigo que le pasas, donde dice: ...Aqui el script..
      Es decir, dentro del DIV que indicas...
      Y donden pongo este godigo en mi plntilla....
      Por ultimo: crees que pueda agregar algun stilo.. como color, fondo, borde, ubicacion del mensaje, etc.. en caso de ser una caja en la que se visualiza el mensaje...
      gracias anticipadas..!

      Eliminar
    7. Hola, si no quieres darle formato a esos textos sólo copia el código del comentario 1.1 y pégalo en un elemento HTML/Javascript.
      Si quieres darle formato entonces primero pon el código del comentario 1.3 y donde dice ...Aqui el script.. ahí pega el código el comentario 1.1

      Saludos.

      Eliminar
    8. Sólo pon el código de la imagen en lugar del texto.

      Eliminar
  2. Muy buenos todos, Potro (aunque el de jQuery reconozco que me hace más tilín). Infinitas gracias por tus sabrosas aportaciones siempre. ¡Un beso enorme!

    ResponderEliminar
  3. hola, podrías responder a la pregunta del slider automático? se que hiciste ese post hace tiempo pero me serviría de ayuda (http://ciudadblogger.com/2012/05/slider-automatico-para-mostrar-las.html)

    Gracias

    ResponderEliminar
    Respuestas
    1. No hace falta duplicar los comentarios, todos se responden ;)

      Eliminar
  4. Este comentario ha sido eliminado por un administrador del blog.

    ResponderEliminar
    Respuestas
    1. Sé que es cansado cargar los 1500 comentarios de esa entrada pero incluso yo tengo que hacerlo para responderles todos los días :/
      Te pido lo veamos allá para no desviarnos del tema de esta entrada y para darle el seguimiento adecuado.

      Pd. Eliminé el comentario como me lo pediste.
      Saludos.

      Eliminar
  5. Si, Estaba esperando Que Publicaras Esto , Esta Genial, Una cosa, me ayudas a saber que codigo esta De Mas Es este "} } -->" pero no se donde esta :( | Aparece En la barra de Arriba "inferior Izquierda" cuado carga y se mira mal :( Me ayudas ?

    ResponderEliminar
    Respuestas
    1. Debe ser porque debajo de /* Iconos Sociales añadiste los estilos encerrado entre <style> y </style>
      Cuando los encierras así los debes poner después de <head> o antes de </head>

      Aquí hay más información sobre esos errores en los estilos:
      http://ciudadblogger.com/2011/07/errores-comunes-al-poner-los-codigos.html

      Eliminar
    2. No potro, :( , si lo pongo arriba de < / head > No aparece nada :( pero bueno , talvez posteas esos que pusistes tu :D,, y No Sabes Si Se PUedes O Talvez ya Lo Tengas, Poner Numeracion, Envez de Entradas Antiguas, Entradas Recientes Y Eso?

      Eliminar
    3. No tengo una entrada sobre ello pero busca en Google como "paginación para Blogger".

      Eliminar
  6. Están muy buenos todos :d lastima que en el primero, al hacer clic en ocultar, se valla a la parte superior.

    ResponderEliminar
  7. Hola Potro.
    Gracias por la información, me la guardo ;)
    Un saludo.

    ResponderEliminar
  8. Interesantes todas tu publicaciones.
    Gracias Potro

    ResponderEliminar
  9. Graciasssss!!! lo había probado de diferentes forma y por fin y gracias a ti me funciona...yujuuuu

    ResponderEliminar
  10. boa noite!
    Como é o código , casso eu queira colocar uma imagem no lugar de "MOSTRAR"

    ResponderEliminar
    Respuestas
    1. Hola edilene, estos son los cambios que hay que hacer si quieres usar una imagen en lugar de un botón.

      Con CSS
      Cambiar esto:
      <input onclick="window.location='#mostrar1';" type="button" value="Mostrar"/>
      <input onclick="window.location='#';" type="button" value="Ocultar" />

      Por esto:
      <a href="#mostrar1"><img src="URL de la imagen"/></a>
      <a href="#"><img src="URL de la imagen" /></a>


      Con Javascript
      Cambiar esto:
      <input type="button" onclick="if(document.getElementById('spoiler1') .style.display=='none') {document.getElementById('spoiler1') .style.display=''; this.value = 'Ocultar'; }else{document.getElementById('spoiler1') .style.display='none';this.value = 'Mostrar'; }" value="Mostrar"/>
      Por esto:
      <img onclick="if(document.getElementById('spoiler1') .style.display=='none') {document.getElementById('spoiler1') .style.display=''; }else{document.getElementById('spoiler1') .style.display='none';}" src="URL de la imagen"/>

      Con Scriptaculous
      Cambiar esto:
      <input onclick='Effect.toggle("spoiler1","slide"); return false' type='button' value='Mostrar'/>
      Por esto:
      <a href='#' onclick='Effect.toggle("spoiler1","slide"); return false'><img src='URL de la imagen' /></a>

      Con jQuery
      Cambiar esto:
      <input type="button" id="spoiler1" value="Mostrar"/>
      Por esto:
      <a href="#" id="spoiler1" ><img src="URL de la imagen"/></a>

      En cualquiera de los casos debes añadir la URL de la imagen donde se indica.

      Eliminar
    2. olá!
      Muito lhe agradeço
      pela pronta resposta!
      Fique com Deus!
      :)

      Eliminar
  11. Hola Potro muchas gracias por tu artículo aprendí algo nuevo, no sabía que existía. Me ayudara para mi blog. Besos y saludos desde Venezuela

    ResponderEliminar
  12. Hola Potro gracias por tu artículo aprendí algo nuevo que no sabía que existía. Me servirá para mi blog. Saludos desde Venezuela

    ResponderEliminar
  13. hola potro diisculp a como pongo el codigo para la entrada esque lo quiero poner en dos imagenes pero no ubico donde poner el codigo para que se oculte y solo quede la portada. serias tan amable de decirme

    ResponderEliminar
    Respuestas
    1. Hola Andy, el código del spoiler oculta parte de la entrada que quieras ocultar, no toda la entrada, a menos que pongas dentro del spoiler todo el contenido de tu entrada. Pero repito, es para ocultar partes de una entrada, si lo que quieres es que no haya ninguna entrada en la portada entonces en la configuración del blog pon 0 (cero) en el número de entradas a mostrar.

      Eliminar
  14. Hola Potro, que tal como estas!?. Espero que muy bien la verdad, a full con las entradas ahora a retomar todo de nuevo y a responder las preguntas que quedaron pendientes jaja. Bien pues, esta vez queria pedirte si porfavor me pudieses ayudar.
    Comienzo con mi problema, resulta que quize poner el elemento de tu entrada que titula "PONER UN ELEMENTO DEBAJO DE LA PRIMERA ENTRADA", y lo hize correctamente, pero luego decidi sacarlo... Pero cuando note que hice el cambio, y lo reverti (en el boton revertir cambios de Blogger, que se encuentra en el Editor de Plantilla) me di cuenta que habia un espacio blanco justo entre el Header y el Menu (cosa que ese espacio no estaba antes), asi que me gustaria si pudieras ayudarme a sacarlo porfavor porque queda bastante feo.
    PD: Aqui te dejo el link de la foto en el cual esta con un fondo verde todo el espacio que sobra, es para que la veas y te des cuenta de cual es el espacio que te digo (y a su vez te dejo el link de mi blog)

    LINK DE IMAGEN:
    http://3.bp.blogspot.com/-glqHbiGHAx8/U3CkWFTbIQI/AAAAAAAAAK4/5st0MDuOCJI/s1600/ERROR+DE+ESPACIO+EN+MI+BLOG.png

    LINK DE MI BLOG:
    http://www.ERS-TAEKWONDO.blogspot.com

    .Espero tu respuesta Potro, un abrazo inmenso. FasteN

    ResponderEliminar
  15. Elimina el comentario que acabo de hacer Potro, mil disculpas, ya pude solucionar el problema... No te hagas drama,ya lo hice. Gracias igualmente y saludos!. FasteN

    ResponderEliminar
  16. Hola potro, tengo un problema, con la plantilla awesome inc de blogger, la he editado y ha quedado chula, pero la barra lateral de los widgets esta separada de la barra de contenido (dónde van las entradas), como podria juntarlas para que quedara como esta página: www.geek.com

    GRACIAS, SALUDOS

    ResponderEliminar
    Respuestas
    1. Hola Josh, mira esta entrada, ahí se habla sobre ello:
      http://ciudadblogger.com/2011/11/eliminar-el-espacio-entre-las-entradas.html

      Eliminar
  17. Muchas gracias potro por los tutoriales, cuando vas a regalar la numeración decimales que usas en tus comentarios esta geniales...

    ResponderEliminar
    Respuestas
    1. Gracias Nitro Sonic. Busca en Oloblogger, ahí hay un tutorial sobre ello ;)

      Eliminar
    2. Este comentario ha sido eliminado por el autor.

      Eliminar
    3. Hola Nitro, ayer te respondí en otra entrada sobre ello. Insisto en que lo veo centrado, de cualquier forma, para centrar algo sólo enciérralo entre <center> y </center>

      Lo del idioma, si la página no da la opción no hay nada que se pueda hacer ya que esos gadgets son controlados completamente por ellos.

      Eliminar
    4. Muy buenas El Potro,
      He leído varios de tus post y la verdad que son de gran ayuda.
      Quiero pedirte un favor ya que llevo mucho tiempo tras ello y buscando en varios foros y no he sido capaz de hacerlo.
      Quiero colocar publicidad en los videos que tengo en mi blog. Los videos que tengo son embed traidos de páginas de stream por lo que ya traen publicidad que no es mía incorporada. Los tengo colocados como iframe y lo que yo quiero es añadir alguna publicidad más pero no hay forma de conseguirlo. Lo máximo que he conseguido es colocarla....pero no me funciona el botón X o botón de cerrar la publicidad.
      Este es el blog: http://goldenzooke.blogspot.com.es/
      Te habilito una página llamada Pruebas para que veas el problema que tengo.
      Si necesitas el cógigo html y css que inserto dímelo y te lo paso. Si tienes una solución y consigues que funcione te estaré eternamente agradecido ya que llevo muchísimo tiempo tras de ello y con mi mismo código en web y wordpress funciona y en blogger no hay manera.
      Un saludo.

      Eliminar
    5. Hola, te dejo un enlace de Oloblogger, ahí tienen una entrada que habla sobre la superposición de capas que se pueden cerrar con un click, aunque no lo he probado es casi seguro que puedes usarlo para lo que pretendes. Saludos.
      http://www.oloblogger.com/2011/11/cubrir-una-capa-con-otra-que-se-puede.html

      Eliminar
  18. Potro yo de nuevo T.T te quería preguntar si puedo alojar el script para blogger de:
    http://www.graddit.com/eng/ratings-widget

    en otro sitio como google site o dropbox.

    ya que el script ese mi blog lo carga desde: http://www.graddit.com

    y cuesta cargue y pone re-lento mi blog ayúdame please amigo te lo ruego me gusta ese contador estadísticas en la entradas...

    esta es mi plantilla actualizada:

    https://www.firedrive.com/file/78C0CEEC9ADF97D8

    mi blog de pruebas:

    wwww.zonacatrachahd.blogspot.com

    ResponderEliminar
    Respuestas
    1. Sería cuestión de que lo intentes, pero lo dudo mucho. Esos scripts regularmente deben estar alojados en el sitio que lo provee para que añadan datos extra y puedan leer las estadísticas, votos, etc.

      Eliminar
    2. ok ni modo T.T gracias por responder...

      Eliminar
  19. Hola gracias por tu información es la mejor hasta ahora de lo que he encontrado en internet y llevo vs horas buscando solución.

    No me funciona bien lo que explicas a ver si me puedes ayudar.
    Tengo un blog wordpress gratuito y quiero que mis entradas aparezcan sólo título con imajen pero OCULTAR el resto y si alguien quiere ver el resto del texto pues que clike para verlo. Mi idea es que se vea por estética más bonito.

    Hasta ahora consigo ocultar el contenido pero no se puede acceder a la información oculta.

    Te agradecería si tienes alguna idea de que puede ser.

    ResponderEliminar
    Respuestas
    1. Te lo voy a deber Ana, en WordPress he trabajado muy poco, y en la versión gratuita realmente nada por las tantas limitaciones que tiene :(
      En teoría, lo de esta entrada te podría servir (aunque tendrías que aplicarlo entrada por entrada), y quien quiera ver el post completo daría click en el spoiler para mostrar todo el contenido.
      No sé si para WordPress.com haya variedad de plantillas, pero igual puedes buscar una que tenga ya las entradas resumidas como lo deseas.
      Saludos.

      Eliminar
  20. Este comentario ha sido eliminado por un administrador del blog.

    ResponderEliminar
    Respuestas
    1. Hola Jose Alejandro. Con exactitud no sé cómo funciona, pero veo que para conseguirlo usa jQuery, jQuery UI, y contenido encriptado, a ver si después le entiendo mejor su funcionamiento y publico algo al respecto.
      Saludos.

      Pd. He eliminado el comentario por el aviso que está arriba de este formulario.

      Eliminar
  21. Hola. Tengo un blog que el contenido mayormente es imágenes y por ese motivo blogger limito mi numero de entradas a 5. mi pregunta es: ¿Si uso el botón spoiler en la gran mayoría de imágenes que tengo blogger permitirá que tenga mas entradas en el inicio de mi blog?
    ayuda por favor!!

    ResponderEliminar
    Respuestas
    1. No. El spoiler solamente oculta el contenido, pero el navegador lo carga aunque el usuario no lo vea, así que no reduce la velocidad de carga del blog.

      Eliminar
  22. gracias por responder. Una pregunta más.
    como hago para ocultar una imagen? cuando pongo la url de la imagen, en vista previa me sale la dirección url de la imagen mas no la imagen. http://prntscr.com/3pmf7t <--- así.

    ResponderEliminar
    Respuestas
    1. Hola, el código para una imagen es este:
      <img src="URL de la imagen" />

      Ese es el código que debes usar y ahí dentro poner la URL de dicha imagen.

      Eliminar
  23. hola que tal potro nuevamente pidiendote una mano por favor ayer te comente que necesitaba ayuda con esto de ocultar partes de una entrada mira yo lo necesito para hacer esto , pero quisiera saber como hacer para que al presionar el boton mostrar no se suban los demas botones y se quede todo cuadrado espero me puedas ayudar
    http://www.sheepbuster.com/p/lista-completa-de-productos.html

    ResponderEliminar
    Respuestas
    1. No sé si pueda hacerse mike, todos los spoilers que conozco actúan de la misma manera.

      Eliminar
  24. :O este está muy bueno para mi blog, es de libros y todo el mundo sufre con los spoilrs muajajaja >:D lo voy a intentar un día y ya te cuento que tal me quedó

    ResponderEliminar
  25. hola potro, oye como le hago para que cambiar el boton y en vez de que diga "mostrar" diga "spoiler" u otra cosa?

    ResponderEliminar
  26. hola potro, oye, no sé que paso que cuando puse esto del spoiler, lo que iba en la columna derecha del blog se paso a la parte de abajo de las entradas, ya me fui a diseño donde aparece como el esquema del blog y ahi si aparecen a lado y ya las movi de lugar y nomas no se ponen donde iban, me puedes decir como le hago para solucionarlo porfas? este es mi blog http://milemagbooks.blogspot.mx/

    ResponderEliminar
  27. ya no potro jajajajaja era por el tamaño de la foto, perdón por las molestias

    ResponderEliminar
  28. Hola, Potro :3 Me gustó mucho esta entrada, sobre todo la de la manera deslizante. Pero tengo una pregunta. ¿ Cómo hiciste para que salga una imagen, que dentro tenga otra imagen ( bueno, en este caso es un gif) y a su vez un escrito que se puede seleccionar? :3 El detalle del clip me encanta *W*

    ResponderEliminar
    Respuestas
    1. Hola M. M.Miranda, la imagen de la libreta es la imagen de fondo del DIV, dentro del DIV he puesto texto y el código de una imagen, en este caso la que está en formato GIF.

      Eliminar
    2. Me encanta lo dedicado que eres a responder todos los comentarios :3

      Pues entonces investigaré sobre como poner imágenes de fondo en los DIV, mucha gracias ^^

      Eliminar
    3. No es nada complicado, por ejemplo, este sería un DIV con el texto y el código de una imagen:
      <div class='miClase'>
      Este es un texto de ejemplo
      <img src='URL de la imagen' style='clear: right; float: right; margin:10px;' />
      </div>

      En este caso la imagen estaría alineada a la derecha.
      Luego agregas estilos al DIV donde le pondrías la imagen de fondo, por ejemplo:
      .miClase {
      width: 450px;
      height: 200px;
      padding: 10px;
      margin: 0 auto;
      position: relative;
      background: url(URL de la imagen de fondo);
      }

      ¿Lo ves? sencillísimo ;)

      Eliminar
    4. Siento contestar cada "x" siglo pero nunca me entero de cuando me respondes y lo veo cada " x" de casualidad jajajaja.

      Aiii, Dios. D8 Me siento super tonta porque no me saleee TT__TT

      Lo que quiero es eso, poner una imagen, encima poner otra y en la de fondo poder escribir algo.
      Algo parecido a esto :
      http://www.alaspapel.com/2014/12/mr-mercedes-de-stephen-king.html

      Sale una imagen y detrás otra donde se puede escribir y se puede seleccionar lo escrito. u.u
      Perdón si doy mucho la lata, es lo que tiene no ser entendido de Internet jajaja

      Eliminar
    5. Mmm... acabo de ver el cuadradito de " Avisarme". Esto tiene delito. Y del gordo jajaja

      Eliminar
    6. Jeje, pues eso, que con la casilla de "Avisarme" te enteras cuando alguien responde ;)
      Con el código que te di anteriormente puedes hacer justamente lo que describes. El primer código es el que usarías en tu entrada, el segundo lo pondrías en los estilos de tu plantilla.

      Eliminar
    7. Sí, ahora me entero de las respuestas jajajaj.

      Veamos, ¿ el segundo código sería el que iria en el CCS?
      D8 No me saleee. >///< Yo no lo veo sencilliiiisimooo

      Eliminar
    8. Pues habría que ver dónde lo estás probando para poder ver qué ha salido mal.

      Eliminar
    9. Si :3

      A ver si conseguimos solucionar esto jajajajaj.

      Lo quiero poner en la entrada del blog.
      El primer código lo puse en el HTML de la entrada, y el segundo en el CSS de " Añadir CSS" de Diseñador de Plantillas.

      Eliminar
  29. Mil gracias!!! cada vez que utilizo alguno de tus trucos funciona de maravilla!!! Un abrazo

    ResponderEliminar
  30. Este comentario ha sido eliminado por un administrador del blog.

    ResponderEliminar
    Respuestas
    1. Este comentario ha sido eliminado por un administrador del blog.

      Eliminar
    2. Gracias Nitro. Puedes hacerlo de esta manera:

      <img src="URL de la imagen UNO" onclick="if(document.getElementById('spoiler1') .style.display=='none') {document.getElementById('spoiler1') .style.display=''; this.src='URL de la imagen DOS'; this.value = 'Ocultar'; }else{document.getElementById('spoiler1') .style.display='none';this.value = 'Mostrar'; }" value="Mostrar"/><div id="spoiler1" style="display:none">

      ...Aquí el contenido que quieres ocultar...

      </div>


      Pero... una vez que des click y cambie la imagen, no volverá a cambiar la imagen si vuelves a dar click nuevamente. Es decir, por defecto se mostrará la imagen UNO, si das click se muestra la imagen DOS, en ese momento se muestra el contenido del spoiler, pero si das click nuevamente para ocultar el spoiler se seguirá mostrando la imagen DOS, no regresara a la UNO.

      Saludos.

      Pd. Elimino el comentario por el aviso de aquí arriba.

      Eliminar
    3. Este comentario ha sido eliminado por un administrador del blog.

      Eliminar
  31. gracias por este tuto, esta muy interesante..!

    Una cosa, potro, estos script no me lentizaran el blog?
    En caso de ser asi, que me recomiendas hacer.. esto porque ya tengo algunos agregados..
    Aqui el blog:
    http://disenadoconbrizz.blogspot.com

    ResponderEliminar
    Respuestas
    1. Hola Bella Pincelada, si te preocupa mucho la velocidad de carga del blog usa cualquiera de los dos primeros métodos, esos son códigos ultra ligeros que no afectarán la velocidad de carga. Saludos.

      Eliminar
  32. Hola, sabes como puedo colocar un cajón de code? Con este botón de spoiler el blogger no respeta los saltos de línea y me muestra todo de corrido.
    gracias!

    ResponderEliminar
    Respuestas
    1. Usa un <br/> por cada salto de línea que quieras poner.

      Eliminar
  33. Perdonen, pero soy MUY nuevo en blogger, disculpen mi ignorancia, pero apenas estoy aprendiendo a editar HTML en una entrada :s, y la verdad que necesito poner spoilers en algunas entradas, pero no entendí nada de lo que pusieron :s de modo que si hay algún VIDEO-TUTORIAL acerca de cómo reqlizar estos métodos, les agradecería que me den el link para verlo, desde ya muchas gracias :D

    ResponderEliminar
    Respuestas
    1. Te lo debo, no hay algún video tutorial por parte de nosotros sobre este tema. Lee con calma la entrada y practica, verás que no es nada complicado.

      Eliminar
  34. Perdón, como ya dine soy nuevo en esto, y no entendí como agregar scriptaculous. Dice que lo agrege en < /head >, pero cómo?

    ResponderEliminar
    Respuestas
    1. Entra en Plantilla > Edición de HTML, ahí busca esa etiqueta y pega el código que se menciona en la entrada.

      Eliminar
  35. Gracias por tu ayuda Potro, al fin logré poner uno Javascript. E incluso he jugado un poco con él; Como sabrán dice "Mostrar" y "Ocultar"; Yo los he cambiado a "Show" y "Hide". Si alguien queire saber cómo voy a estar feliz de responderle

    ResponderEliminar
  36. Una pregunta... Resulta que yo tengo todo el texto alineado al centro, y quiero que el spoiler también esté alineado al centro. Cómo hago?

    ResponderEliminar
  37. Excelente info, pero una consulta, quiero hacer que el contenido sea visble solo cuando alguien comenta, osea algo asi como: "mostrar al contenido al comentar", tendrias algun codigo para eso? .

    te estaria agradecido si pudieras ayudarme, gracias de antemano

    ResponderEliminar
  38. ila men gracias ati eh podido arreglar muchas cocsas de mi blog te lo agradezco pero queria saber una cosa se puede poner vavios espolier uno al lado del otro

    ResponderEliminar
  39. Hola Potro! Estoy usando el de Javascript y me va muy bien. Solo que hay un pequeño y extraño problema. He puesto varios spoilers en una entrada, y al meterme en ella para leerla, el menú que tenía en el lateral con la lista de las demás entradas y gadgets ha desaparecido... Tengo que regresar a la página principal para poder seguir disponiendo del menú lateral. ¿Puede ser que haya sido por poner este script en esta entrada y ha afectado al menú lateral al entrar en ella?

    ResponderEliminar
  40. Perdona Potro, ya se ha solucionado. Por lo visto sólo tenía que re-actualizar la entrada sin el modo html, algo raro, pero en fin. Lo dejo aquí comentado por si a alguien le ocurre lo mismo al poner el script, sepa cómo se soluciona. Gracias por tus geniales aportes, siempre hacen que pueda tener mi blog deseado y cada vez más completo :) saludos!

    ResponderEliminar
    Respuestas
    1. Gracias a ti por compartirnos tu solución a tu problema. Saludos!

      Eliminar
  41. como hago para que los usuarios tengan que comentar para poder ver el contenido ¿?

    ResponderEliminar
  42. como hago para que los usuarios tengan que comentar para poder ver el contenido ¿?

    ResponderEliminar
  43. Que tal amigo Potro, disculpa llamarte así, te cuento que buscando en la web temas referentes a mostrar y ocultar contenido, me encontré con el tuyo y la verdad me impresionó la forma como tratas a las personas y la forma como explicas y resuelves sus dudas. Magnífico tu blog. Sabes me gustaría tener tu ayuda, quiero insertar una entrada en mi blog que contenga tres pestañas y cada una al pulsar muestre un contenido diferente. Algo así como este sitio: http://www.miltrucosblogger.com/2015/02/gadget-de-ultimas-entradas-espectacular-estilo.html, la entrada que tiene Opiniones, Etiquetas y Populares. Espero tu pronta ayuda y felicidades por todo lo que haces. Saludos desde Venezuela.

    ResponderEliminar
    Respuestas
    1. Hola Juan, muchas gracias por tu comentario. Hay un tabview que hemos publicado y que puede ponerse en las entradas, échale un vistazo a ver si es lo que estás buscando:
      http://www.ciudadblogger.com/2011/06/tabview-para-agrupar-varios-gadgets-en.html

      Saludos hasta Venezuela.

      Eliminar
  44. Hola Kal, el problema es que en tu plantilla usas jQuery el cual no es compatible con Scriptaculous. Te recomiendo que mejor uses el spoiler con jQuery para que te evites ese problema. Saludos.

    ResponderEliminar
  45. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  46. gracias por tanta informacion,
    todo perfecto pero, podrias explicar mejor como poner 2 spoiler ? intente poner 2 codigos de spoiler con el jquery (con uno funciona), y, o no abria 1, o abria 1 con los dos contenidos a la ves y se cerraba solo... intente hacer eso de cambiar spoiler y entrada 1, por spoiler y entrada 2, pero tampoco, intente con 2 script, el jquery y el scriptacolous y tampoco funciona, de hecho al guardar y ver en el blog, hasta se borraron...
    quiero algo asi pero no puedo, =(
    http://i.imgur.com/HbkEn7I.png
    que se abra uno al dar clic, y al darle al otro, que se cierre el primero y se abra el segundo..
    se puede ?

    ResponderEliminar
    Respuestas
    1. Puedes poner dos o los que quieras, pero no será que uno se cierre al dar click a otro. Eso no.
      Si aun quieres intentar poner dos ponlos en tu blog, una vez puestos (y si ves que no funcionan) dime en cuál entrada los has colocado, solo así puedo saber cómo ayudarte.

      Eliminar
    2. no se puede abrir uno y cerrar el otro... ok, entonces quiero recurrir a otra opcion, que ya explicaste mas arriba, pero que en el acto (exactamente como lo explicas) no me resulta, bueno , me resulta a medias ( hablo de sustituir el boton por una imagen simulando el boton), porque visualmente si da resultado, pero sin aparente logica, al darle clic al spoiler, me redirige la pagina de la entrada a mi ''Escritorio de blogger'', donde ves estadisticas agregas entradas etc...
      me podrias ayudar en lograr de que ese spoiler funcione correctamente...

      Eliminar
    3. Perdón por la demora en responder amovi. Eso sucede cuando cambias a la pestaña Redactar. Siempre que uses este tipo de códigos en una entrada hazlo en la pestaña HTML y una vez puestos no cambies para nada a Redactar.

      Eliminar
  47. Hola! Quería saber si hay forma de colocar spoilers en un comentario! Estoy armando un blog de reseñas literarias y quería saber si mis lectores tendrán esa opcion! Gracias!

    ResponderEliminar
  48. Hola.
    Lo del spoiler lo he entendido yo lo que quisiera saber es como ocultar la imagen y solo cuando comenten la entrada se vea la imagen.
    De antemano gracias

    ResponderEliminar
  49. Hola me podrían ayudar con esto, quisiera saber como hacer que mi banner es decir mi código html sea invisible para ponerlo sobre un vídeo es decir que la persona primero le da click a el codigo banner invisible y luego si al video, eh leído que es posible mas no se como hacerlo agradecería que me ayudaran, gracias..

    ResponderEliminar
  50. hola potro me urge hablar contigo por favor cuando puedas

    ResponderEliminar
  51. Hola,

    El artículo es muy interesante, pero no sé como puedo conseguir el mismo efecto con varios botones a la vez y alternando los textos a mostrar/ ocultar.

    El efecto que busco es similar al de este link: http://www.kira-teachings.com/jpop-kyari-pamyu-pamyu-ponpon-en-espanol/

    Me podrías ayudar por favor?

    Gracias!

    ResponderEliminar
  52. hola potro, una pregunta. ¿como puedo centrar el boton del spoiler? digo sin que que me centre el contenido oculto.

    ResponderEliminar
  53. hola potro soy nuevo en blogger, necesito que el contenido se muestre siempre y cuando le den un click a la publicidad... crees que me puedas ayudar con eso.... gracias de todas maneras, muy interesantes los temas...

    ResponderEliminar
  54. estoy en busca de un spoiler que al crear varios spoiler a las ves que cuando uno abra para ver el contenido el que estaba abierto se cierre automaticamente y asi cuando abro otro spoiler el que abri se cierre automaticamente hay algun codigo para hacer eso muchas gracias... excelente blog saludos

    ResponderEliminar
  55. Hola que tal como va, queria saber si existe la posibilidad de poder ocultar los links de descarga de mi blog de blogger y que la gente recien los pueda ver cuando comenten, osea ponerle algo al blog para que esten ocultos los links de descargas y lo puedan ver solamente si comentan, tengo que llegar a esto porque nadie me comenta los post, tengo un blog comunacho de musica nomas y queria ver si podria lograr ponerle algo asi, desde ya millones de gracias

    ResponderEliminar
  56. Hola el Potro de antes mano te agradesco por tan excelente post, y me a funcionado bastante bien aun que tengo un problema y es que cuando cuando abro el codigo de spoiler en una entrada de bloggger en html no se cierra y todo lo que agrego en parte de redactar queda pegado al spoiler asi este cerrado, no se si sea por falta de un codigo que genere como un punto aparte, aun que lo copie e hice todo tal cual como lo explicas, gracias de ante mano.

    ResponderEliminar

Si tu blog contiene material protegido por derechos de autor habilita tu perfil y deja únicamente el nombre de tu blog, no dejes la dirección del mismo, de lo contrario el comentario será eliminado.

Nota: solo los miembros de este blog pueden publicar comentarios.

 
Ir Arriba Ir Abajo
I Ciudad Blogger