73

Efecto deslizante (slide) para entradas expandibles

Expandir/contraer

Usando este efecto las entradas se abren y se cierran con un efecto deslizante muy agradable y que además es muy sencillo de incorporar a los títulos de las entradas expandibles, tanto si estamos usándolas en la página principal, como en las páginas de etiquetas.


[1] Para aplicar el efecto deslizante, necesitamos usar las librerías (Prototype y Scriptaculous) de las que hablamos en una entrada anterior.

[2] Estas librerías las incluimos en la plantilla con un script de Google API y tendremos que añadirlo justo antes de </head>:
<!-- Prototype y Scriptaculous-->
<script src='http://www.google.com/jsapi'/>
<script>
google.load(&quot;prototype&quot;,&quot;1.6.0.3&quot;);
google.load(&quot;scriptaculous&quot;, &quot;1.8.2&quot;);
</script>
<!-- Prototype y Scriptaculous-->

[3] Localizamos ahora con los artilugios expandidos, esta línea que forma parte del código que habíamos añadido para nuestras entradas expandibles:
<a expr:onclick='&quot;javascript:toggleIt(&quot;&quot; + data:post.id + &quot;&quot;);&quot;' href='javascript:void(0)' style='text-decoration:none' title='Expandir/Contraer la entrada'>[+/-]</a>

[4] La sustituimos por esta otra línea y guardamos los cambios:
<a expr:onclick='&quot;Effect.toggle(\&quot;&quot; + data:post.id + &quot;\&quot;,\&quot;slide\&quot;);&quot;' href='javascript:void(0)' style='text-decoration:none' title='Expandir/Contraer la entrada'>[+/-]</a>

Podéis comprobar el resultado pinchando en el [+/-] que acompaña al título de mis entradas expandibles en las páginas de etiquetas.

Entradas Relacionadas:

73 comentarios:


Gabriel Blanch

Buenas noches

Te acabo de enviar un correo hace pokito.

felicidades por el proyecto que estás llevando a cabo :)

Tengo dos preguntas, si fueras tan amable de ayudarme te lo agradeceria muchisimo:

1.- Como se hace para que cuando la gente busque algo en el buscador de mi blog salga como te sale a ti? (solo salen los titulos en formato hipervinculo sin q salgan todos los articulos descritos con sus respectivas imagenes y demas)

2.- como se hace para q la seccion archivos y temas sean desplegables pero como los tienes tu?

un saludo enorme y gracias ;)

http://www.reflexiona-y-expresate.blogspot.com/

Rosa

Gabriel Blanch Veo que tu email es más o menos lo que aquí solicitas, así que te respondo aquí si no te importa ;)

No es mi buscador el que muestra los títulos así, sino que mis entradas están en expandible en las páginas de etiquetas (el segundo enlace del que hablo en esta misma entrada al comienzo).
El buscador lo que muestra son los resultados entre mis entradas, que están preparadas para aparecer así...

En cuanto a los gadget "expandir y recoger" con efecto slide, es algo que voy a explicar como hacer en los próximos días, dentro de las entradas dedicadas a Scriptaculous, como esta misma.

Gabriel Blanch

Muchísimas gracias Rosa. Esperaré a que publiques dicho artículo.

En el email te decía que felicidades por tu trabajo. Es un blog super original y útil y desde el primer momento en que lo vi lo agregué a favoritos ;)

Tb te pedía porfavor si pudieras entrar a mi blog y ya que eres experta en el tema decirme que te parece si no tienes inconveniente

http://www.reflexiona-y-expresate.blogspot.com/

Un fuerte saludo y gracias de nuevo ;)

San..

Hola ROsa!!

Hace unos dias incorpore en mi blog el truco de "leer mas.." en las entradas.. si incorporo este truco.. se pierde el anterior?
como puedo incorporarlo solo en el archivo y no en todas las entradas?

Hace unos dias te mande un mail con una pregunta sobre como aparece mi blog en google.. te llego???

Buenas noches y mil gracias!!!
San..

Rosa

Gabriel Blanch No se me había olvidado...lo dejé correr a propósito:S
La verdad, no me gusta opinar de otros blogs, no me considero experta ni mucho menos...No obstante te diré que la plantilla que usas es una de mis favoritas por su limpieza, sencillez y funcionalidad ;)

Rosa

San.. Una cosa son las "entradas expandibles" de las que hablo en esta entrada, y otra cosa es el "leer más" que es el que tu tienes aplicado...para ese no sirve, al menos de momento.

Creo recordar tu email...que salía la url de una imagen o algo así después del nombre en Google...pero también creo recordar que te respondí...:o

Gabriel Blanch

Hola Rosa.

Muchísimas gracias :)

Una pregunta...cmo puedo hacerlo para que los menus de la barra derecha de mi blog (como en tu caso aparecen posts al azar, archivos...) aparezcan de esa forma? q al pulsar se desplegue?

Gracias :)

Rosa

Gabriel Blanch Se hace usando el mismo sistema aplicado a los gadgets...en breve la entrada al respecto. Como dije en su día, será una serie de entradas sobre algunos de los efectos que podemos lograr en el blog con Scriptaculous.

Gabriel Blanch

Perdón sería el de abajo. Es que el codigo ese que deberíamos encontrar en nuestra plantilla yo no lo tengo...

Donde debo introducirlo entonces?

Rosa

Gabriel Blanch Céntrate en esta entrada...si no usas el sistema de entradas expandibles del que hablo al principio de la misma, no puedes usar el sistema de esta entrada para otra cosa...
¿Has leído mi comentario anterior?

Graciela

:P mira qué bonito regalo de domingo!!!...ha quedado precioso en tu sidebar, ya hice lo que explicaba con anterioridad, claro que no los dás todo preparadito.
Esta parte sí que aún no ha ido: Si queremos sustituir el símbolo de expandir y contraer [+/-] por una imagen, colocamos directamente en su lugar el código para mostrar la imagen...algo pasa que no puedo incorporarla, pero lo lograré!!!...besitos

Kebby Rodríguez G.

Hola Rosita, espero no se haya olvidado este efecto pero en "ir arriba" te felicito por tu blog está cada día más útil... Espero que todo te vaya bien en este día... Nos vemos...
Ahhhh! y dale un vistazo a mi blog please a ver qué se puede mejorar, qué anda mal, que está bien, etc etc... Gracias de nuevo...
el Adventista hoy

San..

Rosa... ya di vueltas todo mi email.. bandeja de entrada.. no deseados.. etc... y no tengo mail tuyo!:(

seria mucho si te piedo me lo re envies a sleivargas@hotmail.com?

Mil gracias!!
Un abrazo..
San.

Lucho Lara

Hola Rosa, Deseo saber como puedo colocar hacer que aparezca en cada entrada de mi blog un cuadro que diga: "Enlaza esta entrada", seguida de un cuadro con el enlace de la entrada para copiar y pegar en otra pagina o blog. Busque en tu blog, pero no encontre como hacer esto. De antemano gracias por tu ayuda. Saludos.

Rosa

Graciela Pues tendría que salir...
<img src="url de la imagen"> en lugar del [+/-]

Rosa

Kebby No, no me he olvidado...:D

Rosa

San... Tengo aún los emails enviados en unos cuantos días anteriores guardados...dime por favor conque nombre debería buscar el tuyo.
Me ahorraría trabajo si lo encuentro y reenvío.

Σ=o) Pau

Iba a poner este truco y me doy cuenta que las entradas anteriores no se ven :( algo paso y estoy complicada porque tengo que seguir estudiando, cuando lo arregle y lo pueda poner te cuento cómo me va :$

Feliz Domingo y comienzo de semana ^_^

besos ronroneados

Jaime Trujillo Escobedo

Genial Rosa, la verdad es que las entradas expandibles es imresionante y ¡ahora deslizantes!! :D Saludines ;)

Mateo

A mi tampoco se me ven las entradas.
:(

Rosa

Lucho Lara Si entiendo exactamente a que te refieres, la verdad, no se para que quieres eso...tus entradas ya tienen un enlace permanente en el título y en su hora en el post-footer...y ningún problema para copiarlo...
No te aconsejo usar eso que dices de la caja de texto para nada...

Rosa

@Σ=o) Pau y Mateo Es el sistema que estoy usando yo misma aquí en el Escaparate y lo he explicado tal como yo lo hice...:S

Rosa

@Pau y @Mateo Si estáis usando otra librería como JQuery, no podéis usar esta a la vez...solo se puede usar una en el blog.

Pau, tu SI estás usando JQuery para el ir arriba.

Mateo

La verdad que no se que es una libreria ni cual estoy usando, jaja ... lo que se es que solo uso cosas que aprendi aca. Pero bueno si no se puede poner mala suerte. Gracias de todas maneras.

Inés

Hola querida Rosa. A mí me pasa lo mismo @Σ=o) Pau y Mateo que las entradas anteriores desaparecen. He observado que si suprimo sólo esto slide" de la segunda parte, las entradas anteriores reaparecen pero el efecto que queda no es el deseado. ¿A qué se puede deber esto? ¿y cómo lo puedo solucionar?
Gracias de antemano Rosa. Me sigue encantado tu blog.

Rosa

Inés Acabo de revisar el código y ¡mea culpa! he encontrado un error :$ al transformarlo para colocarlo en la entrada se me "escaparon" las barras de separación \
Prueba de nuevo a ver si así ya no tienes problema, pues ya te digo que así es como lo estoy usando yo...
Ten en cuenta lo que ya dije antes...si usas JQuery, Mootools, etc. probablemente no funcione, de hecho con JQuery no lo hace porque yo misma lo probé.

Rosa

Mateo Lee el comentario de Inés (el anterior), vuelve a intentarlo y perdona :$

Mateo

jajaja :D que bueno que siempre te preocupas rosa, ya se pueden ver los resultados en
www.juegosparatomar.com
Muchas gracias, saludos!

Raul

No encuentro:
<a expr:onclick='"javascript:toggleIt("" + data:post.id + "");"' href='javascript:void(0)' style='text-decoration:none' title='Expandir/Contraer la entrada'>[+/-]</a>
Yo no cambié el código, sigue igual que cuando lo puse, y no lo encuentro, por cierto, estoy usando el código que dijiste en Archivos y feed (expandir y contraer)Por si eso importa, en cuanto a al script de Google API, ya lo añadí

Inés

Rosa, ahora sí. Miles de gracias!!!!

Rosa

@Inés y @Mateo ¡Bien! se me había pasado...:S y total eran dos barritas, pero ya veis...:D

Jaime Trujillo Escobedo

Rosa, creí que al ponerlo afectaría al tiempo de carga de mi blog pero ¡para nada! ¡va de maravilla! muchas gracias ;)

Rosa

Raul Vamos a ver...estamos hablando de usar este truco si estás usando en tu blog las entradas expandibles de las que hablo al principio de esta entrada (los dos enlaces) si no es para usarlo ahí, ni te sirve, ni vas a encontrar el código...
Trate de mirar tu blog, pero no tienes el acceso a tu perfil...deberías activarlo, estás perdiendo visitas a través de el.

Rosa

Jaime La librería se carga desde Google, así que no suele ralentizar el blog y el script que sustituye al anterior casi que te aseguraría que es más ligero :D

San..

Holaa!!! Te acabo de re enviar el mail... tiene el mismo titulo que el anterior..

Una consulta!!

Gracias por tu ayuda.. y sobre todo por la paciencia.

Un abrazo...
San.

Raul

Rosa, primero quiero saber como se activa eso del acceso a mi perfil y también quiero saber como se usa el efecto slide para los gadget como el de los archivos del blog, igual que como tú lo tienes puesto.
GRACIAS

Rosa

Raul Leete esta entrada:
http://elescaparatederosa.blogspot.com/2007/09/compartir-el-perfil-de-blogger.html

El efecto en los gadget lo publicaré en breve...

Raul

Gracias rosa, espero ansioso el de los gadget

Jaime Trujillo Escobedo

Pués la verdad es que creo que sí que lo hace ir más ápido :D Saludines ;)

LAIN

HOLA ROSA, FELICITACIONES A LO LARGO DE MI VIDA DE BLOGGERA A SIDO DE GRAN UTILIDAD TODOS TODO EL CONTENIDO DE TU PAGINA, AHORA TENGO UN PROBLEMA ESTOY TRABAJANDO CON ALGUNAS ENTRADAS ALGO EXTENSAS Y NECESITO QUE SE EXPANDIBLES EL PROBLEMA ES QUE MI CODIGO HTLM ES ALGO DIFERENTE POR QUE PUES NO ES UNA PLANTILLA SENCILLA, COMO SABER DONDE COLOCAR LOS CODIGOS?

Rosa

LAIN Tienes tantos blogs en tu perfil que...¿como saber en cual el código no coincide? :S Tampoco me dices que tipo de "leer más" has tratado de colocar, ya que hay varios...

Mira, haremos una cosa...dejas la respuesta a este comentario en la entrada del "leer más" que has tratado de colocar y allí me dices en que blog o plantilla trataste de hacerlo ¿ok?
Todo será así más fácil para ambas...¿te parece?

Lolo

Hola Rosita, felicitaciones por tu aportacion, realmente buenisima.

Tengo un problema segui todas las instrucciones pero solo me aparece en la página principal el cambio, cuando entro a mis secciones ya no me muestra los cambios sabes a que se debe..

De ante mano gracias!! :S

ViNYL

Gracias Rosa, ya lo aplique a mi blog y me quedo genial!

http://vinylcvcd.blogspot.com/

Rosa

Lolo Yo solo veo las entradas expandibles aplicadas a tu página principal...para hacerlo también en las de etiquetas tienes que seguir los pasos de esta entrada:
http://elescaparatederosa.blogspot.com/2007/04/ttulos-expandibles-en-los-post-de-las.html

Lolo

Hola rosita, me manda este error "El artilugio con ID "Blog1" no puede contener el elemento: "#comment". Un artilugio sólo puede contener elementos b:includable."

sabes que estoy haciendo mal???

gracias!!!

Rosa

Lolo ¿Estás hablando de esta entrada? porque si es así no entiendo a que viene ese error, aquí lo único que hacemos es cambiar un código que ya estaba por otro sin moverlo de sitio...

Ese mensaje sale cuando se pretende colocar algo ANTES de una instrucción <b:includable y este no es el caso :O

Lolo

Tienes razon, era otra entrada lo que pasa esque desde mi correo le di publicar comentario, pero gracias rosita ya esta solucionado cambie el nombre del artilugio y ya se ven las etiquetas como las tuyas

muchas gracias, buen dia

LoRD

xD Ala rosa eres genial xD,, Que chido efecto

Muchas gracias

Inmortal

Yujuu esto si que da elegancia! ahorita mismo lo pongo, de paso me puede decir para que es el Scriptaculus, Prototype y el otro llamado Jquery que no hacen lo mismo?

Rosa

Inmortal En esta entrada puedes ver una pequeña información sobre eso:
http://elescaparatederosa.blogspot.com/2009/04/librerias-javascript-scriptaculous-y.html

Jquery hace prácticamente las mismas funciones, el problema es que en Blogger no pueden usarse las dos a la vez (Jquery y Scriptaculous)

Jorge Ángel Aussel

Listo, me ha funcionado perfecto. Coincido plenamente con vos en que el efecto deslizante es muy agradable. Le da un toque de distinción a las entradas expandibles, y a todo lo que sea que se le agregue...

Sólo me queda una duda y es cómo alinear el [+/-] con el título... ya que esto [+/-] está más abajo.

Jorge Ángel Aussel

Ya lo hice... era un problema de una modificación que hice para la viñeta de comentarios. Listo, problema solucionado, tengo entradas expandibles... Un paso más adelante.

Anel

hola una consulta, hace tiempo visite tu pagina y no recuerdo si este fue el post que segui los pasos, pero hice de contraer los entradas, pero resulta q no me sale el pie de pagina de las entradas, no se si me puedes decir como lo acomodo y tambien como acomodo la parte de comentarios q me sale en blanco y no del color
ojala me puedas ayudar
gracias

Rosa

Anel Para solucionar lo del blanco de los comentarios localiza esto en el código de tu blog:
.comment-link {
padding-left:20px;
padding-top:5px;
background: url(http://farm2.static.flickr.com/1056/549355443_bf6b6de8bc_o.gif) center left no-repeat;
}
Elimina la línea del background completa:
background: url(http://farm2.static.flickr.com/1056/549355443_bf6b6de8bc_o.gif) center left no-repeat;

Ten cuidado de no borrar la llave de cierre que está debajo.

En cuanto a lo del footer de las entradas expandibles, mira aquí:
http://elescaparatederosa.blogspot.com/2008/10/entradas-expandibles-con-footer.html

Optionz

Hola.. lo implemente y funciona a la perfección.. solo un detalle.. después de usar la nueva opción de Blogger -- more --


No se ve el link Mostrar mas...

Aunque realmente me gustaría que se viera la entrada completa.. y no solo lo que esta arriba de ese código.. se podría??

Rosa

Optionz No he tenido oportunidad de probar el "More" yo misma... pero por lo que he leído, entiendo que desde el editor puedes escoger o no mostrar la entrada completa...

Daniel

Que tal Rosa.

Una pregunta. ¿Se puede aplicar este efecto tambien para un bloglist?, lo que pasa es que yo apliqué esto a una etiqueta y si me funcionó, pero al aplicarlo al bloglist, ya no me funcionó.

Gracias

Rosa

Daniel Si, mira en esta entrada:

http://elescaparatederosa.blogspot.com/2009/05/expandir-y-contraer-gadget-con.html

Daniel

Hola Rosa gracias por la respuesta de hecho ya había hecho lo que viene en esa pagina, pero a la hora de hacerlo me despliega la lista vacía (es decir que si me lo hace pero me aparece vacía) es el widget de ultimas entradas y es un bloglist.

la pagina es geronver.blogspot.com por si lo quieres ver, solo lo pude poner al label que es el que dice materias.

Gracias por tu ayuda.

Rosa

Daniel Si sabías que era esa entrada...¿porque preguntas en esta? eso no ayuda a los demás...
En cuanto a lo que dices, puede ponerse en todas, algo haces mal está claro, en la entrada correspondiente revisa los comentarios por si te son de ayuda.

Edwin Gonzales

XD si que eres Buena :D

cocke69

Ola rosa como t va...

sigo seguido tu blog apenas me animo a escribirte.

No se si ya hayas dicho esto pero sabes si esto de ocultar las entradas asi como tambien ocultar los widgets, t beneficia para que tu blog cargue mas rapido??

SALUDOS..!!

Rosa

cocke69 Los contenidos ocultos se cargan de igual forma aunque no sean visibles...quizá da la impresión de que la carga es mas veloz, pero no es así... esto solo sucede (el que la carga es más rápida) en el caso del "leer más" en entradas de Blogger:
http://elescaparatederosa.blogspot.com/2009/09/leer-mas-nueva-opcion-disponible-en.html

cocke69

Ok Rosa gracias x aclarar mi duda que tengas un lindo dia :D

Martín

He realizado [y comprobado] el primer paso: "Librerías JavaScript : script.aculo.us, y prototype" pero aun no tengo el código que se debe cambiar en el paso 3 de esta entrada:

no lo tengo en mi plantilla aun y no se puede remplazar y seguir con el paso 4... me ayudas? ;)

Rosa

Martín Es imposible que lo tengas si no estás usando el sistema que explico en la otra entrada anterior, la que está enlazada a comienzo de esta...

Javier

Hola Rosa, hay alguna forma de aplicar este efecto pero con JQuery? e intentado usar slideToggle pero la verdad no se como implementarlo.

Te agradezco la ayuda que me puedas dar.

Rosa

Javier De hecho estoy segura que lo hay, pero la verdad que nunca he manejado el JQuery... en Vagabundia creo que encuentras sobre el tema si no recuerdo mal.

Alejoblogger

Hola Rosa, en mi blog tengo un problema, el truco funciona cuando esta cargando el blog, pero cuando carga la sidebar ya no se puede expandir las entradas :(
¿Alguna Sugerencia?
¡Gracias!

Rosa

Alejoblogger Solo puedo decirte que es el mismo sistema que yo utilizo aquí, y que funciona bien...
¿No estarás utilizando JQuery para algún efecto en el blog?...ambas librerías son incompatibles.

Alejoblogger

Ahhh.. ¡Gracias Rosa! lo e Podido Arreglar, ¡Eres Super!
:d:d:d:d

Víctor

¿Y no habrá el mismo efecto pero con jquery?

Rosa

Víctor Supongo que si, ya que con las dos librerías se consiguen efectos similares... tendrías que mirar en Vagabundia o Gem@... yo no tengo nada usando JQuery, de momento prefiero centrarme en Scriptaculous.

Publicar un comentario en la entrada

Si vas a dejar una consulta, procura tener habilitado tu perfil en Blogger o deja la url del blog a revisar (no enlace).

Los comentarios están siendo moderados.

:) :(( :( :P :D :$ ;) :I :X :O |O :S