72

"Ir arriba" e "Ir abajo" con efecto deslizante

Ya vimos en una entrada anterior como usar una flecha que nos permite ascender a la parte superior del blog usando Scriptaculous y además con un efecto deslizante añadido muy lindo.

En esta entrada veremos como añadir dos imágenes o flechitas juntas, una que nos permite ascender (Ir arriba) y otra que nos posibilita el descenso (Ir abajo).
Usaremos, al igual que en la anterior entrada, la librería Scriptaculous para darle el efecto deslizante.

[1] Desde Edición HTML de nuestro panel de Blogger localizamos la etiqueta </head> en el código de nuestra plantilla y justo sobre ella pegamos esto:

<!-- Prototype y Scriptaculous-->
<script src='http://www.google.com/jsapi'/><script>
google.load("prototype","1.6.0.3");
google.load("scriptaculous", "1.8.2");
</script>
<!-- Prototype y Scriptaculous-->

Este código solo lo añadimos si no estamos usando Prototype y Scriptaculous, si lo estamos usando para cualquier otro efecto no es necesario añadirlo de nuevo

[2] Prácticamente al final del código de nuestra plantilla localizamos la etiqueta </body> y sobre ella colocamos el código para las imágenes o flechitas de "ir arriba" e "ir abajo":
<!--Flecha ir abajo -->
<a href='#footer-wrapper' onclick='new Effect.ScrollTo("footer-wrapper",{offset:-140}); return false'><img alt='Ir abajo' border='0' src='URL_DE_LA_IMAGEN_FLECHITA' style='position:fixed; bottom:40px; right:0;margin-bottom: 5px;'/></a>

<!--Flecha ir arriba -->
<a href='#outer-wrapper' onclick='new Effect.ScrollTo("outer-wrapper",{offset:-140}); return false'><img alt='Ir arriba' border='0' src='URL_DE_LA_IMAGEN_FLECHITA' style='position:fixed; bottom:0; right:0;margin-top: 5px;'/></a>

[3] Cambiamos donde dice URL_DE_LA_IMAGEN_FLECHITA por la url de nuestras imágenes o iconos-flecha.

[4] Guardamos cambios.

El resultado sería algo parecido a esta imagen en la esquina inferior derecha de la pantalla en nuestro blog:

Flechas

En Iconspedia podéis encontrar una fantástica colección de flechas muy apropiadas para usar con este efecto.

Entradas Relacionadas:

72 comentarios:


Bonzu Pipinpadaloxicopolis III

Yo lo uso sin flechita, con un texto simple :)

Delikat Essences

Gracias Rosa, lo acabo de colocar en mi blog y ha quedado muy bien. Puse en principio las dos flechas pero como me gustan los blogs limpios y sencillos, al final he dejado solo la de subir que creo que es más útil, tal como tú la tienes en tu blog. He mejorado mucho el aspecto de mi blog gracias a tus consejos, mi infinito agradecimiento.

Helena González

Hola Rosa,

Muchas gracias por el truco. Lo he colocado en en el blog, y funciona perfectamente.
También darte las gracias por todos los demás trucos que nos has dado. Eres un sol!!

Angel

Buen día

Es la primera vez que escribo, es excelente todo lo que publicas.

Mi problema es que no sube al apretar en la flecha, no pude conseguir el deslizamiento, solo agregue la almohadilla sin el texto outer-wrapper, sera porque no tengo ese texto en mi blog?

muchas gracias

Anónimo

Que bien, hacia falta este consejo.
Te felicito por tu nuevo header, es muy lindo.
Saludos.

Anónimo

Yo he puesto sólo la flecha de subir (http://elescaparatederosa.blogspot.com/2009/04/volver-arriba-con-efecto-deslizante.html), pero al hacerlo me ha desaparecido el gadget de los seguidores... no entiendo el porqué.

Un saludo y gracias Rosa por tu tiempo.

Anónimo

Por cierto mi blog es http://rinconbalompie.blogspot.com/

MamaNunes

Me encanta todo em su blog, incluso su nuevo layout! Linda plantilha! Y el tutorial ya está! Voy impletmentar.

besos! :D

TESVA

Gracias ROSA por todos los consejos que nos das
** saludos **

Anónimo

Lo hice con tu entrada anterior y la verdad es que me gustó mucho el efecto que se logra (aunque debo confesar que no pude hacer que al presionar la flecha se haga el efecto, pero si que suba) ¿Podrías ayudarme a ver qué es lo que le falta (o le sobra)? (http://retratodeunlibroabierto.blogspot.com)

(Además que en ese tiempo se bloqueaba el cuadro de seguidores).

No sé, quizás sea cosa de mi blog o algo así... de todas formas se agradece mucho la ayuda ^-^

Tullido

Está prácticamente transcrito del post de Diversas y Variadas de hace más de 15 días. Creo que Jéssica YK se merecía haberla citado al menos ¿no crees?

Anónimo

Delikat Essences ¡Gracias a ti! :D

Anónimo

Helena GonzálezUn sol que luce gracias a personas como tu! ¡Un abrazo! :D

Anónimo

El rincón del balompié Fácil... porque ya sabemos creo casi todos que eso pasa. Mira como solucionarlo:

http://elescaparatederosa.blogspot.com/2010/06/mostrar-el-gadget-de-seguidores-usando.html

Anónimo

MamaNunes¡Gracias! Aunque yo podría decir lo mismo del vuestro. :D
¡Un abrazo!

Anónimo

Tullido permiteme decir que pienso que a la hora de llegar y dar un comentario así hay que ser mas justo... es más cordial haber preguntado si lo tomo de allí no? ....yo vengo siguiendo este blog hace buen tiempo no hace 15 días, y ya había implementado este truco gracias al primer post sobre esto de Rosa, de hace no se cuanto tiempo atrás, ahora ella solo complemento o bien perfecciono el post para los que suelen ser menos listos ((que a más de uno nos pasa en algún tema))

Saludos

Anónimo

Tullido Y antes que Jessica lo publicase podría decirte de varios blogs de ayuda que también lo hicieron mucho antes...

Siempre que puedo cito mis fuentes, cuando es algo como en este caso que no necesito ver en ningún sitio, puesto que cualquiera que maneje un poco el tema sabe hacerlo, y que además está ya explicado en MUCHOS otros sitios, no solo en el blog que dices, pues no lo hago.

Por otro lado no es la primera vez que alguien comenta "defendiendo" la autoría de Jessica en alguna entrada, no siendo además cierto, y así querido amigo lo único que conseguís es perjudicarla a ella...

Yo como puedes ver, la tengo enlazada en mi sidebar, quizá si sigo recibiendo este tipo de comentarios me piense lo de mantener su enlace, por ejemplo, y no es una amenaza, sencillamente es un ejemplo de lo que podría pasar si haces esto a menudo en cualquier otro blog.

Por cierto que hace mucho tiempo publiqué el mismo efecto para subir solamente y si piensas un poco, no es tan difícil hacer entonces este...

Quizá podrías preguntar a Jessi de donde tomó la idea del "ir arriba" en cada entrada, e incluso desde cuando usa su icono de flecha igual al mio... te aseguro que después que yo lo añadiera y lo explicase además en una entrada...

Y con esto termino, y siento además haberle dado tanta importancia al tema, pero ya no me parece sea una casualidad el que siempre vengan comparaciones de allí... más cuando en tu perfil lo que muestras es un blog sin hacer "para salir del paso".

Anónimo

Umm Abdurrahman Gracias por tu apoyo :D

Y así fue, ni más ni menos como dices, en realidad pienso que no es necesario usar las dos flechas, de ahí que no lo hubiese explicado en la primera entrada... lo hago ahora, como suelo hacer, cuando recibo varios emails con el pedido de como hacerlo.

¡Un abrazo!

Anónimo

De nada Rosa ;)

Y pues a mi también en principio después de que lo hice lo vi innecesario, pero hace poco cuando instale el panel de control que solo ve uno en el pie del blog, y que encontré aquí como siempre buscando otra cosa, pues me quedo muy útil. Ahora me las estoy apañando para ver como sigo copiandote algunas cosas y mejorar mi hogarcito jejeje.

Saludos Linda!

Tullido

Siento haber herido susceptibilidades.
Aclarar que no tengo nada que ver con Jessika, por lo que eso que dices de los enlaces con su página me da lo mismo. Tu respuesta contiene aunque no lo admitas, una amenaza, que es el segundo elemento que no me ha gustado.
Simplemente soy seguidor (y admirador hasta ahora) de ambos blogs y me sorprendió que la entrada de este fuese tan idéntica (casi transcrita textualmente) a la de Diversas y Variadas del pasado 15 de mayo. Y sobre todo que siendo así, no se citase la procedencia.
Pero ya veo que hay marejadilla de fondo que viene de atrás y puedo asegurarte que soy totalmente ajeno a ella. ¡Ah! Y no soy "de allí", sino de aquí mismo...

Anónimo

Tullido La única "marejadilla" de fondo que hay aquí, es lo que antes he explicado... no es la primera vez que alguien comenta algo parecido y siempre relacionado con el blog de Jessica, no se tu, pero yo a la tercera vez ya no lo considero casualidad.

Lo que dije del enlace, no es ninguna amenaza, no soy persona que se moleste en eso... si quisiera hacer algo al respecto lo haría, con todo el derecho y sin aviso previo (por cierto el enlace sigue en su sitio).

Solo era un consejo ya que SE que en otro blog al menos, también se recibieron un par de comentarios de este tipo y allí simplemente retiraron el enlace...

Si tuvieses que explicar algo como esto, donde las opciones que hay son "aquí va colocado" ...¿cómo lo harías tu?, es normal las explicaciones se parezcan cuando la opción es una solamente. Es más, podría indicarte una entrada con esto mismo, por ejemplo, de mucho antes que el 15 de mayo en otro blog de ayuda, donde la entrada es casi literal de la de Jessi -¿o debería decir al revés?-

Y con esto doy por finalizada la cuestión, así que si recibo otro comentario al tema lo borraré sin más, y esto no es ninguna amenaza ni nada por el estilo, es simplemente el derecho que tengo a moderar, eliminar o lo que considere oportuno hacer en los comentarios de mi blog.

Anónimo

He vuelto Rosa!!!!!!!!

Finalmente no consegui que me funcionase el otro efecto que te pedí, pero es que no lo he encontrado en ningún sitio....

Quería preguntarte sobre otra cosa.

Es sobre el "leer mas" de blogger. El caso es que lo tengo activado y funciona perfectamente. he mirado en otro blog y he copiado el codigo que te adjunto a bajo. y me cambia el aspecto del boton perfectamente, el problema es que kiero cambiar el color del link "leer mas" sin cambiar el resto de links, y no me es posible.... Cómo podría hacerlo?


.jump-link {
background: #FF0084;
padding: 1px 5px;
border: 1px solid #FF0000;
width: 70px;
}

Las Matas City

Querida Rosa, Mi Pregunta Es La Siguiente, Mi Planilla De Mi Blog Es De Las Nuevas Esas Que Tiraron En Draft Y Esta Es La Primera Vez Que No Puedo Realizar Un Aporte Tuyo... He Hecho De Todo Colocando Los Codigos Como Dices y Me Sale La Flecha, Pero Cuando Le Dio No Sube Hacia El Top Del Blog.. Que Crees Que Podras Hacer..

Aqui Esta Mi Blog, Para Que Veas La Plantilla

www.lasmatascity.blogspot.com

Gracias!!!!

Anónimo

Leongino Castillo Es la primera vez y no será la última, las plantillas nuevas casi no coinciden en nada con el diseño de las otras así que... y aún no pienso "meterme" con ellas, pues solo están en pruebas.

De todos modos cambia donde dice outer-wrapper en el código (las dos veces) por
content-outer

WallMix

hola, gracias por la informacion, ya conegui ponerle la flecha a mo blog, solo que me apareze en un borde blanco como quitar ese borde

La Dueña

Hola: conoces algún lugar de almacenamiento para guardar archivos .ico?

Yo usaba XooImage.com pero ahora no me funciona.

Saludos!

Anónimo

La Dueña Google Sites los admite.

Aeren

eres una genia! he conseguido de golpe que funcionen las flechas y ademas que se vean los seguidores, que se habian perdido, gracias por tu trabajazo

Anónimo

Aeren ¡Gracias! :D

EBblogger

Gracias ¿si no te molesta puedo usar tu flechita?

Anónimo

Desasnate Puedes usar la imagen, pero no la url... pues si yo cambio la flecha como suelo hacer si ve otra que me guste más, te quedarías sin ella.

Yesica

Hola Rosa, primeramente gracias por sacar tiempo para ayudarnos, estoy tratando de colocar lo de la flecha para subir arriba, la imagen me quedo bien, pegue los códigos donde explicaste, pero le doy a la imagen y no sube, no hace nada, no se que hice mal, no tengo mucha experiencia en esto del html, por favor si puedes ayudarme, Gracias

Yesica.
http://alemanconoptimal.blogspot.com/

Yesica

Rosa con otra información borre alguno datos del código y logre que la flecha subiera solo que no con el efecto deslizante, como podría lograr que se deslizara?.

Anónimo

Yesica Revisando el código... quizá al borrar datos, eliminaste algo del código que se necesita para el efecto.

Daniel J. Oropeza

Hola, Rosa!!
la verdad es que tu blog esta genial, y es muy bueno... ahora a lo q voy.
Lo que sucede es que ahora estoy en un blog de prueba para ir aprendiendo todo y eso antes de abrir un blog definitivo. Bien, este es lo primero a lo que me he metido y bueno la verdad es que no me sale.. podrias decirme si tengo algo mal. La direccion del blog es: http://danprueba.blogspot.com/
Lo he impletado tal como has dicho, pero la flecha solo aparece, podrias decirme si algo está mal??', gracias...

Anónimo

DannielNo veo la flecha en ese blog, de todos modos me imagino que será el dato que va en: <a href=' ya que tu plantilla es de las del nuevo diseñador y no coincide para nada en sus códigos...

Para subir sería ahí <a href='content y para bajar <a href='footer

Daniel J. Oropeza

Rosa, si efectivamente la flechita no sale porque la quite, de todas formas provare, pero igual gracias

Anónimo

Hola nuevamente Rosa, estube viendo este post e hice exactamente lo que publicas pero a mi me sale un error al darle click a estas flechitas no da la funcion de subir y bajar, si pudieras ayudarme te lo agradeceria! saludos desde Peru

Anónimo

Lo olvidaba este es mi blog: http://tvblogperu.blogspot.com/

Anónimo

Tv Blog Perú Eso es porque tu plantilla no es original de Blogger... tienes que cambiar en el código de las flechas donde dice outer-wrapper (las dos veces) por blogname y donde dice fotter-wrapper por fright (también las dos veces).

Anónimo

Que tal Rosa bueno hice los cambios pero no surgieron efecto http://tvblogperu.blogspot.com

Anónimo

Tv Blog Perú
Cambia para ir arriba por wrapper y abajo por footer, si as´no va, entonces ni idea....

Anónimo

Perfecto Rosa Gracias por la ayuda todo salio bien!

Saludos!

Nati Cortez

Hola!!!
Gracias, ya quedo mi blog con los botones, el único detalle fue que no bajaba, pero cheque tus comentarios y lo resolví cambiando "footer-wrapper" por "footer"...

Saludos

Mi blog: http://cachitosdelalma.blogspot.com/

Anónimo

Tv Blog Perú ¡Me alegro! Y disculpa la primera respuesta... no me fijé todo lo bien que debería haberlo hecho :$

Anónimo

Nati ¡Bien por ti! No todo el mundo se molesta en checar los comentarios y, muchas veces, ahí está la solución. :F

Miguel

Pues otro efecto que me ha salido a la perfección!!!!

He copiado las flechitas que tienes en este blog porque para el diseño del mío me venían de perlas.

Además (no se por qué) en lugar de una junto a otra como las tienes tú, me han salido una encima de la otra, lo que me viene aún mejor porque así no se me tapa ningún elemento en ningún momento.

Así que todo perfecto y muchas gracias por todo!!!!

P.D.: Al final me voy a hacer adicto a tu blog, jeje ;)

Anónimo

Miguel Espero no hayas tomado directamente la url de mis flechas... ten en cuenta que si yo dejo de usarlas y las elimino, las tuyas desaparecen... además de que no es algo demasiado ético eso, deberías descargarlas y subirlas a tu propio alojamiento, para usar una url propia.

Monica Custodio

Rosa, necesito tu varita mágica una vez más! ;)
Resulta que me he enamorado de este efecto de las flechitas deslizantes. He seguido todos los pasos ..... pero no me funcionan. Se ven las flechitas pero .... ups! Muchísimas gracias por contestar siempre tan rápido! :D

Anónimo

Monica Custodio En tu caso es una plantilla de las nuevas, así que has de cambiar en el código de las flechas donde dice footer-wrapper por footer-outer y donde dice outer-wrapper por content-outer

Fijate que en cada caso son dos veces donde has de cambiar, y ten cuidado de no tocar nada más en el código.

Miguel

@Rosa

Por lo de las flechitas que cojí prestadas de tu Blog (comentarios 47 y 48):

Disculpa si he hecho algo que no es demasiado ético. No se me había ocurrido... Soy demasiado nuevo en esto (Sorry).

Tal y como me aconsejaste, las he descargado y las he subido dentro de Blogger para obtener una URL propia de las flechitas.

Gracias de nuevo, y si en alguna ocasión hago algo que no sea del todo "ético" no dudes en decirmelo y lo rectificaré lo antes que pueda.

FAR Ministerios

Rosa el mio sube, pero no baja que hago?
http://fulladven.blogspot.com/

Anónimo

MFullAdventista Donde dice footer-wrapper en el código de las flechitas, cámbialo por footer (fíjate que son dos veces).

Anónimo

Miguel En el caso de Blogger a mi no me haces ningún daño, es decir, no es un dominio propio mio al que de esta manera pudieras estar afectando a mi ancho de banda, solo lo decía por ti, pues a veces cambio cosas en el blog e incluso cambio de alojamiento y tu te quedarías sin ellas...
Si fuese mi dominio, entonces si ya sería otra cosa...
Estate tranquilo, se que en muchos casos es por desconocimiento que hacemos algo mal (yo la primera).
Si tienes tiempo, mira esta entrada:
http://elescaparatederosa.blogspot.com/2007/11/imgredcom-evitando-hacer-hotlinking.html

Monica Custodio

Rosa, querida.
Ante todo agradecerte muchíííííííííííííísimo tu ayuda siempre!
He realizado los cambios que me indicaste para conseguir las flechitas deslizantes pero no ha funcionado ....... además hay una segunda cosa .... en cuanto añado el código del Prototype y Scriptaculous me desaparecen los seguidores!!!! Es cierto, :0
Qué hago? Lo dejo correr? Me sabría mal porque me interesa mucho la opción pero tal vez al tener la plantilla nueva sea demasiado lio, no? Espero tu consejo ......
:-))

Marieta

Hola Rosa, yo tampoco logro hacer el modo deslizante. He probado a poner solo el footer como aconsejaste a MFullAdventista, también he cambiado por el outer footer como dijiste a Mónica outer-wrapper por content-outer, y nada. He probado también como lo dicen en http://www.trucosblogs.com/2010/09/botones-iconos-de-arriba-abajo-blog.html, quitando el Scriptaculous, y nada. Ya no sé qué más probar. Por favor, que hay mucha gente usando las plantillas nuevas. Si tienes un ratito investigarlo yo te lo agradecería de corazón. Mi url es http://malachuca.blogspot.com
Muchas gracias :$
Quedo a la espera de tu respuesta

Anónimo

Monica Custodio y malachuca Esto es para las dos... a ver, el código que hay que colocar para las flechas, lo dejáis igual que está en esta entrada.

Después localizáis esta línea en la plantilla:
<div class='body-fauxcolumns'>
Y la cambiáis por esta:
<div id='outer-wrapper' class='body-fauxcolumns'>

Hacemos lo mismo con esta:
<div class='content-cap-bottom cap-bottom'>

Cambiándola así:
<div id='footer-wrapper' class='content-cap-bottom cap-bottom'>

Y así debería funcionar...

Anónimo

Monica Custodio Si consigues que funcionen las flechas, lo de los seguidores ves aquí como solventarlo:
http://elescaparatederosa.blogspot.com/2010/06/mostrar-el-gadget-de-seguidores-usando.html

Anónimo

malachuca Se que hay mucha gente usando las nuevas plantillas, el problema es que según cada persona eliga su diseño en el Diseñador, ancho y demás cosas, pues los códigos cambian en cada una, siempre habrá cosas que en las nuevas plantillas funcionen para unas y para otras no... Esas plantillas han sido creadas para controlarlas desde el diseñador y poco más...

Monica Custodio

Funciona Rosa! Funcionaaaaa! Estoy tan contenta! Era importante para mi este efecto. Muchísimas gracias por tu ayuda! Muchas, muchas, muchas. Ahora voy a pelearme con la desaparición del gadget seguidores, a ver si lo resuelvo.

Monica Custodio

Funciona! Funciona!
Gracias Rosa. Tu ayuda está siendo importante para mi.

Anónimo

Monica Custodio ¡Qué rápida! :O
Estabas ahí escondida esperando a pillarme nada más responder eeh? ja,ja,ja. Me alegro... y lo otro irá bien ya verás...

Marieta

Jolín, Rosa, va rápido como el viento. Me encanta. Muchísimas gracias. Me encanta lo tenaz que eres.

Anónimo

malachuca Pues si, la verdad soy tenaz, supongo es lo que a veces me hace conseguir lo que busco... hay además cosas como esta, que se que pueden lograrse, así que me lo tomo como un reto personal y hago lo que sea, ja,ja, hasta que sale...

Pepe

Saludos, ya he puesto muchos trucos que publicas en mi blog. Gracias por todo.

pd: si quieres ver lo que agregue te dejo mi blog: http://lasmejoresptcdelmomentogarantizado.blogspot.com/

MundoPhotoshopero

Muchisimas Gracias Rosa!!

Estuve editando completamente una plantilla pero me di por vencida al intentar colocar este truco varias veces.

Hoy me decidi a intentar una vez mas y me sirvio muchisimo el comentario que aclara que para las nuevas plantillas hay que reemplazar el footer-wrapper por footer solo, asiq reemplace eso y ademas el outer-wrapper, por wrapper solo y ya lo ves, FUNCIONANDO xD

Soy feliiiiz jajaja, te invito a pasar cuando quiera por mi blog. Saluditosss!!! ^^

Anónimo

MundoPhotoshopero Y si, voy a publicar una entrada con eso, pues muchos lo piden para las plantillas nuevas, pero pocos se molestan como tu en revisar los comentarios.
¡Muchas gracias! :F

MINDistortion

mil gracias a dios x haberte creado rosa xD q hincha :O :O :O

pero lo malo no se xq mi lista de seguidores no se ve pfff help

Kas-Tro

a mi me sube pero de un solo golpe, y me baja igual ya coloque el codigo como dices miralo en mi blog de prueba.. http://prueba2056.blogspot.com

Anónimo

MINDistortion Mira aquí:
http://elescaparatederosa.blogspot.com/2010/06/mostrar-el-gadget-de-seguidores-usando.html

MINDistortion

thanks rosa ta q si es q vienes a lima peru dime no mas ah para yo ser tu guia personal xD eso si tu pagas xP :P

Anónimo

Kas-Tro Yo veo que sube y baja como debe ser.

Publicar un comentario

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