Spoiler para ocultar y mostrar contenido en una entrada

19 de abril de 2011 481 comentarios ,
Algunas veces tenemos mucho contenido que agregar en una entrada pero no queremos mostrarlo todo de un solo golpe, ya sea porque no queremos que la entrada se haga demasiado larga o porque queremos que el contenido se vaya descubriendo poco a poco.
Y sí, ya antes habíamos visto cómo expandir y contraer partes de una entrada usando Scriptaculous y que le da un efecto deslizante, pero como a muchos no les gusta usar Scriptaculous vamos a ver otra forma de hacerlo usando un simple javascript que aunque no tendrá efecto alguno cumple su función muy bien, que será la de mostrar y ocultar contenido.

Puedes ver un ejemplo haciendo click en el siguiente botón.





Podemos incluir dentro cualquier cosa que se nos ocurra, ya sea una tabla, una imagen, un reproductor de audio, un video, etc.






Para usarlo en tu blog sólo basta con poner este código en una entrada cada vez que lo quieras usar:
<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>

Ahí sólo tienes que agregar donde se indica el contenido que quieres ocultar. Si el botón no te gusta mucho puedes leer esta entrada para saber cómo personalizar los botones.
O bien, puedes usar un enlace de texto en lugar de un botón




En ese caso el código a usar es este:
<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>

O si lo prefieres también puedes usar una imagen.




Ahí el código sería este:
<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>

Bastante práctico y fácil de usar ¿no? Puedes agregar varios en la misma entrada sin necesidad de cambiar alguna ID ni nada de eso. Sólo procura no cambiar a la pestaña Redactar una vez que lo pongas y no modifiques los espacios del código para que funcione correctamente.


481 comentarios en:

" Spoiler para ocultar y mostrar contenido en una entrada "

  1. Genial!, muy simple y muy practico!

    ResponderEliminar
  2. ;D muy bueno pero ya ya es muy viejo, pero siempre es muy util yo lo utilizo simbre desde que lo descubi, ace como 6 meses lo uso en la mayoria de las entradas que hago, ;D pero bueno de todos modos es muy util.

    Suerte!

    ResponderEliminar
  3. asi!!
    oie Potro no tienes una entrada en la que las nuevas paguinas no tengan los gadgets no aparescan como el inicio?

    aqui andare dando al abuelta x mientras :D
    Gracias.

    ResponderEliminar
  4. http://ciudadblogger.com/2010/02/ocultar-sidebar-en-las-paginas.html

    O si usas una plantilla del Diseñador:
    http://ciudadblogger.com/2010/10/ocultar-sidebar-en-las-paginas.html

    ResponderEliminar
  5. A mi no me funciona, trataré con proximos posts a ver si consigo que aparezca el mensaje oculto :P

    ResponderEliminar
  6. mmm........interesante mi seductor potro, gracias por el tip!!!

    ResponderEliminar
  7. Pues qué interesante. Me lo anoto!!!!!
    Un besote

    ResponderEliminar
  8. NO SABIA QUE SOS NO SIGNIFICABA NADA JEJEJE

    ResponderEliminar
  9. ✿ Belle ✿, habría que ver en cuál blog y en qué parte lo has puesto para encontrar el problema.

    Kary, qué bueno que te gustó mi linda Kary ;)

    Laube, gracias por el beso, otro para ti!

    ResponderEliminar
  10. Hola estimado jajajajaaja esto está genial !!! Graccias por compartirlo y enseñarnoslo ;-)

    ResponderEliminar
  11. Microboy90, a ti por tu visita!

    nEjO, sacado de Respondones :P

    MaG@S RaDioMuSiC, gracias a ti por estar!

    ResponderEliminar
  12. Este tipo de boton es muy bueno y facil de usar yo lo utilizo mucho en mi blog

    ResponderEliminar
  13. Gracias potro. Esta muy bueno el video de los estornudos jajaja :) saludos

    ResponderEliminar
  14. potro andaba buscando algo parecido A Eso.
    Andaba Buscando expandir y contraer pero un gadget o cualquier otra cosa en el sidebar

    Pliss! Ayudame

    ResponderEliminar
  15. Muy bueno, jejej y gracias por la advertencia de la pestaña redactar :)

    ResponderEliminar
  16. gracias potro genial algo que estaba buscando
    potro te queria pedir un favor es que ahora tengo una plantilla que nose modifica con blogger y nose en donde encontrar al codigo para cambiar el color a el fondo de mis entradas este es my blog http://cinecolombi.blogspot.com/2011/04/ver-online-infierno-al-volante-3d-furia.html

    ResponderEliminar
  17. Posteador web para cambiar el codigo busca algo como esto

    .post {
    background: #FFFFFF;
    margin-bottom:15px;
    padding:10px;
    }
    .post-body {
    font-family:"lucida grande","segoe ui",verdana,helvetica,arial,sans-serif;
    font-size:13px;
    border-bottom:#e0e0e0 1px solid;
    }
    .main p {
    margin:0px;
    }

    creo que cambiando lo que esta en negrita por otro codigod e color puedes modificar el fondo de tus entradas

    Potro, una duda como pongo esa Trivia que pones de ejemplo en el post?

    ResponderEliminar
  18. PeliculasTube, requete fácil y práctico ;)

    Emilio, muchos mocos volando :P

    _R054R!0_, ya mero viene esa entrada, ya está programada ;)

    ResponderEliminar
  19. posteador web, exactamente como te ha dicho Kron.


    Kron, aquí está la info, pero es mucho muy sencillo por ahora ;)

    ResponderEliminar
  20. che son grandes grandes gracias por ayudarmen + 10

    ResponderEliminar
  21. Esto esta de lujo Potro
    Como siempre gracias

    ResponderEliminar
  22. Gracias a ustedes por su visita ;)

    ResponderEliminar
  23. Me parece fantástico, Potro!! Qué bien puede quedar en el blog, muy profesional. Gracias!!

    ResponderEliminar
  24. hola potro hoy te queria preguntar algo es que comenze a postear para my web y otro blog y al psotear algo tengo una nueva interfaz de portear es muy maluca me gusta mas la anterior nose si tu sepas como utilizar la anterior forma de postear es que esta es muy maluca y muy dificil de entender las funciones gracias muy amable

    ResponderEliminar
  25. Pat.mm, seguro que sí, y lo mejor de todo es que es super sencillo de usar :)

    posteador web, ¿te refieres a la nueva interfaz de Blogger? Yo aún no la tengo, así que todavía no sé si se pueda regresar a la anterior, pero en cuanto la tenga lo reviso y te digo ;)

    ResponderEliminar
  26. En tu blog de ciudad blogger BETA, ¿cómo has puesto los enlaces para que cuando se ponga el ratón cambie de color?

    http://ciudadbloggerbeta.blogspot.com/


    Gracias :)

    ResponderEliminar
  27. Hola, Potro! Gracias por este truco, que no lo conocía. Voy a probarlo, pues a mí me sería muy útil, pues tengo algunas entradas largas.
    Antes estuve usando el otro truco que nos habías enseñado, sobre expandir y contraer partes de una entrada (con +/-) y me funcionó bien solo un tiempo. Pero después ya no, así que tuve que quitarlo.
    Solo una duda: por lo que dices en tu post, ¿será que ya no funciona este nuevo truco, si regresamos a la pestaña redactar después de colocarlo? Si es así, avísame, para no frustrarme de antemano (je, je).
    Es que algo similar me pasó con los tooltips que nos enseñaste una vez. Yo podía postear la entrada y editarla luego cuantas veces quisiera, pero solo en la pestaña de html. Pero si volvía a la pestaña redactar, ya todo se dañaba y no funcionaba más.
    ¿Es algo así más o menos lo que pasaría con este Spoiler de ahora?
    Gracias por todo, de antemano.
    Saludos!

    ResponderEliminar
  28. Hola Sr. Potro este se ve mas sencillo que el del scriptaculous, sin efecto obviamente pero mas sencillo de usar, porque el otro me hace cambios en el codigo si paso de editar la entrada en html a redactar y luego a html otra vez el código se me cambia, sin mencionar la cuestión de tener que estar cambiando los dos nombres.
    bueno puedo usar este de java y dejar los que ya tengo en en el otro, no dan problemas juntos?

    ResponderEliminar
  29. Hola Ana,

    Aquí está la información que necesitas:
    http://ciudadblogger.com/2009/06/efecto-de-arcoiris-en-links-al-pasar-el.html

    ResponderEliminar
  30. Hola Vicky,

    Siempre que se usan scripts se recomienda que se redacte la entrada desde la pestaña Edición de HTML, pues aunque algunos de ellos pueden no verse afectados si se cambia a la pestaña Redactar, muchas veces con un pequeño error que cometamos en esa pestaña arruinamos el código.

    En el caso de este código en específico sí funcionará, pero como te decía, siempre y cuando no se cometa ningún error tales como alinear también ese código, darle un formato, etc.

    ¡Saludos!

    ResponderEliminar
  31. Hola Mo,

    No pasa nada si dejas ambos métodos, incluso podrías usarlos conjuntamente y no habría ningún problema de compatibilidad ;)

    ¡Saludos!

    ResponderEliminar
  32. UNA PREGUNTA MI ESTIMADO POTRO SE QUE NO TIENE NADA K VER CON ESTE TEMA PERO TENGO UNA DUDA EN MI BLOG QUIERO PONER UNA ENTRADA CON TRES IMAGENES HORIZONTALMENTE Y ABAJO DE CADA IMAGEN SU DESCRIPCION SE PUEDE HACER ESO O SOLO SE PUEDE UNA IMAGEN ABAJO DE OTRA TE AGRADEZCO ANTES K NADA POR TU ATENCION Y TE FELICITO POR TU BLOG

    ResponderEliminar
  33. MI BLOG ES ESTE Y QUISIERA QUE LAS TRES IMAGENES GRANDES QUEDARAN HORIZONTALMENTE Y SU DESCRIPCION ABAJO COMO LE HAGO LAS DOS QUE DICEN RESIDENCIA Y LA QUE DICE NEGOCIO

    ResponderEliminar
  34. JAJAJA SE ME OLVIDABA ESTA ES LA DIRECCION http://cityvilleextreme.blogspot.com/2011/04/la-primavera-ah-llegado.html

    ResponderEliminar
  35. Hola TH3 V1P3R,

    Sólo pon los códigos de las imágenes uno detrás del otro sin saltos de línea para que se alineen horizontalmente. Si el ancho del área de las entradas alcanza para las tres imágenes entonces las tres se acomodarán en una sola fila, pero si excede el ancho entonces se mostrará una encima de otra.

    ResponderEliminar
  36. OK INTENTARE COMO ME DICES Y PARA ODER ACOMODAR LOS COMENTARIOS ABAJO DE CADA IMAGEN?????

    ResponderEliminar
  37. Buen truco,simple pero eficaz.

    Aprovechando,sabes como quitar esta configuracon en una plantailla:

    lo que pasa esque me gusta una plantilla,pero dicha plantilla tiene la configuracion deque en la pagina principal de las entradas no se ve la imagen de cada entrada como yo la puse,si no que se alinea ala izquierda y se reduce,esta es la plantilla.

    http://www.demo.premiumbloggertemplates.com/2011/04/musicstyle-blogger-template-demo.html


    sabes como quitar esa configuracion,ose lo que quiero esque no se alineen ala izquierda y que no se redusca la imagen.

    de antemano gracias.

    ResponderEliminar
  38. TH3 V1P3R, ummm, en ese caso quizá sea mejor que uses una tabla HTML, así puedes comodar en las celdas de arriba las imágenes y en las celdas de abajo los textos descriptivos.


    NNIOO, tendrías que quitar el Leer más pero desconozco cómo lo hayan puesto, seguro en la página donde lo descargaste o la página del autor podrán asesorarte.

    ResponderEliminar
  39. Oh Gracias Potro jejjee me servira en una entrada proxima :)

    ResponderEliminar
  40. te he dejado un comentario en la entrada de mp3 para no liarte

    ResponderEliminar
  41. potro como hacen algunos blogs para poner una linea separadora en el menu horizontal pero mas corta.. que no ocupe todo el alto del menu.. me ayudas? algo como | <--- eso ponen

    ResponderEliminar
  42. Excelente Potro, justo lo que buscaba. Imagínate si se puede hacer esto con los comentarios...

    Potro, sabes cual es el código para colocar un vídeo, osea tengo el vídeo almacenado en término vídeo.mp4 y quiero el reproductor para colocarlo como se hace con la música o radio¿?

    Saludos :)

    ResponderEliminar
  43. POTRO: Queria preguntarte una cosa a ver si tu puedes ayudarme porque no encuentro solucion a un problemilla.
    Mira, veo que tu tienes puesta publi de Adsense,no? Pues bien, he intentado ponerla en mi blog y si intento ponerla con la direccion www.cajondevida.com me mandan un email diciendome que no me aceptan por falta de contenido (tengo mas de 500 entradas¡, compre el dominio esta navidad), y si pongo http://cajondevida.blogspot.com a las 2 horas me mandan un email diciendome que no me aceptan porque mi sitio es de "dificil navegacion".
    Sabes que puedo hacer o que estoy haciendo mal? A ver si tu o alguien puede echarme una mano.

    ResponderEliminar
  44. Hola, Potro.
    Muchas gracias por todas las aclaraciones.
    ¡Saludos!

    ResponderEliminar
  45. oye potro como estas oye como pusiste ese formulario de contacto en dicha pestaña.

    ResponderEliminar
  46. ¡Gracias Potro!
    Me funciono muy bien.

    ResponderEliminar
  47. PokerPRO, debe ser un simple caracter como | ó ❘

    Pirez, para los comentarios hay uno que usa el efecto deslizante.

    ResponderEliminar
  48. Pirez, lo olvidaba, para ese formato quizá el reproductor JW FLV Player te sirva.

    Loren, no sabría decirte, quizá en el Foro de Ayuda de Adsense sepan orientarte al respecto.

    Daniel, mira aquí.

    Susy, gracias a ti por tu visita!

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

    ResponderEliminar
  50. Exelente Potro, Como siemple, Bueno vengo a ver si me puedes ayudar como siemple lo haces. Esta vez mi duda es la siguiente ¿Como poner algo mas(algo adicional) en la parte del blog que dice Publicado por ๖ۣۜÇΣZΛЯۣ™ (CESAR JERICHO) on 22 de abril de 2011 / Tags: UFC, UFC 129, esa parte esque para los comentarios utilizo un servicion llamado disqus que es para comentarios y instalo eso y me queda en una posicion la cual no es la mejor me gustaria ponerlo al lado de las etiquetas!

    Si no me explique bien aqui una imagen de muestra:

    http://dl.dropbox.com/u/8944635/CBD.PNG
    mi blog es WWEONLIVEpuntocom
    Muchas Gracias!.

    ResponderEliminar
  51. hola potro:
    hoy te queria preguntar si tu sabes como poner 2 anuncios de adsense de 300x250 debajo de las entradas y paginas. y que los anuncios de las entradas solo se vean al entrar a entrada y no se bean en la pagina principalpara ser mas claro como esta pagina http://www.veonaruto.com/2011/04/naruto-shippuden-207-sub-espanol-online.html#more

    ResponderEliminar
  52. Hola Potro.
    Me gustaria que me dijeras una cosa. Te quiero preguntar que si en un comentario que una persona ponga en mi blog, esta persona pone malas palabras, se pueden cambiar las palabras estas por una raya de un color o algo para que no aparezcan
    Muchas gracias.

    ResponderEliminar
  53. Muchas gracias me sirvicio mucho, una pregunta potro, ¿Tú no sabrás comó se llama está plantilla? http://goo.gl/4n0vF, la veo en muchos blogs pero no sé el nombre, por favor ayúdame :(

    ResponderEliminar
  54. ๖ۣۜÇΣZΛЯۣ™ (CESAR JERICHO), mira esta entrada, ahí verás cómo localizar el código de los comentarios y de las etiquetas para ponerlos juntos.


    posteador web, esta entrada sobre 10 lugares donde poner Adsense podrá servirte.

    ResponderEliminar
  55. Hola Marina, no hay manera de editar los comentarios ya sea nuestros o de otros, sólo podemos eliminarlos o dejarlos tal como están. Saludos!

    Hola José Hernandez, no sabría decirte, lamentablemente la mayoría elimina los créditos de las plantillas y ahí se pierde esa información :/

    ResponderEliminar
  56. Hey, muy buen post no se si puedas darte una vuelta por mi blog y decirme que errores de html tiene
    http://www.wweenespmexico.com.ar
    Saludos :D

    ResponderEliminar
  57. hola potro:
    ayudame con este problema
    en mi blog le puse en un gadget unas imagenes con movimiento pero con internet explore no funciona bien. con mozilla y con google crome si funciona perfecto.este es el codigo que use ayudame por favor me urge.

    http://blog-peliculasdvdrip.blogspot.com

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

    ResponderEliminar
  59. ola me podrias ayudar com mi blog lo que pasa que el apartado donde muestra el num. de visitas se hiso muy largo y no se ve bien podrias ayudarme a componerlo este es mi blog con la plantilla sin errores mi blog original esta dentro de el www.oficial-web.blogspot.com

    ResponderEliminar
  60. Hola Potro, con este gadget se consigue tener más entradas por página?, yo lo he aplicado a varias entradas en mi blog pero veo que me permite las mismas. Saludos y gracias por tu blog.

    ResponderEliminar
  61. URGENTE!!!
    Hola Potro... Quiciera que me ayudaras a eliminar un espacio que aparece en mi primer post yo pense que era un proble en el post pero despues publique otra noticia y me salia en la primera entrada trate de eliminarlo por una hora y no coloque la plantilla en otro blog y todo bien.
    Te dejo una imagen para que te des cuenta potro gracias por poner atencion a este comentario espero tu respuesta....

    Mi blog|http://dlivehd.blogspot.com/
    Imagen|http://imagengratis.org/images/espaciolu2ml.jpg

    ResponderEliminar
  62. URGENTE!!!
    Hola Potro... Quiciera que me ayudaras a eliminar un espacio que aparece en mi primer post yo pense que era un proble en el post pero despues publique otra noticia y me salia en la primera entrada trate de eliminarlo por una hora y no coloque la plantilla en otro blog y todo bien.
    Te dejo una imagen para que te des cuenta potro gracias por poner atencion a este comentario espero tu respuesta....

    Mi blog|http://dlivehd.blogspot.com/
    Imagen|http://imagengratis.org/images/espaciolu2ml.jpg

    ResponderEliminar
  63. Genial...como siempre insuperable.Andava buscando algo parecido para mi blog y esto vá genial.Muchas gracias Potro.

    ResponderEliminar
  64. admin, el atributo marquee ya es muy viejo y en los navegadores recientes de IE sólo permite el texto en movimiento mas no imágenes.


    AdminPrime, no he entendido, no veo ningún contador ahí.


    tycon, no, aunque no muestra el contenido el navegador lo sigue cargando y leyendo, así que no te servirá para mostrar mayor número de entradas.

    ResponderEliminar
  65. ◄┼ ♥ ┼ ► Rodrigo◄┼ ♥┼ ►, pues supongo que ya lo has resuelto porque no veo en ninguna de tus tres ultimas entradas el espacio que mencionas.


    AMPA- IGE, qué gusto que te ha sido útil :)

    ResponderEliminar
  66. wena potro hace tiempo estaba buscando como hacerlo con la imagen :D

    ResponderEliminar
  67. hola potro primero que nada como estas,el temaque te voy a comentar no tiene nada que ver con este,
    una pregunta sabes,ya apliqué el leer mas mejorado 1 bueno sabes quisiera saber si a las imágenes en miniatura se le puede agregar un borde de color y esquinas redondeadas grácias

    Espero tu respuesta

    Saludos

    ResponderEliminar
  68. hola potro espero que te encuentres bien muy buen efecto quisiera saber si tambien sirve para gagets a una cosa queria pedirte un favor si podrias votar en esta pagina

    http://www.13.cl/programa/quiero-mi-fiesta/contenido-exclusivo/su-fiesta-tu-votas-ellos-ganan?fb_comment_id=fbc_10150158895284197_16020072_10150163299399197#f202963bdeb7594

    por Cuarto Alocado San Isaac
    tienen que hacer por medio de tu face y poner me gusta, please te lo agradeceria mucho cuidate i sgue a si con este blog nos vemos

    ResponderEliminar
  69. perdon por el error ortografico al final fue un error de tipeo

    ResponderEliminar
  70. entonces que atributo le puedo poner para que funcione las imagenes con movimiento

    http://blog-peliculasdvdrip.blogspot.com

    ResponderEliminar
  71. Sirius, super fácil con la imagen ¿no? :)

    Daniel, cualquier duda sobre ese tema vamos a verlo en esa entrada para no desviarnos del tema principal de este post ;)

    Atem Muto, ¿te refieres a ponerlo dentro de un HTML/Javascript? Sí, o si te refieres a que un gadget se expanda y contraiga completamente entonces ese post viene en un par de horas más.

    admin, probablemente algún script que cumpla con esa función, a ver si después encuentro algo parecido para publicarlo.

    ResponderEliminar
  72. a ok gracias entonces te lo pregunto en esa entrada?

    ResponderEliminar
  73. hola potro: tu sabes como se coloca esta opcion que dice quizas tambien te interesee.

    para ser mas explicativo te dare una apgina donde lo tiene y ahy muchas ke lo tienen y ps rrecurro a usted que sabe de eso .
    esta es la web de donde te digo ke esta lo que quiero http://www.dospuntocerovision.info/agua-para-elefantes-online-espanol-latino/ gracias potro XD

    ResponderEliminar
  74. hola potro con tu permiso le respondo XD.
    Facil abajo hay unas letritas pequeñas que dice
    LinkWithin

    cliquea en ese enlace es un widgedt.

    Explicación:

    Ya al haver entrado en esa página colocas tu correo.

    Blog Link: Es tu url de tu blog

    Platform:Eliges tu plataforma Blogger Wordpress u otro.

    Width: es cuantas entradas relkacionadas quieres que se muestren

    luego si quieres marcas la opción de abajo.

    para terminar seleccionas Ged widget!

    esto generará un código para que lo pegues justo debajo de las entradas y luego guardas el diseño

    saludos

    Visita mi sitio si quieres ciberexperto.blogspot.com

    ResponderEliminar
  75. ejjejejee bravo ecxelente mcuhas gracias hacen tremendo ekipo ustedes dos XD y buena tu pagina aunke ya la conocia de ahy e sacado varias cosas XD

    ResponderEliminar
  76. muchas grácias intento ayudar.

    Saludos

    ResponderEliminar
  77. Daniel, sí porfa, deja la pregunta allá, y gracias por responder ;)

    ResponderEliminar
  78. Hola Potro!
    Voy a probar este truco en cuanto pueda, creo que tengo que sacar Scriptaculous... a ver si este me funciona!
    Ando medio enloquecida de trabajo, así que quizás demore en poder probar, pero cuando lo pruebe te cuento (capaz que preferís que no!).

    Risueñamente,
    Karen

    ResponderEliminar
  79. De hecho no es necesario sacar Scriptaculous (al menos no para este truco) pues no interfiere en nada.
    Que todo salga bien cuando lo pruebes y claro que quiero que me cuentes cómo te va con ello ;)

    ResponderEliminar
  80. Voy a demorar, pero te prometo que te cuento jaja! Y el de hoy también me gustó... espero tener tiempo.

    Sabes que pronto tendré quien me ayude con esto (yo sola no puedo con todo), y me han sugerido cambiarme a Wordpress.

    Como te dije, entiendo muy poco y claro, le tengo cariño a "Blogspot"! Tus trucos pueden usarse también en otros sitios? Qué diferencia hay entre Blogspot y Wordpress?
    (Si es que puedes comentar al respecto, espero que no esté mal preguntarte, y si no puedes/quieres responder también lo entiendo!)

    Saludos!!!
    Karen

    ResponderEliminar
  81. No sé si es Wordpress o Worldpress.... *lol*

    ResponderEliminar
  82. Hola Potro, lo primero felicitarte por el trabajo.
    Yo utilizo Apture o Scrib para lanzar una ventana pop up, pero por alguna razón no siempre funcionan bien así que utilizo código para abrir las ventanas Pop up.
    Este código me parece muy interesante, lo he probado y funciona bien.
    Pero mi pregunta es, si ¿solo sirve para imágenes que acepta blogger además de los embed? ¿O se puede enlazar por ejemplo con una página web?
    ¿No sé si lo he explicado muy bien?
    Saludos y gracias

    ResponderEliminar
  83. VK Import, pues diferencias hay muchas, una de ellas es que Blogger es gratuito y en Wordpress tienes que pagar el dominio anual y un hosting cada mes. Los trucos de aquí no se pueden aplicar ahí pues es otra plataforma y otro método para hacer las cosas, nunca lo he usado pero dicen que es muy fácil siempre y cuando se tengan conocimientos básicos de programación.


    Txolarte, no estoy seguro de haberte entendido, ¿me puedes dar un ejemplo más detallado?

    ResponderEliminar
  84. Potro:
    Un abrazo y un archirequeterecontragrande
    ¡¡¡ G R A C I A S !!!
    porque además de compartir con todos los "ciudadanos" tus conocimientos, siempre te das tiempo para CONTESTAR y COMENTAR las publicaciones que aparecen en los post's de tu blog. Lo dicho TODO UN CABALLERO.

    Hasta pronto.

    Susy

    ResponderEliminar
  85. http://www.dembowz4.net/
    queria darle la racia AL POTRO POR SU ESTUPENDA WEB. GRACIA A SUS ENTRADAS Y CONSEJO E ECHO MI BLOGGER QUE ES DE MUSICA URBANA PARA DERCARGAR DEMBOW,REGGAETON,BACHATA,SALSA Y MAS SI QUIEREN LA PUEDEN VISITAR Y DECIRME COMO ME QUEDO GRACIAS http://www.dembowz4.net/

    ResponderEliminar
  86. Te agradezco mucho tu comentario Susy, un abrazo grande también para ti :)

    ResponderEliminar
  87. Dembowz4, gracias a ti por tu visita!

    ResponderEliminar
  88. http://areadehumanidadesrhida.blogspot.com/ ¿como hacer en el ultimo divspoiler de la imagen para que muestre el contenido al principio y poder ocultar cuando se de click sobre ella????

    ResponderEliminar
  89. La duda que tengo es la siguiente:
    Cuando utilizo el código para Mostrar/ocultar ¿Qué elementos puedo ocultar y mostrar?
    He probado con una foto JPG y un gif , también insertando el código embed de un video youtube y en los dos casos funciona bién.
    No obstante si ,quisiera mostrar/ ocultar un documento pdf alojado en google sites ,supongo que no puedo hacerlo si no lo convierto en JPG.
    Supongamos, que en una de mis entradas quisiera hacer referencia a una entrada de tu blog. Con una ventana emergente pop up si puedo hacerlo, pero con la opción Mostrar/ Ocultar supongo que no.
    En resumen ¿el código Mostrar /ocultar solo se puede utilizar para imágenes con los formatos que acepta el blog, además de los embed ? O por el contrario se puede aplicar de otra forma.
    Gracias por tu atención

    ResponderEliminar
  90. Hola Potro!
    Gracias por tu respuesta y asesoramiento.
    Hablaré al respecto con quien me va a ayudar (que sí tiene conocimientos de programación).

    Extrañaría horrores tus trucos, además...

    :))))
    Saludos!!!
    Karen

    ResponderEliminar
  91. Edison urquijo, en ninguno de los casos el botón, enlace o imagen desaparecen, sólo el contenido a ocultar.

    Txolarte, puedes ocultar cualquier elemento que sea admitido en las entradas, ya sea una imagen (en cualquiera de sus formatos), una tabla, un formulario, un video, etc. En el caso de los documentos PDF no se muestran así nada más, necesitas de un servicio para poder mostrarlos en el blog.

    VK Import , suerte!!!

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

    ResponderEliminar
  93. Sobre ese problema vamos a verlo en la entrada que corresponde para no desviarnos del tema principal de este post ;)

    ResponderEliminar
  94. Tienes razón, la pongo donde debe estar.
    Gracias

    ResponderEliminar
  95. HOLA POTRO HAY UNA COSA QUE ESTADO BUSCANDO Y VISITANDO LOS BLOGGER DE wordpress E NOTADO ESTAS ENTRADAS ANTES DE ENTRAL AL BLOGGER EJEMPLO.(http://konklase.com/) ME GUSTARIA SAVER SI SE PUEDE ASER EN BLOGGER PARA YO COLOCAR MIS ANUNCIOS Y BOX DE FACEBOOK SI ES SI POR FAVOR UN TUTTORIAL PARA VER COMO SE ASE ESO ES MUY IMPORTANTE SI ESISTE SAVER COMO SE ASE E PENSADO COLOCAR UNA ENTRADA DE ALERTA COMO ESAS CUANDO ENTRAS A LAS WEB PORNO Y MODIFICARLA PERO NO E ENCONTRADO NADA.. AYUDA PLISS.. POTRO

    ResponderEliminar
  96. OTRA COSA POTRO.. COMO PONGO LOS ANUNCIOS GOOGLE FLOTANTE EN MI BLOGGER Y EL BOX FACEBOOK EN EL CENTRO DE LA PANTALLA

    ResponderEliminar
  97. no me explique bien creo... lo que queria decir era si teniendo a imagen (divspoiler) o el boton el contenido se muestre al cargar la pagina para cuando el lector quiera ocultar el objeto para no generar incomodidad

    ResponderEliminar
  98. sin embargo gracias por intentar responderme

    ResponderEliminar
  99. me gusta este blog buenos consejos para dar vida a nuestros blogs gracias por darnos ideas.. @el potro

    ResponderEliminar
  100. ¿Te refieres a que al cargar se muestre el contenido y que al presionar el botón se oculte? Si es así entonces el código sería este:


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

    ResponderEliminar
  101. agradezco tu ayuda "el potro", muchas gracias, ahora quisiera saber, tal vez esto te sirva, visita la pagina de yahoo.com y si puedes enseñanos como crear banners como el de las principales noticias de yahoo. para poder organizar nuestros blogs de na forma interactiva y animada con estos banners

    ResponderEliminar
  102. Exactamente así no tengo nada ahora, pero en el buscador de aquí busca 'slider' y encontrarás algunos que quizá puedan servirte.

    ResponderEliminar
  103. Hola potro y gracias por el tuto
    pero nececito ayuda...
    como seria para que el contenido apresca encima del boton?...ayudate con eso porfa
    y gracias de antemano :)

    ResponderEliminar
  104. Esa te la debo pues no tengo idea, quizá agregando ahí una propiedad 'position' pero no lo sé, nunca lo he intentado :/

    ResponderEliminar
  105. bueno... cualquier cosa avisa
    igual gracias

    ResponderEliminar
  106. Hola El Potro muchas gracias por el código pero tengo un problema y es que al escribirlo en el editor html de las entradas me aparece el spoiler pero no hace nada de nada y me aparece lo que quiero ocultar debajo del spoiler si me pudieses ayudar o decir algo que me pueda servir te daría las gracias al cuadrado :) Saludos

    ResponderEliminar
  107. Hola Elrhin,

    Quizá has modificado los espacios del código o has cambiado a la pestaña Redactar.
    Prueba hacerlo de nuevo sin quitar espacios o modificar el código principal y sin cambiar a la pestaña Redactar.

    ResponderEliminar
  108. GRACIAS SIEMPRE SE ME OLVIDAN ESOS CODIGOS.

    ResponderEliminar
  109. Hola Potro, la verdad es que no se donde enviarte en privado así que te envío este aporte en publico: http://neomyz.com/ en esta pagina puedes publicar las ultimas entradas en flash de una forma muy elegante... saludos

    ResponderEliminar
  110. Gracias artedigitalmcy, de hecho ya hay una entrada sobre ello :)

    ResponderEliminar
  111. Bueno aquí va otro, se trata de uno de los Gagget mas interesantes que he visto, es el lindo pajarito de Twitter Volando en el Blog.. Y te invita a unirte o a enviarte un Twit lo pueden ver en mi sitio: www.artedigitalmcy.blogspot.com

    Tengo el código pero este sitio de mensajes no deja enviar el script.. dime por donde te lo envío
    me sale este mensaje: Su HTML no es aceptable: Etiqueta no permitida: SCRIPT

    ResponderEliminar
  112. Ese está muy lindo y muy solicitado de hecho, aunque ya Oloblogger publicó esa entrada. Pero sí, es una reliquia :)

    ResponderEliminar
  113. buenas el potro, es muy interesante tu blog pero tengo una pregunta. Ya he puesto el botón de mostrar en mi entrada, pero yo quiero que me salga el video de youtube con la imagen como sale en tu ejemplo, y a mi me sale cuando le doy al boton tan solo el link. Como puedo meter el video como en tu ejemplo?
    gracias

    ResponderEliminar
  114. Tienes que agregar no el enlace del video sino el código del video incrustado que obtienes de la página de YouTube.
    Saludos.

    ResponderEliminar
  115. muchas gracias tio, ahora lo acabo de ver
    muy bueno tu blog, seguire mirando cosas haber que tienes cosas interesantes por aqui
    si me das permiso te pongo el url de mi blog para que le heches un vistazo, pero antes con tu permiso, no voy a hacer publicidad de mi blog en tu blog jaja

    ResponderEliminar
  116. Ya lo he mirado desde tu perfil :)
    ¡Mucho éxito!

    ResponderEliminar
  117. ok gracias
    como has podido comprobar la cosa salió muy bien
    me he hecho seguidor

    ResponderEliminar
  118. Lamentablemente esos códigos no funcionan para BLOG gratis de Wordpress

    ResponderEliminar
  119. No lo sé Marianne, todos los trucos de este sitio están enfocados a los blogs de Blogger únicamente.

    ResponderEliminar
  120. ho! gracias Potro, era lo que necesitaba...

    ResponderEliminar
  121. Tengo una duda…

    Ya he puesto el código y si funciona, me ha quedado perfecto, pero necesito que la imagen este centrada ¿cómo le hago?

    Gracias.

    ResponderEliminar
  122. Encierra la imagen entre <center> y </center>

    ResponderEliminar
  123. hola potro y si lo q quiero es mostrar ttodo el contenido, ve tengo un blog el cuaAL ES PARA DESCARGAR MUSICA Y RESULTA UN FASTIDIO Q SOLO SALGA LA IMAGEN DE LA MUSICA A DESCARGAR Y NO EL ENLACE PARA DESCARGAR-- PERO MAS FASTIDIOSO RESULTA QYUE SI MI ENTRADA ES UN VIDEO TIENEN AJURO QUE ENTRAR EN ELLA PARA PODER VER EL VIDEO OSEA NO SE VE AFUERA EN LA ENTRADA SI NO HACIENDOLE CLIC A LA ENTRADA ME ENTIENDES ENTONCES NECESITO UNA AYUDA POR FA CUANTO MAS PRONTO MEJOR TE LO AGRADECERIA DE TODO CORAZON

    ResponderEliminar
  124. Hola Urbana,

    No me queda muy claro tu problema sin saber cuál es la dirección de tu blog, pero supongo que has te detener un script de Leer más que genera resúmenes automáticos. Si es así entonces la solución es quitar ese Leer más para que muestre la entrada completa. En los próximos días publicaré una entrada que habla sobre ese tema.

    ResponderEliminar
  125. bueno potro este es mi blog www.somosurbanos.tk entra y ve q me sale solo una imagen y para ver el contenido completo debes de dar en el nombre de la entrada. y bueno no le instale lo q tu dices solo fue una plantilla q me pareció bonita y la coloque en mi blog espero tu ayuda gracias por responder

    ResponderEliminar
  126. Efectivamente es como te decía, tendrías que quitar el Leer más para que eso no suceda.
    Si te urge mucho mira esta entrada, ahí se explica cómo instalar el Leer más, tú harías lo contrario para eliminarlo.
    Recuerda antes hacer un respaldo de tu plantilla.
    Saludos.

    ResponderEliminar
  127. muchas gracias corazón ya di con el problema.
    aquí coloque el cogido a eliminar pero no quiere cargar el mensaje con el código

    bueno gracias potro en verdad me fuiste de mucha ayuda gracias

    ResponderEliminar
  128. script type='text/javascript'>createSummaryAndThumb("summary");</script

    ResponderEliminar
  129. ese es el código a borrar bueno en el caso de mi plantilla

    ResponderEliminar
  130. Hola potro, resulta que estoy de insomnio y decidí escribir una entrada algo extensa para probar los botones de mostrar, el problema es que a la hora de publicar la entrada y dar click en los botones no sucedía nada. Así que mejor utilicé los enlaces, pero hice una prueba poniendo un botón a otro texto y éste si funcionó.

    La cosa es que el texto en el que quería poner botón, lo escribí primero en redactar, ademas de que agregue viñetas. Sospecho que alguna de esas o ambas fueron la razón de que el botón no sirviera. ¿Crees que hay algún modo de corregir eso? Espero tu respuesta.

    ResponderEliminar
  131. Hola katty la Oruga,

    Es posible que haya sido porque lo pusiste en el modo Redactar, o porque en algún momento cambiaste a esa pestaña.
    Cuando se trata de un script siempre se deben poner los códigos en la pestaña Edición de HTML, de lo contrario pueden no funcionar.

    Quita el botón, ponle a tu entrada los estilos y formato que quieres en Redactar, cuando termines cambia a la Edición de HTML y pon el código del spoiler.

    Saludos.

    ResponderEliminar
  132. Hola potro, pues ya lo volví a intentar y funcionó bien esta vez. Parece que cometí un error al centrar los botones, pero igual gracias por el consejo, no sabia que cambiar a la pestaña redactar afecta los códigos. Saludos y gracias de nuevo.

    ResponderEliminar
  133. Qué gusto que ya está todo resuelto. ¡Saludos!

    ResponderEliminar
  134. Hola Potro!!

    Gracias por este post, la tecnica ya la implemente en algunos blog y me funcionó de maravilla pero fijate que quiero este mismo efecto pero dezlizar el contenido hacia el lado derecho, es que tengo unas imagenes a la izquierda pero quiero que cuando les den click salga el contenido a la derecha.
    ¿¿¿Potro se podrá de alguna manera estando dentro de una entrada?????

    Gracias por adelanto potro!... ;)

    ResponderEliminar
  135. Hola Circulo W.H.,

    Me temo que no, al menos no con este método pues lo que hace es sólo condicionar que un elemento se muestre o se oculte y eso para cualquier navegador siempre será de arriba para abajo.
    No sé si haya algún otro script que pueda hacerlo, pero si me entero de algo te aviso ;)

    ResponderEliminar
  136. Potro a mi me gustaria ocultar alguna parte de lo que sale en mis entras por ejemplo entra a esta pagina... http://www.alofokemusic.net/ y dale click a unas de sus entradas y veras que mas abajo dice.. nota: usuarios frecos ayudenos a promover ECT quisiera algo haci Gracias!

    ResponderEliminar
  137. Pues veo esa nota que mencionas pero no entiendo qué tiene que ver con el spoiler o qué oculta ese mensaje, porque sólo he visto un simple texto en la entrada :/

    ResponderEliminar
  138. yo tengo un blog y se Trata sobre lo mismo que el Dueño de esa hace publicar noticias y cosas de artista y me gusta saber como hacer algo haci aunque no sea con el spoiler!! porfavor me gustaria saber!

    ResponderEliminar
  139. No me ha quedado muy claro, ¿me podrías dar más detalles?

    ResponderEliminar
  140. Bueno Okey... Cuando yo Publique una entrada me Gustaría saber como puedo poner una descripción hasta donde yo quiera que se vea, Pero cuando entren... Que mas Abajo aparezca una nota como la de la pagina que te mande Y Tanbien me gustaría saber que hay personas que publican una entrada y cuando entras a verla por completo no aparece la imagen que se veía a lo Primero! bueno espero que entienda Gracias!

    ResponderEliminar
  141. Que cada ves que publique algo en cada entrada aparezca eso cuando miren la entradas completa!

    ResponderEliminar
  142. Puedes usar el Leer más automático con imágenes en miniatura, esos resúmenes sólo se verán en la portada.
    Y puedes complementarlo eligiendo qué mostrar en el resumen de manera que la descripción y la imagen que elegiste sólo se vea en la portada pero al ingresar a la entrada completa no se verán.

    ResponderEliminar
  143. una pregunta ya no funciona este codigo lla no muestra al dar clic desde que cambio la apariencia de bloger hay alguna manera de solucionarlo

    ResponderEliminar
  144. Sigue funcionando sin importar la interfaz. Lo que quizá puede estar sucediendo es que lo has puesto desde el modo Redactar y no en HTML. O bien, que lo pusiste en HTML y luego cambiaste a la pestaña Redactar.

    ResponderEliminar
  145. Te rifaste un chingo con esto, a pesar de que parece que ya es algo conocido, gracias a ti pude poner una imagen bonita como botón para ocultar contenido.
    Visítanos por aquí para que veas lo que tu ayuda hizo posible.

    Saludos

    ResponderEliminar
  146. necesito un codigo que sea primero que se le de click a un script y luego abra el spoiler

    alz-master@hotmail.com

    ResponderEliminar
  147. No he entendido AIRON, ¿me puedes dar más detalles?

    ResponderEliminar
  148. Hay alguna manera en la que se puedan meter los emoticons de los comentarios en un spoiler?

    ResponderEliminar
  149. ¿Te refieres a la imagen de ejemplo que contiene los emoticones? Sí, sólo agrega esa imagen dentro del spoiler.

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

    ResponderEliminar
  151. Potro, una vez que inserto el poiler de Mostrar/Ocultar, y en donde debo poner ALGO para que muestre, pongo el codigo de un video de youtube, y no aparece nada :/ , presiono en el enlace MOSTRAR/OCULTAR y nada.. no aparece nada.

    ResponderEliminar
  152. ๖̶̶̶̶̶̶๋๋๋๋๋๋๋ۣۜJosε ๖̶̶̶̶̶̶๋๋๋๋๋๋๋ۣۜŞцgoi , mira el comentario #103, ahí está el código que usarías.

    ResponderEliminar
  153. [Administrador], ¿exactamente en qué parte del blog lo has puesto?

    ResponderEliminar
  154. Potro!!! nuevamente paso por aquí, un gusto saludarte...

    Adivina!!, tengo un pequeño problema con uno de mis blogs, te comento, modifiqué la plantilla para quitarle el "leer más", pero recién me acabo de dar cuenta que no me aparece lo que escribo en las entradas o.O, espero que me puedas ayudar a corregirlo (como siempre lo has hecho), quizás me pasé en borrar una parte del código de "leer más", o no sé realmente que fue el problema, el blog es miestuchera.blogspot.com

    ResponderEliminar
  155. Verifica que tengas la etiqueta <data:post.body/> antes de:
    <div style='clear: both;'/> <!-- clear for photos floats -->

    Sino la tienes agrégala. Recuerda siempre hacer un respaldo de la plantilla, y antes de guardar cambios darle Vista Previa para cerciorarte que esos problemas no ocurran. Saludos.

    ResponderEliminar
  156. Entonces reinstala la plantilla porque sabrá Dios qué más habrás eliminado :/

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

    ResponderEliminar
  158. Ok potrillo amigo, era lo que me temía de respuesta...

    Aún así, gracias por tu buena disposición :D

    ResponderEliminar
  159. Como puedo poner un block de nota ?
    Ej. quiero que me muestra linea por linea, la forma que usted indico me muestra todos seguidos en la misma linea.

    01 . Peso .....
    02 . Dimension ....
    03 . Cantidad .....
    04 . Origen .....

    etc


    Y hay algunas forma de hacer ocultar en varias capas, dentro de un ocultar existe otro ocultar

    saludo

    ResponderEliminar
  160. Que dentro de un spoiler haya otro no lo sé, sería cuestión de que lo intentes y veas el resultado.
    Para que queden en forma de lista puedes usar el ícono de viñetas que está en el editor de entradas, o dar un salto de línea (ENTER) entre cada línea que quieras. Si das el salto de línea pero sigue mostrándolos en una sola línea entonces agrega después de cada línea este caracter:
    <br/>

    ResponderEliminar
  161. Gracias Potro el salto de linea se puede con


    Pero uno dentro de otro no funiona se guramente lo puse mal

    ResponderEliminar
  162. por otro lado como seria si o quiero configurar directamente dentro del BBCODE

    [spoiler] TEXTO QUE QUIERO [/spoiler]

    ResponderEliminar
  163. Esa etiqueta no existe dentro del lenguaje de Blogger. Es por eso que usamos estos scripts para que funcionen las cosas.

    ResponderEliminar
  164. mmm interesante eso, siempre tan útiles tus trucos ;) ...

    es posible que con el spoiler se pueda hacer algo como esto:

    quisiera hacer algo como un abecedario

    A|B|C|D|E.....Z

    y que al dar clic en una letra se expanda el contenido, pero al dar clic a otra letra se contraiga el contenido de la que estaba abierta y se abra la última que abrí

    se puede hacer eso?? gracias :)

    ResponderEliminar
  165. Con este sistema no, tal vez con un tabview, aunque en ellos el contenido no está oculto; debe haber alguno que se expanda pero nunca me he topado con uno de ellos.

    ResponderEliminar
  166. muchas gracias potro, voy a ver si hago con el metodo de "enlaces en una misma entrada", lo malo es que va a ser muy extensa por que si es bastante contenido :S

    gracias :)

    ResponderEliminar
  167. "katty la Oruga", Jajaja, muy bueno ese nickname! :D

    ResponderEliminar
  168. Potro, para hacer este truco pero alreves, osea que el contenido se visualise y al presionar la imagen lo oculte, que cambio o que hago?

    ResponderEliminar
  169. Potro este truco no funciona en mi blog, sigo los pasos tal cual explicas pero no funciona, que es lo que hago mal? echale un vistazo a mi blog y me dices, gracias de antemano amigo mio.

    http://schizophrenicdance.blogspot.com/?zx=7b8fb2a9be643b36

    ResponderEliminar
  170. Acabo de darme cuenta que funciona solo en el explorer, pero en mozilla, crome y safari no funciona, a que es debido?

    ResponderEliminar
  171. ¿Exactamente en qué parte lo has puesto Julio? Porque en las tres primeras páginas de entradas no lo veo por ningún lado :/

    ResponderEliminar
  172. Bueno pues ya funciona Potro, gracias a ti, algo tan sencillo como ponerlo en EDICION HTML, y yo sin saberlo, yo lo ponia en REDACTAR por eso no funcionaba, gracias de nuevo y un saludo.

    ResponderEliminar
  173. Gracias por esta valiosa inf

    tengo una duda yo use el spoiler con la imagen y me funciono, pero queria saber si hay alguna forma de que que me aparezca la imagen y al darle clic y se muestre el contenido oculto aparezca otra imagen, y si le vuelvo a dar click a parezca la primera imagen.

    Para ser mas claro seria algo como que apareciese la palabra "mostrar" y "ocultar"

    pero seria con dos imagenes.

    Trate de editar el codigo pero sin exito alguno no soy muy habil en el html y derivados.

    Habra alguna forma de hacer lo que me propongo

    ResponderEliminar
  174. Ni idea Allistter, supongo que con un script más elaborado se podría, pero no se me ocurre cómo :/

    ResponderEliminar
  175. Te cuento que con las plantillas nuevas el spoiler PARA OCULTAR Y MOSTRAR CONTENIDO DE UNA ENTRADA no se activa (NO SE ABRE).... lo curioso es que los que tenia anteriormente instalado EN OTRO BLOG no tienen ningún problema sino cuando quise instalar uno no funcionó

    ResponderEliminar
  176. Hola @Liderforever10,

    EL spoiler debe funcionar sin importar la plantilla. ¿En cuál blog y en qué parte has puesto el spoiler que no te funciona?

    ResponderEliminar
  177. ok.. te explico después de hacer varias pruebas, la razón que no me abre es cuando cambio de HTML a REDACTAR y luego le doy "centrar" las imágenes, (las que he colocado para abrir el Spoiler) en cambio cuando las dejo tal cual se hizo en HTML, funciona perfectamente, ubicadas en el lado izquierdo, el detalle es centrada es como se ve mas "presentable".. no se como puedo hacer en ese caso...

    ResponderEliminar
  178. Mira esta entrada, justamente habla sobre ese tema de cuando usamos códigos y scripts en las entradas:
    http://ciudadblogger.com/2009/11/como-poner-los-codigos-correctamente-en.html

    ResponderEliminar
  179. Hola Potro, lo aplique en esta entrada pero pasa que en vez de tomar el texto+imagen como links me toma todo el ancho de la columna de post.
    Como lo puedo solucionar?
    Muchas gracias Potro y como te comente por G+ de 10 el diseño nuevo

    ResponderEliminar
  180. Yo lo veo todo bien, al dar click sólo aparece "Aquí el contenio que queremos ocultar"

    ResponderEliminar
  181. Si si Potro, me referia a que no solo se activa al clickear sobre texto o imagen si no tambien fuera de ello en esta zona.
    No se si es que hay algo de mas o no.
    Un saludo potro.

    ResponderEliminar
  182. Ah, ahora entiendo :)
    Lo que pasa es que incluso el enlace para mostrar y ocultar lo metiste dentro de la tabla, y la tabla tiene todo ese ancho.
    Necesitas poner el enlace fuera de la tabla, es decir, poner el código tal como se ejemplifica en la entrada, y donde dice "Aquí el contenido que queremos ocultar", ahí pon la tabla que deseas ocultar.

    ResponderEliminar
  183. Ok gracias Potro.
    O sea que no es posible darle el la misma accion al texto+imagen no?
    De ser que si, como pdria agregar ambos y que queden alineados, o propiamente, que le puede agregar propiedades para ajustar su alineacion.
    Un saludo Potro que estes bn.

    ResponderEliminar
  184. No es que no se pueda, sino que si todo lo agregas en una tabla entonces presentarás ese inconveniente.
    Puedes usar ese mismo método de la imagen, antes o después pones el texto que quieres, y dentro del código de la imagen agrega esto:
    style="vertical-align:bottom"

    Si no se alinea, cambia el bottom por middle

    ResponderEliminar
  185. Perdona, ¿el primer código no es un javascript verdad?
    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'; }
    Tengo esa duda.

    Gracias.

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

    ResponderEliminar
  187. Sí, esa es una función Javascript.

    ResponderEliminar
  188. Ok Potro, y hay otra forma de poder alinear la imagen con el texto o sea bajarla unos pixeles porque probe agregandola dentro de un div pero me la manda a un segundo parrafo.
    Un abrazo muchas gracias.

    ResponderEliminar
  189. Para eso es el código que te di, para que la imagen pueda alinearse con el texto.

    ResponderEliminar
  190. Hola Potro. Todo sale bien pero el botón de Mostrar no sale centrado, y cuando lo centro no abre entonces no se que hacer..

    Muchas Gracias!

    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