Expandir y contraer partes de una entrada

12 de octubre de 2009 256 comentarios ,
Este truco permite esconder partes de una entrada y con la posibilidad de mostrarlos cuando el lector quiera. Se puede esconder texto, imágenes o video y sirve para ahorrar espacio cuando tenemos un elemento muy largo dentro de la entrada.
Este es un ejemplo con una imagen:

[+/-] Ver / Ocultar

Lo mismo se puede hacer para un texto:

[+/-] Ver / Ocultar

O incluso con un video:

[+/-] Ver / Ocultar

Primero vamos a Plantilla | Edición de HTML y antes de </head> pegamos lo siguiente:
<!-- Prototype y Scriptaculous-->
<script src='http://www.google.com/jsapi'></script>
<script>
google.load("prototype","1.7.0.0");
google.load("scriptaculous", "1.9.0");
</script>
<!-- Prototype y Scriptaculous-->


Antes de pegar lo anterior verifica si tu plantilla ya lo tiene, de ser así omite ese paso.
Lo siguiente será usar el código que es el que ocultará las partes dentro de un post. Así que cuando quieras ocultar algún elemento de la entrada deberás usar este código:
<a href='#' onclick='Effect.toggle("expandir1","slide"); return false'>[+/-] Ver / Ocultar</a><div id='expandir1' style='display: none;'>Aquí va el contenido que se ocultará</div>

Toma en cuenta que donde dice expandir1 deberás cambiarlo cada vez que quieras usar este efecto, puedes modificarlos por expandir2, expandir3, etc. Lo que está en color rojo es el contenido que estará oculto, puede ser texto, imágenes, tablas, videos, etc. cualquier elemento que tengas dentro de un post podrás ocultarlo.

Vía | El escaparate de Rosa


256 comentarios en:

" Expandir y contraer partes de una entrada "

  1. Hola Potro.
    Como siempre, excelente!
    Saludos.
    Jpz.-

    ResponderEliminar
  2. Esto solo funciona en un post ,no se puede usar en las pestanas para ocultar fotos o enlaces que ocupen mucho espacio?

    ResponderEliminar
  3. Bona: funciana para las dos,muy buen aporte potro!!!(se que funcina para las dos porque trucoteca lo tiene)

    Salu2

    ResponderEliminar
  4. Jpz, ojala te sea útil =)


    www.bonaisima.com, no sé a qué pestañas te refieres.


    Emanuel Martinez, funciona tan bien que están los ejemplos en el post ;)

    ResponderEliminar
  5. hola el potro, este truco ya lo habia visto antes y lo llegue a utilizar en una entrada de uno de mis anteriores blogs, espero que a muchos les sirva, hasta pronto.

    ResponderEliminar
  6. epa que bueno esta esto, ya lo puse en algunas entradas y se ve genial, como siempre excelentes trucos, gracias!!!

    ResponderEliminar
  7. Hola Ascesino96, seguro a alguien le servirá. Saludos.

    NO_NAME, ya tenía rato que no te leía por estos rumbos, no te pierdas tanto. Un abrazo!

    ResponderEliminar
  8. Potro bonainisima se referia como para usarlo en un Gadget,esoo creo que queria decir bonainisima

    ResponderEliminar
  9. Pues no porque no me funcciona ,he creado un blog de prueba y tampoco ,solo me sale esto cuando le doy a ver/ocultar http://pruebabonaisima.blogspot.com/# arriba en el gotzila browser ,no se porque potro ...me puedes ayudar ,he hecho todo al pie de la letra ,y nada

    ResponderEliminar
  10. Cuando escribas la entrada verifica que estés en la pestaña Edición HTML y no en la de Redactar, a veces por esta cuestión se cambian los códigos y evita que funcione como debería.

    ResponderEliminar
  11. Pues ahora me funciona en el blog de prueba en los post ,pero en bonaisima no quiere funcionar ,sera porque tengo mas codigos ahi en esa pagina ,pero no tengo este codigo repetido ,he mirado y nada ..gracias por tu ayuda

    ResponderEliminar
  12. Es justo porque no lo tienes que no funciona, necesitas poner ese primer código en la plantilla para que funcione.
    Saludos.

    ResponderEliminar
  13. Potro ¡¡¡Excelente!!!

    Al principio no me salía (me daba una rabia) hasta que me dí cuenta que donde dice expandir1 está dos veces, o sea que hay que cambiarlo luego 2 VECES: ahí estaba la falla, mi falla. Pero una vez que uno revisa lo que hizo mal... sale. =)

    Gracias, gracias, gracias !!!

    Quedó genial.

    Ahora a ponerlo en el blog original (estaba en blog de pruebas)

    Abrazos ! :)

    ResponderEliminar
  14. Preguntas y dudas:

    ¿Como sale esto en el feed? (yo dejé el/la feed que llegue con el post completo, si utilizo este tip ¿como sale?)

    Lo mismo para Facebook. Mis post van derechito a Facebook (a "notas" y a dos blogs más que tengo por feed en aplicaciones de Facebook)

    Es igual no? Se expande y contrae como en el post de blogger?

    A mi me interesa contraer texto, no imagenes ni videos, los textos de mis post son muy largos, siempre, por la temática del blog. Por eso quiero utilizarlo, pero me gustaría saber como se ve en las suscripciones.

    ResponderEliminar
  15. Parece excelente, voy a usarlo pero... una oregunta ¿ la numeración "Expandir 1, 2, etc" se puede repetir en diferentes entradas o hay que continuarla en las entradas donde se use ?.

    ResponderEliminar
  16. Hola Maria Rosa,

    Como ves no es complicado, sólo es cuestión de poner el código de manera correcta y listo, no hay nada del otro mundo.

    Facebook y los lectores de feed son plataformas diferentes por lo que dudo mucho que pueda verse el mismo efecto. Me parece que en tu caso te convendría más usar la utilidad de Leer más de Blogger la cual mostraría sólo la primera parte de la entrada y ocultaría lo demás.
    Puedes ver cómo funciona en esta entrada de JMiur:
    http://vagabundia.blogspot.com/2009/09/blogger-nueva-opcion-more-o-leer-mas.html

    Saludos!

    ResponderEliminar
  17. Hola Romer Riera,

    Tiene que ser distinto aun cuando se traten de entradas diferentes, es decir, si ya tienes uno que sea Expandir1 entonces ningún otro código deberá tener ese nombre, de lo contrario no funcionará.

    Saludos.

    ResponderEliminar
  18. Pues no me trabaja ,no se si es porque tengo muchos codigos o que ,pero he tratado todo pero en bonaisima.com no me trabaja ,en las de prueva si ,parece que algo la esta bloqueando que cuando le doy pra ver lo que escribo ,me sale el signo de #...La pagina me sale asi http://www.bonaisima.com/# ,seguire intentando a ver ,no se cual es la razon ,espero solucionarlo porque es muy bueno esto

    ResponderEliminar
  19. Hola Potro, ¡que tal?
    Muchas gracias Por el Truco ✔.
    Ciudate y saludos ☺

    ResponderEliminar
  20. bonaisima.com, no sé qué sea entonces, poniendo los códigos correctamente debería salir.

    pepe, gracias a ti por tu visita. Saludos!

    ResponderEliminar
  21. Te paso el dato de lo que me ocurrió: Ninguno de los dos trucos me sirve, en mi caso.

    Es decir, probé los dos trucos. Publiqué. En Feed o en Facebook no se puede ver lo que continúa: ya sea con el truco "seguir leyendo" o bien con el de "expander/contraer".

    En mi caso en particular, donde muchos leen mis post desde Facebook o directamente del Feed, no van hasta el blog ... no me conviene.

    Me encanta el truco, me resultó genial, ambos me sirvieron (este y el otro que me diste) pero realmente no puedo utilizarlo por esa razón. Una pena.

    Ahora, para aquello que sus lectores van a sus respectivos blogs ¡¡Es genial !!!!

    Gracias igual Potro, todo me sirve para aprender y todo lo que enseñas es importante :D

    Besos !

    ResponderEliminar
  22. Hola Maria Rosa,

    El truco de Leer más (no este) no interfiere en cómo se muestra en el feed, se muestra completo, a menos que tú hayas configurado tu feed para que se muestre sólo una parte.
    En el caso de Facebook no tengo idea para serte honesto, desconozco si el Leer más afecta la manera como se muestra.
    Podrías hacer la prueba poniendo el Leer más en una entrada nueva y esperar a ver cómo se ve en Facebook.

    Saludos.

    ResponderEliminar
  23. Estupendo post.
    Anteriormente había que modificar la plantilla. Ahora es mucho más simple de aplicar.
    Se agradece el truco. Incluso, lo apliqué para ver como se vé.
    Saludos.
    Jpz.-

    ResponderEliminar
  24. Tú sí que sabes sacarle provecho a estas aplicaciones, se ve bastante bien, así la discografía tan larga no "ensucia" el aspecto del post.
    También puedes usar un ícono en lugar del [+/-] Ver / Ocultar o usar ambos.

    <img src="URL de la imagen"/> Ver / Ocultar

    Saludos!

    ResponderEliminar
  25. Hola Potro.
    Vamos a implementar alguna imagen.
    Saludos y gracias.
    Jpz.-

    ResponderEliminar
  26. Ahora me dí cuenta que con el pegar el primer código, se fué de mi blog la lista de seguidores.
    En todo caso, ya leí la alternativa que das en un post anterior.
    Malditos navegadores.
    Saludos.
    Jpz.-

    ResponderEliminar
  27. Así es, justo es el Prototype y Scriptaculous uno de los causantes de ese problema =S

    ResponderEliminar
  28. Exelente Bro!!! en una de mis blogger-depresiones intenté hacerlo, busque este truco por todos lados, pero no me funcionó. Ahora ya se donde encontrarlo para la próxica recaída. jajajjaa.

    Un abrazo!!!

    ResponderEliminar
  29. Ponlo en práctica, eso te obligará a tener que publicar algo, mira que ya hace falta eh, jajaja.
    Abrazos.

    ResponderEliminar
  30. Excelente, despues de buscar como por todos lados por fin encontre uno que si me sirvió

    ResponderEliminar
  31. Es estupendo que hayas encontrado la solución.
    Saludos.

    ResponderEliminar
  32. Excelente! Andaba buscando la manera de hacer esto. Ya quiero incorporarlo a mis blogs. Pero tengo una duda, antes de hacerlo: Tengo varios de mis posts con la opción de LEER MÁS... (mostrando solo parte del texto del post y una imagen). Si le habilito esto de mostrar y ocultar partes de la entrada en aquellos posts en donde ya les tengo LEER MÁS..., ¿podría darse algún conflicto entre ambas opciones o son perfectamente compatibles?
    Gracias de antemano y saludos.

    ResponderEliminar
  33. No debería haber ningún problema, o al menos nadie ha reportado algún conflicto entre el Leer más y este hack.
    Cualquier cosa nos comentas.

    Saludos!

    ResponderEliminar
  34. HOLA POTRO SOY FANATICO DE TU BLOG ME VA DE LUJO CON TU CODIGO PERO PRODRIAS DISEÑAR UN CODIGO Q SALGA LA IMAGEN Y Q TENGA LA OPCION DE OCULTARLA PORQ EL CODIGO Q DEJASTE OCULTA LA IMAGEN LUEGO AL ASER CLICK EN VER/OCULTAR APARESE LA IMAGEN YO DESEO Q SEA LO CONTRARIO QUE PRIMERO VEAN LA IMAGEN Y Q DESPUES SI DESEAN LA OCULTEN PORFAVOR AYUDAME CON EL CODIGO GRACIAS 100 % CIUDAD BLOGGER ^^

    ResponderEliminar
  35. Hola Mundo Tv,

    Muchas gracias por tus comentarios, me da gusto saber que este sitio es de tu agrado.
    El código sería el mismo, sólo habría que cambiar en el segundo código donde dice style='display: none;' cambiarlo por style='display: block;' con eso el elemento aparecerá cuando cargue la página y cuando el lector dé click se ocultará.

    Saludos.

    ResponderEliminar
  36. Cómo se hace, en la columna dode están los gadgets, para dejar sólo el título del gadget y ocultar el contenido del mismo, ya sea imagen o texto, y que sólo aparezca cuando se pulse sobre el título. Es que lo veo en otros blog y me parece superútil porque he agregao un gadget de texto muy largo y me queda todo muy pesado poprque hay que bajar y bajar y bajar para poder leer lo que tiene el gadget. Creo que me he enrollaro jeje, no se si me explico.

    ResponderEliminar
  37. Hola La voz en off,

    No te preocupes que te has explicado muy bien ;)
    Te dejo el enlace donde Rosa tiene una excelente explicación sobre cómo expandir y contraer cualquier gadget:
    http://elescaparatederosa.blogspot.com/2009/05/expandir-y-contraer-gadget-con.html

    Saludos.

    ResponderEliminar
  38. Buenísimo! Ya está en mi blog (:

    ¡Muchas Gracias!

    ResponderEliminar
  39. genial, lo que estaba buscando
    muchas gracias!
    tu blog es genial

    ResponderEliminar
  40. Qué bueno que has encontrado algo útil :D
    Saludos.

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

    ResponderEliminar
  42. se puede hacer lo mismo o algo parecido en pero en la sidebar? por ej: agrego un gadjet de texto y al hacer click se puede leer todo, y asi no me ocupa mucho lugar...

    ResponderEliminar
  43. Creo que esto es lo que estás buscando:
    http://sitiooriginal.blogspot.com/2009/07/expandir-gadget_02.html

    ResponderEliminar
  44. Hola Potro y antes que nada gracias por el post.
    Verás soy el responsable de un blog y necesito poner relativamente a menudo entradas largas, por lo que me venía genial este truco. Pero por mucho que lo intento no me funciona. ¿Qué puedo hacer?
    Seguramente sea porque la plantilla que me gasto es modificada (la 565 a 3 columnas =s)
    Espero que puedas ayudarme. Muchas gracias.^^

    Pablo Izquierdo
    Quercus 4.0

    ResponderEliminar
  45. Hola Pablo Izquierdo,

    La plantilla no tiene que ver, o no debería.
    No veo que tengas el primer código puesto en la plantilla, para que funcione es necesario tener ese código.

    Saludos.

    ResponderEliminar
  46. ¿Como podría enseñarte ese trozo de mi plantilla y que pudieses decirme ué esta mal?
    Gracias de nuevo y perdón por las molestias.
    Pablo Izquierdo.
    Quercus 4.0

    ResponderEliminar
  47. Sólo ponlo en la plantilla, me refiere a que hagas todos los pasos que se explican en esta entrada, si no te funciona entonces no quites nada, sólo me dejas un comentario y yo reviso el código fuente de tu plantilla.

    Saludos.

    ResponderEliminar
  48. Efectivamente no funciona ¿?
    Gracias otra vez :)
    Pablo Izquierdo
    Quercus 4.0

    ResponderEliminar
  49. Ya veo el primer código en tu plantilla pero no veo el segundo código en alguna entrada que es donde se aplica para ocultar las partes de la entrada.
    Ponlo en una entrada y dime en cuál está para poder ver el código.

    Saludos.

    ResponderEliminar
  50. Vale, está en las dos últimas, o al menos en la última fijo (vamos, en la primera que aparece) Pero cuando doy a ver el blo y pincho en el "+/-" me lleva a la ventana de creación de entradas ¿?
    Gracias de nuevo, perdón por el lío =S

    Pablo Izquierdo

    ResponderEliminar
  51. Hola de nuevo Pablo.

    El problema esta en la parte del código que tienes en la entrada, si te fijas debería ser así esta parte:
    href="#"

    Y tú lo tienes así:
    href="http://www.blogger.com/post-create.g?blogID=3206750977928314280#"

    Es decir, sólo debería estar el signo de gato (#)
    Esto generalmente sucede cuando se pone el código y luego usamos la pestaña Redcatar.
    Elimina toda esa URL (que es la de edición de entradas) y verás que funciona.

    Saludos.

    ResponderEliminar
  52. Dios mio Potro te debo una. Muchísimas gracias de verdad=) Y (una vez más) perdón por las molestias.
    Pablo Izquierdo

    ResponderEliminar
  53. Por nada, me da gusto que ya puedas usarlo sin problemas.
    Saludos.

    ResponderEliminar
  54. hola potro hace tiempito q no me paso porla ciudad =P muy bueno este post haci no se gasta muchos recursos mil veses mejor q el truco de "leer mas" y tbn te queria gradecer por el post d los videos random muy bueno

    ResponderEliminar
  55. Hola —(•·÷[ÇRÍŠŠ_MÂÑ]÷·•)—,

    Qué gusto tenerte de vuelta por esta Ciudad. Me alegra que te hayan sido útiles estas entradas.

    Saludos!

    ResponderEliminar
  56. Oye ya puse este truco en mi blog pero tengo un problemita, no se si ódrias checar y me digas que puedo hacer

    http://ministerioflamasdefuego.blogspot.com/p/galeria-fotografica.html

    lo he intentado como 4 veces pero no me sale aun

    ResponderEliminar
  57. Hola FLAMAS DE FUEGO,

    Lee el comentario #51 ahí está la respuesta a tu problema.
    Saludos.

    ResponderEliminar
  58. uuuuuuuuuuuuuuuuufffffffffffffff

    salio gracias gracias. Disculpa las molestias jeje.

    Ahora si puedo dsifrutar de este truco je

    byebye

    ResponderEliminar
  59. No es ninguna molestia. Me alegro que ya funcione.
    Saludos.

    ResponderEliminar
  60. Hola tengo los mismos problema que aparece en el comentario 50
    Y segui la instruccion que colocaste en la 51 pero ahora es que se va directamente a la primera entrada.

    ResponderEliminar
  61. Eso sólo sucede en versiones anteriores de Chrome, he entrado a cwolf.com.ar y se ve bien el efecto, no me manda arriba del blog.

    ResponderEliminar
  62. Ola potro de verdad muy bueno este truco, antes tenia uno pero eera muy extenso y complejo, de verdad este me gusta mucho.

    Me gustaría que cuando de Clic para expandir, el link me quede al final de la entrada para ocultar de nuevo. me entiendes?? gracias!!

    ResponderEliminar
  63. No se puede, el enlace es fijo, como cualquier texto :S

    ResponderEliminar
  64. Que estaré haciendo mal ahora?

    Hola Potro, confiado de tu paciencia ;), te pido me colabores con los scripts ya que no los he podido implementar adecuadamente a mi plantilla.

    Por ejemplo con este script para ocultar y contraer partes de post, lo he implementado sobre "/head" luego he ido a una entrada y he encerrado entre el "div" todo el contenido a ocultar, para mi sorpresa: Se oculta el contenido pero al hacer click en el enlace +/- NO EXPANDE EL CONTENIDO, si no que me lleva a el Top del blog.

    Espero no ser molestia. ;P

    Fruto Frívolo

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

    ResponderEliminar
  66. ALELUYA... LO LOGRÉ.

    Gracias Potro, estuve revisando el script y encontré el error que cometí... :P

    Espero tengas buena salud.

    Hasta un próximo error. JA.

    Fruto Frívolo

    ResponderEliminar
  67. Qué bueno que lo has solucionado :)

    ResponderEliminar
  68. seria posible cambiar [+/-] Ver / Ocultar por una imagen?
    y si es así,¿como?

    ResponderEliminar
  69. Sólo cambia ese texto por el código de una imagen, en el comentario #23 hay un ejemplo.

    ResponderEliminar
  70. ah,gracias potro la verdad es que soy un desastre por no mirar los demas comentarios xD
    lo pruebo y te cuento ^^

    ResponderEliminar
  71. Si aplico esto no se me ve la lista de seguidores x_____x
    ¿qué hago? perdon por mi ignorancia :(

    ResponderEliminar
  72. Es porque usa Scriptaculous y no se lleva con el gadget de la lista de seguidores.
    Es por eso que había escrito esta entrda, de hecho ya habías comentado en la entrada sucesiva a esa.

    ResponderEliminar
  73. ya...pero es que a mi esa idea no me gusto mucho,la verdad....
    por que no me gusta eso de ver la informacion desde ahi....
    bueno entonces lo dejare sin eso,que remedio =( muchas gracias de todas formas potro.. ^^

    porcierto,si no es mucha molestia :3 que me recomendarias ponerle a mi blog?
    http://kingdomheartszone.blogspot.com/

    tu que eres el maestro xD

    ResponderEliminar
  74. No soy un maestro así que no sabría decirte, pero así como lo veo lo veo bien, no está sobrecargado de gadgets innecesarios.

    ResponderEliminar
  75. Hola Potro, sigo trasteando mi blog y quería añadir este tip, pero creo que me da problemas con la jquery 1.4, tengo varios scripts que tiran de esa biblioteca y aunque he conseguido que funcione, cuando se ha dado ese caso el resto de efectos funcionaron mal. Uso scripts para efecto buble, shadowbox, s3slide, tabs, creo que no me dejo ninguno. Si sabes cual puede ser el problema ya sabes, gracias como siempre!

    ResponderEliminar
  76. Eso es porque este efecto requiere de Scriptaculous y Prototype, esa librería no es compatible con JQuery, que es la que estás usando para los demás efectos que mencionas.

    ResponderEliminar
  77. Lo suponía Potro, incompatibilidad entre librerías... no sabrás de algún otro método para hacer funcionar algo similar a este tip no? saludos!!

    ResponderEliminar
  78. Hay uno con JQuery que hace lo mismo pero no funciona muy bien con Blogger, o al menos a mí nunca me ha resultado.

    ResponderEliminar
  79. Bueno pues como no tenía ni idea de que existía uno que usase Jquery, buscando encontré otro método que sí me ha funcionado, te dejo el link por si quieres echarle un vistazo: Menú expandible switch

    ResponderEliminar
  80. Bien, no tiene el efecto deslizante pero cumple su función ;)

    ResponderEliminar
  81. Exacto Potro, por lo menos cumple jeje

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

    ResponderEliminar
  83. Usas jQuery y no es compatible con el script que se usa para este efecto (Scriptaculous), es por eso que no funciona.

    ResponderEliminar
  84. Parece que lo tienes dentro de un elemento HTML/Javascript debajo de RADIO FM GOLD

    ResponderEliminar
  85. no era parece bueno graxias por tu ayuda

    ResponderEliminar
  86. Hola majo e intentado poner esto en una entrada pero no entiendo porque al darle me salta de nuevo a la pagina principal sabrias explicarme porque
    benga gracias y un saludo

    ResponderEliminar
  87. Necesitaría ver en qué blog y en qué entrada lo has puesto, pero generalmente el problema es que ponen el código en la pestaña Redactar y siempre que se trata de scripts hay que hacerlo en la pestaña Edición de HTML (junto a la de Redactar)

    Saludos.

    ResponderEliminar
  88. e intentau pero no lo consigo
    lo e puesto,pero de la k le doy se me va para arriba del blog nuze
    beno majo haber si lo consigo jijiji
    garcaias

    ResponderEliminar
  89. es que e estau mirando y yo no creo tener ese boton de redactar que dices
    es posible u esque ando ciego jejeje

    ResponderEliminar
  90. Arriba de las herramientas de texto (negrita, cursiva, color de texto, agregar imagen, etc.) hay dos pestañas, una dice Redactar y otra dice Edición de HTML, es en esta última donde debes poner el código, sino sale mal.

    ResponderEliminar
  91. ya ya si hay es donde e mirau pero no me aparecen esas opciones.gracias de todos mmodos

    ResponderEliminar
  92. HOLA TE CUENTO QUE HAGO LOS PASOS CON UN VIDEO, EN EL BLOG QUEDA FINA LA INDICACION PERO NO ABRE NI CIERRA...

    ResponderEliminar
  93. Necesitaría ver el código puesto en tu blog para saber dónde está el problema.

    ResponderEliminar
  94. Se puede poner una imagen en vez [+/-] Ver / Ocultar ?

    ResponderEliminar
  95. Sólo cambia ese texto por el código de la imagen:
    <img src="URL de la imagen"/>

    ResponderEliminar
  96. Oye Potro me Gusta tu Web (tengo pensado enlazarla).

    Tengo una Duda, como tengo que modificar el codigo para que cuando le de click a Ver se cambie a Ocultar. Es decir pongo
    [*/-]Ver/Ocultar pero en ves de eso pongo [+]Ver y cuando le de click y muestre el contendido, el [+]Ver cambie a [-]Ocultar, para asi sea algo más practico.

    GRACIAS por tu AYuda.

    ResponderEliminar
  97. Con este no creo que sea posible o al menos no conozco cómo hacerlo. Si bien apenas encuentre algo que lo haga lo publico.

    Saludos.

    ResponderEliminar
  98. hola te quería pedir un ayudita es que aplique este código en unas entradas y me funcionaba de maravillas pero ahora cuando pincho en el link me envía a la pagina de editar la entrada y no se expande que puede ser??????
    ojala me puedas ayudar saludos

    ResponderEliminar
  99. Es que después de escribir tu entrada estás poniendo la pestaña Redactar y es ahí cuando se agrega ese link. Escribe tu entrada normalmente, dale formato en Redactar y todo lo que quieras. Ya que esté lista ve a la pestaña Edición de HTML y agrega el código para expandir, y ya no regreses a la de Redactar o se agregará de nuevo el link.

    ResponderEliminar
  100. ok. vale gracis por la yuda ahora esta todo ok!!!!
    saludos....

    ResponderEliminar
  101. gracias me funciona a la perfeccion eres un genio... no tienes algun banner para poner tu blog en el mio ????

    ResponderEliminar
  102. Hola gerbert, aquí hay unos cuantos para que elijas el que desees. Saludos y gracias!

    ResponderEliminar
  103. Lo siento Potro...cada vez que doy un paso me aparece un problema, trato no sobrecargarte con comentarios, pero hay veces que no encuentro solución por ningún lado.

    He intentado poner en uso este tutorial..pues bien, me es imposible porque me dice: "Por favor, corrige el siguiente error y envía la plantilla de nuevo.
    Se ha encontrado más de un artilugio con el ID: HTML6. Los ID de artilugio deben ser exclusivos."

    Un saludo!

    ResponderEliminar
  104. Bueno, en sí este hack no fue el que te dio problema sino que más bien hizo que saliera a la luz un problema que ya tenía tu plantilla. Pero no pasa nada, se puede solucionar, sólo busca en tu plantilla sin expandir artilugios donde diga:
    b:widget id='HTML6'

    Lo encontrarás dos veces, a uno de ellos (el que tú quieras) cambia esa parte por esta otra:
    b:widget id='HTML66'

    Saludos.

    ResponderEliminar
  105. Hola El Potro, es la primera vez que comento en tu blog, tengo problemas con esto 'Expandir y contraer partes de una entrada' hasta hace algunos días me funcionaba de maravilla, el pasado 22 de agosto apliqué este truco en esta entrada y todo funcionaba de maravilla pero el día de hoy se me ocurrió entrar en esa entrada y mi sorpresa fue que el efecto no funciona, esto también me ha sucedido con la flechita que esta en la parte inferior derecha de mi plantilla la que dice 'Ir Arriba' antes subía con un efecto deslizante, ahora cuando la presiono se va de golpe al inicio... Por favor si puedes ayudarme te lo agradecería... Mi blog es El Club de Dumbledore

    Muchas gracias...

    ResponderEliminar
  106. Hola Albus Dumbledore,

    Lo que sucede es que incluiste en tu plantilla un script que se llama jQuery, ese script no es compatible con Scriptaculous que es el que usa tanto este truco como el efecto de deslizamiento de las flechas.
    Tendrías que elegir cuál script dejar para que pueda funcionar o una u otra cosa.

    Saludos.

    ResponderEliminar
  107. Saludos El Potro aqui molestandote amigo mira hace tiempo que estaba buscando un efecto como este pero lamentablemente ya hize todo las indicaciones y no logro hacer que me funcione en mi blog me gustaria que me brindaras tu ayuda y me digas que es lo que estoy haciendo mal espero no ser una molestia y de antemano muchas gracias te dejo el blog de pruebas
    http://pruebasgfx.blogspot.com/

    saludos......

    ResponderEliminar
  108. Recuerda que donde dice expandir1 debes cambiarlo en las dos veces que aparece, en tu ejemplo sólo lo has camiado una vez, en la primera parte del código pusiste prueba2 y la segunda parte lo dejaste como expandir1, por lo tanto, los dos deben tener el mismo ID, ya sea expandir1 o prueba2 cualquier nombre que elijas pero ambos deben ser el mismo.

    ResponderEliminar
  109. Hola amigo, lo he aplicado y me ha funcionado, el unico problema es que lo puse en una pagina estatica, he creado una lista y cuando llega al final de la pagina al expandir, los widget de la barra lateral se van hacia abajo de la pagina, no se que problema sea espero me puedas ayudar saludos

    ResponderEliminar
  110. Ayudaa!! No me funciona...

    Me sale " mi_pagina.blogspot.com/# "

    Qué he hecho mal??

    ResponderEliminar
  111. Necesitas estar en la pestaña Edición de HTML todo el tiempo y no en la de Redactar, pues si cambias a la pestaña Redactar se desconfigura el enlace.

    ResponderEliminar
  112. Hola muy bueno pero lo intente hacer en mi blog en una pagina estadistica ago los dos paso pero cuando voy a la pagina estadistica me muestra el codigo (el segundo) con la publicasio. Como mi plantilla esta hecha en Artisteer lo intente hacer en un blog de prueba con una plantilla sacada en inernet pero sigue igual...!!!

    funciona en una plantilla hecha en Artisteer¿¿??

    me podrias ayudar porfavor?¿
    Gracias!!

    ResponderEliminar
  113. hola potro exelente post, eres uno de mis favoritos, por cierto, me pregunto si se puede hacer que salga de forma automatica en todas las entradas.

    shalom!!!

    hppt://musicacristiana-online.blogspot.com

    ResponderEliminar
  114. XxMegaBlackxX, no conozco esas plantillas pero debería funcionar.
    Edita la entrada y abajo donde hay un link que dice 'Opciones de entrada' dale click, luego busca 'Configuración de composición' y verifica que esté marcada la casilla 'Interpretar HTML escrito'.
    De esa forma no debe mostrarse el código tal como está escrito sino que lo interpretará.

    ResponderEliminar
  115. Emanuel Martinez, más o menos, puedes hacer que cierto código aparezca siempre en las entradas nuevas.
    Entra en Configuración > Formato, y donde dice 'Plantilla de entrada' escribe el código. Eso hará que todas las nuevas entradas tengan ese código predeterminado.

    Saludos.

    ResponderEliminar
  116. Gracias Potro como siempre excelente me servira mucho.

    Saludos

    ResponderEliminar
  117. Hola Potro mira tengo un problema estoy ayudando a un amigo con su blog y implemente esto expandir y contraer hasta el momento el blog tiene dos post pero cuando quiero expandir uno no se expande ese y se expande otro, te dejo la direccion para que veas el problema http://diariodeunpastor.blogspot.com/
    haber que sucede en ello o es que acaso no pueden convivir dos post con esto en la pagina principal, bueno desde ya gracias por tu ayuda

    ResponderEliminar
  118. Hola ,

    Puedes poner tantos como quieras pero recuerda que cada uno debe tener un ID único para que pueda funcionar.
    En este caso ambos se llaman expandir1 y es por eso que tienes ese conflicto.
    Necesitas que el otro tenga otro ID distinto, por ejemplo expandir2

    ResponderEliminar
  119. Jejeje gracias por la respuesta, tan simple que eso va hasta verguenza de haberlo preguntado me da bueno gracias, saludos

    ResponderEliminar
  120. No debe darte vergüenza para nada, a todos se nos escapan esos detalles ;)

    ResponderEliminar
  121. Hola potro, excelente post.
    Pero yo tengo un ligero problema, en mi blog yo uso el codigo que es para contraer y expander las entradas y me funciona bien y funciona con el mismo script de este, pero este codigo no me funciona para las entradas, lo unico que hace es irse al top de la pagina.
    Que solucion hay?

    Gracias

    ResponderEliminar
  122. Hola Miwel,

    Quizá es porque dentro del área que está oculta tienes muchos divs, prueba eliminando todos esos divs sobrantes para que el código quede limpio tal como el del ejemplo.

    ResponderEliminar
  123. Ya deje libre la zona a expandir libre de cualquier otro div, pero el error persiste, que debo hacer mas?

    ResponderEliminar
  124. Pues ya lo veo funcionando bien, supongo que ya lo has resuelto.

    ResponderEliminar
  125. Si ya lo arregle, habia un conflicto con otro codigo, pero ya esta solucionado, gracias ;D
    Saludos

    ResponderEliminar
  126. Hola Potro,
    Como estas?..
    Queria hacerte una pregunta. Me cuesta un poco expresarlo y creo que este no es el post mas ajustado, pero no se donde colocarlo. Se trata de lo siguiente: En el side-bar de mi blog tengo puesto un gadget con el titulo ENLACES. Ahi he colocado mas de 20 enlaces a otras paginas que son utiles e interesantes. A mi juicio, no queda muy estetico esa larga lista de enlaces. Me gustaria poderlos meter en un recuadro,y que haya tambien una barra para subir y bajar. De esta forma lo que consigo es que el gadget de enlaces quede mas contraido y no se vea una lista tan larga.
    Muchas gracias por tu ayuda.
    Tu seguidor fiel,
    Jose

    ResponderEliminar
  127. Hola Jose,

    De hecho esta semana publicaré una entrada que explica cómo expandir y contraer gadgets, así que dentro de poco veremos cómo hacerlo ;)

    ResponderEliminar
  128. Muchas Gracias, Potro.
    Tu seguidor fiel,
    jose

    ResponderEliminar
  129. Potro disculpa que te pida ayuda desde esta entrada, me gustaria saber como puedo poner lo que tiene Jmiur el su blog en la parte de contacto, que se atrae hacia el frente, me urge poner esto en mi blog.

    Saludos espero tu ayuda

    ResponderEliminar
  130. Hola Oscar, ese efecto son ventanas modales, hay varios métodos para ello, una es Shadowbox. Ahora, exactamente la que usa él no sé, eso tendrías que preguntárselo a él.

    ResponderEliminar
  131. Potro estoy intentando que funcione en un texto que tengo de Gagdet en mi blog. En la portada, pero no funciona, sale [+/-] Ver / Ocultar pero cuando hago click, no aparece nada, carga rapido el blog y no sale nada de nada.

    ResponderEliminar
  132. ¿En cuál entrada lo has puesto?

    ResponderEliminar
  133. No lo eh puesto en una entrada, lo eh puesto como gadget.

    ResponderEliminar
  134. Pues me he quedado igual porque no lo veo por ningún lado. Si me das más detalles en tus comentarios podré ayudarte más rápido y de mejor forma ;)

    ResponderEliminar
  135. Perdon Potro, estaba apurado, deje el comentario asi nada mas, DISCULPAS. Mira pues, lo puse de gadget, pero cuando presiono para que aparesca el texto del cual estoy COMPRIMIENDO digamos... NO APARECE. Fijate en el blog, hay un gran vacio negro, bueno pues... debajo, dice el link de [+/-] Ver / Ocultar .

    ResponderEliminar
  136. POTRO YA SE SOLUCIONO EL PROBLEMA. LISTO GRACIAS DE TODOS MODOS JEJE. LO UNICO QUE TE PIDO , SI PODRIA SER.. ES COMO HACER PARA ELEGIR EL COLOR DE LOS LINKS , POR EJEMPLO .. EL OTRO DIA TE PEDI SOBRE CAMBIAR LA FUENTE DE LETRA, Y EL TAMAÑO DE LAS ENTRADAS Y DE LA SIDEBAR, AHORA QUISIERA SABER COMO CAMBIAR EL COLOR DE LOS LINKS DE LA SIDEBAR Y DE LAS ENTRADAS.

    ResponderEliminar
  137. Potro, tambien quisiera saber como hacer para que los gadget esten mas juntos, osea.. que esten uno arriba del otro, que no halla tanto espacio entre ellos.

    ResponderEliminar
  138. Para personalizar los enlaces mira esta entrada:
    http://ciudadblogger.com/2009/04/personalizar-links.html

    Lo otro te lo debo, en esas plantillas aún no sé cómo modificar los espacios.

    ResponderEliminar
  139. Gracias de todos modos Potro, pero yo me referia a cambiar a eleccion el color del enlace, de la sidebar y de las entradas. Porque pasa lo mismo que las letras, se elige un solo color, y ese mismo color es para todos los enlaces. En cambio yo quiero elegir UN COLOR DIFERENTE para las entradas y para la sidebar.

    ResponderEliminar
  140. Es del modo similar que se explica ahí, sólo antepon el nombre de la clase de la sidebar:
    .column-right-outer

    Por ejemplo:
    .column-right-outer a:link{
    color:#ff0000;
    }

    ResponderEliminar
  141. Pero donde debo poner eso, antes de Skin, o head.. donde.. me perdi Potro.. No encuentro como hacerlo

    ResponderEliminar
  142. Antes de skin, todos los estilos van antes de ahí ;)

    ResponderEliminar
  143. MUCHAS GRACIAS POTRO. ME SALVASTEEEEEEEEEE, COMO SIEMPRE ME SALVAS DE TODAS, GRACIAS GRACIAS GRACIAS POTROOOOOOOOOOOO :D

    ResponderEliminar
  144. Potro...

    No me funciona he probado de todo me sale
    [+/-] Ver / Ocultar pero no habre nada, gracias de todos modos.

    ResponderEliminar
  145. Hola abogon, ¿en cuál blog lo has puesto?

    ResponderEliminar
  146. Potro, actualize el codigo que tenia para que se contraiga el gadget y se volvio loco, es cualquier cosa. Presiono Ver/Ocultar, y sale como si fuera que quiero editar el gadget, nose que pasa, me podrias ayudar :s

    ResponderEliminar
  147. Joder,ya lo pude poner... es todo un kilombo esto, disculpa por el vocabulario pero de verdad, me saco de las casillas.

    ResponderEliminar
  148. Descuida, ni siquiera sé qué es un kilombo o.O

    ResponderEliminar
  149. Kilombo se le dice a MUCHOS PROBLEMAS JUNTOS aqui en Argentina jaja :D. Disculpa Potro

    ResponderEliminar
  150. jajaja, ok, aquí en México usamos palabras más antisonantes :P

    ResponderEliminar
  151. jeje... Potro, es ésto lo que queria usar mas precisamente :)
    Gracias por la ayuda!!

    ResponderEliminar
  152. jajaja...
    Casi me muero... Es que tenia el JQuery para visualizar algunas imagenes y a la primera que puse este script se me fue T.T
    Pero menos mal que me acorde que ya lo habias solucionado *.*
    Ahora todo esta OK... Gracias de nuevo XD

    ResponderEliminar
  153. Excelente javi_anubis, yo igual me hubiera muerto del susto si de repente dejo de ver mis imágenes ;)

    ResponderEliminar
  154. por ejemplo, si oculto un video y unas imagenes de un post... ¿esto beneficia que carge mas luego mi pagina?

    ResponderEliminar
  155. No, aunque el contenido no se muestra, el navegador de todas formas lee todo el contenido cuando carga la página.

    ResponderEliminar
  156. ey! potro qee tal ;D oye una duda, no se en donde poner el codigo qe pusiste, no se si antes o despues del o en qe parte? lo que pretendo aser es, darle click a mi menu, y en "entradas" aparesca mis post viejos, con el +/-] Ver / Ocultar asi como el tuyo mas o menos :( esta practico y chevere, muuuuy agredecido (Y)

    ResponderEliminar
  157. El que yo uso es otro método que se aplica directo a la plantilla para que cuando se navegue por las etiquetas sólo se muestren los títulos de las entradas:
    http://ciudadblogger.com/2009/07/mostrar-solo-los-titulos-de-las.html

    ResponderEliminar
  158. hola amigo, sabes me genera conflicto con el orbit slider (Jquery), hay alguna forma de solucionarlo? Gracias.

    ResponderEliminar
  159. Hola Edxz101,

    Mira esta entrada:
    http://ciudadblogger.com/2011/02/usar-jquery-y-scriptaculous-al-mismo.html

    ResponderEliminar
  160. Genial,ya no me genera conflicto con jquery, pero sin embargo no me funciona el efecto, al presionar la pestaña [+/-] Ver / Ocultar solo me envía al principio de la pagina, alguna solución? gracias por todo.

    ResponderEliminar
  161. Entonces debe seguir habiendo conflicto, algunos scripts aunque se "parchen" siguen teniendo ese conflicto :/

    ResponderEliminar
  162. si bueno eso pensé, Gracias de todas formas he podo enriquecer mi blog gracias a tu blog, saludos.

    www.edxz101.com

    ResponderEliminar
  163. Me gustó mucho el efecto que nos muestra pero.. solo me funciona en la entrada principal del blog.. cuando inserto el código en las demás páginas no me muestra el efecto. Agradecería si me dan una solución para no tener que cambiar los códigos de diseño / edición html

    Estaré pendiente de sus comentarios.

    gracias!!

    ResponderEliminar
  164. Hola Enrique,

    Con gusto puedo revisar qué puede estar pasando, pero sin saber la dirección de tu blog me será difícil hacerlo.

    Saludos.

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

    ResponderEliminar
  166. Hola, yo también soy súper fan de tu blog, y he puesto en práctica muchos trucos, pero ahora quiero usar este, pero no me deja, creo que es por que tengo el botón derecho bloqueado, dime que puedo hacer?

    ResponderEliminar
  167. Hola Yazmín MK,

    Qué gusto saber que este blog es de tu agrado :)
    No es por el botón bloqueado, sino porque usas jQuery en un menú, ese es un script que no es compatible con el que se usa aquí.
    Pero puedes usar un spoiler, no tendrá efecto deslizante pero igual te servirá para ocultar y mostrar partes de una entrada:
    http://ciudadblogger.com/2011/04/spoiler-para-ocultar-y-mostrar.html

    Saludos.

    ResponderEliminar
  168. muchas gracias, pues tampoco me funciona este que me dices, de hecho lo estoy usando, pero sólo me funciona para los gadgets del blog pero no pero no me funciona para las entradas, y claro que me encanta tu blog, aunque a veces me emociono tanto que mi blog se pasa, pero intento hacerlo mejor :)

    ResponderEliminar
  169. ¿En cuál entrada lo has puesto y no funciona?
    Recuerda que cuando usemos estos códigos dentro de los posts hay que hacerlo siempre en la pestaña "Edición de HTML", si cambiamos a la pestaña "Redactar" el código puede arruinarse y dejar de funcionar.

    ResponderEliminar
  170. Buenas Potro pues me pasa lo siguiente
    como yo no se si tengo ya el codigo en la plantilla modificada pues... lo hice poniendo el codigo y sin el no me funciona en la entrada
    despues estuve leyendo comentarios y solucione uno de los problemas que fue que me enviaba a EDITAR bueno solucione ese problema tambien pero ahora en vez de esconderlo simplemente sigue hay el contenido le doy para que se esconda y me lleva a la HOME :s no se cual es el problema me podrias ayudar?

    ResponderEliminar
  171. Hola :D, ¿en cuál entrada lo has puesto para que pueda verlo?

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

    ResponderEliminar
  173. Revisa de nuevo tu código, verás que no está como se muestra el ejemplo de la entrada, está incompleto.

    ResponderEliminar
  174. Pues no se como puede estar incompleto no lo entiendo porque yo lo he vuelto a borrar y he copiado de la pagina y lo he pegado antes de head y nada no se que es lo que pasa no me funciona en la entrada porque puede ser ..

    ResponderEliminar
  175. :O ya me funciona Gracias ^_^

    Lo he probado y ya me funciona

    ResponderEliminar
  176. He probado con este pero tampoco funciona en mi blog, tambien he seguido los pasos y nada, cuando pongo el codigo en el post y le doy a publicar no aparece nada..

    ResponderEliminar
  177. Si saber en cuál blog y entrada lo has puesto me es imposible saber dónde puede estar el problema :/

    ResponderEliminar
  178. Potro acabo de ponerlo en el primer post del blog, pero al clicar me redirecciona a otra pagina.

    ResponderEliminar
  179. se me olvido dejarte la direccion de mi blog, aqui te la dejo:

    http://schizophrenicdance.blogspot.com/

    ResponderEliminar
  180. Gracias por ponerlo Julio.
    Cuando se colocan códigos o scripts en las entradas debes hacerlos siempre en la pestaña de Edición de HTML, de hecho ni siquiera debes cambiar a la de Redactar, de otra forma se agregan enlaces (como el tuyo), o se desconfiguran los códigos:
    http://ciudadblogger.com/2009/11/como-poner-los-codigos-correctamente-en.html

    ResponderEliminar
  181. Gracias Potro, ahora si que funciona pero no se ve el texto que le pongo, he probado tambien insertando una imagen pero tampoco sale nada. El efecto de abrirse si que lo hace, ya no me redirecciona, pero ahora el problema es que no aparece el texto o la imagen que quiero ponerle. Donde puede estar ahora el error?, gracias de nuevo por tu ayuda.

    ResponderEliminar
  182. Yo lo veo perfectamente Julio, dice:

    Formato: MP3
    Bitrate: 320 Kbps
    Peso: 39.13 MB
    Archivo: RAR
    Fuente: Vinilo
    Publicado: Julio Schizophrenic

    ResponderEliminar
  183. porque hay que cambiarle el expandir1 ? y con cual? o k?

    ResponderEliminar
  184. Porque cada contenido que ocultes debe tener un ID diferente, de lo contrario no funciona. Puedes ponerle el texto que quieras, pero que siempre sea distinto a los otros que uses.

    ResponderEliminar
  185. Hola El Potro... resulta que he agregado el codigo en la plantilla y he hecho lo que dice el post para agregarle la opcion de ocultar a lo que quiero publicar,,, aparece normal y cuando quiero expandirlo para ver el contenido me lleva a editar la entrada.. podrias colaborarme por favor... agradecido,,,desde Colombia

    ResponderEliminar
  186. disculpa El Potro... ya lo solucione (lo del comentario190)... muchas gracias por todo.. tu blog es genialisimo.. hasta ahora estoy contruyendo el mio,,, y tu blog me a servido mucho.. Gracias

    ResponderEliminar
  187. Gracias por leer los comentarios GCS, ahí se encuentran muchas de las respuestas habituales. Que tengas buen día!

    ResponderEliminar
  188. ¡Estupendo truco! Todo un desafío con los diferentes códigos de la entrada en html... Me salió de 10 ^_^

    ResponderEliminar
  189. Jajaja, ya te acostumbrarás a entender los códigos de las entradas ;)
    Saludines!

    ResponderEliminar
  190. Y lo haré... ^_^ Desde que conocí esta manera de diseñar y cambiar la estructura de un blog... ¡Amo el código html!!!! XD

    ResponderEliminar
  191. No se a que te refieres con expandir ¿Que pongo ahi?

    ResponderEliminar
  192. Hola potro no me hagas caso. Me volví loco si funciona y muy bien.
    Gracias y espero que hayas disfrutado esta navidad.

    ResponderEliminar
  193. Qué bueno que ya todo funciona bien :)

    ResponderEliminar
  194. hola potro que tal me quedo:
    http://juan-el-super-gv.blogspot.com/2011/12/los-cabos-baja-california-sur-el-mar-de.html

    ResponderEliminar
  195. Pues no conozco Baja California Sur pero ha sido bastante instructivo tu artículo :)

    ResponderEliminar

Los comentarios están siendo moderados y serán publicados una vez que hayan sido revisados por un administrador.
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.

 
Ir Arriba Ir Abajo
I Ciudad Blogger