43

"Subir" y "Bajar" con efecto deslizante en las nuevas plantillas

Flechas
Hace algún tiempo habíamos visto en una entrada anterior, como colocar unas flechas en el blog para ir a la parte superior del mismo y bajar a la parte inferior, con un suave efecto deslizante usando Scriptaculous.

En esta entrada veremos como hacer lo mismo en las plantillas del Nuevo Diseñador.


[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-->

Nota:
Recuerda que si ya estás usando este código (Scriptaculous) para cualquier otro efecto, no es necesario lo coloques de nuevo.
Y recuerda también que si estás usando JQuery en la plantilla, no podrás usar Scriptaculous al mismo tiempo.

[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] Tendremos ahora que localizar en la plantilla esta línea de código:

<div class='body-fauxcolumns'>

Y la cambiamos por esta:

<div id='outer-wrapper' class='body-fauxcolumns'>

[5] Nos toca ahora localizar esta otra línea de código:

<div class='content-cap-bottom cap-bottom'>

Y cambiarla por esta otra:

<div id='footer-wrapper' class='content-cap-bottom cap-bottom'>

[6] Guardamos los cambios.

Entradas Relacionadas:

43 comentarios:


Bocha

Hola Rosa, ando con una duda...

En mi blog http://tuneandoelface.blogspot.com/ quiero colocar algún elemento que funcione similar al muro del Facebook, es decir, que la gente deje su comentario y que el mismo quede a la vista de todos. Este elemento pretendo colocarlo en el pie del blog, ya que tengo un espacio grande y sin nada q ponerle...

Se te ocurre como lo podría hacer?¿?¿

Esperare la respuesta :) :)

Las Matas City

:O:O:O:O:O:O:O Super En Mi Plantilla Vieja Nunca Pude Hacerlo... Pero En la Nueva Al primer Disparo Salio De Una Vez....

Rosa Eres Una Diosa....

Desde Republica Dominicana...

Theemilio_crazy

Hola rosa, Tengo un pequeño problemita y es que como me robaron el blog y no lo pude recuperar atravez de foro de google tube que crear uno nuevo y importe todas las entradas del antiguo blog, entonces el problema es que esas entradas cuando trato de buscarla en el buscador no aparecen aunque si estan publicadas, solo aparecen las nuevas entradas, Que puedo hacer en este caso?...Gracias Por Todo!

Rosa

Bocha Pues no, como no sea un mini chat de esos tipo CBox... otra cosa para eso no sabría decirte.

Rosa

Theemilio_crazy Pues nada... el nuevo blog es exactamente eso, un nuevo blog, que ya no tiene nada que ver con el anterior... si en el que te robaron siguen estando esas entradas, Google las seguirá manteniendo indexadas allí, no en el nuevo.

master

hOLA ROSA, espero que me puedas ayudar.
Estoy buscado algo que haga que al pinchar en un determinado lik de mi blog al acceder a el desaparezcan los elementos de la sidebar del lado derecho.

Mi intencion es poner links de videos y que despues estos se vean en mi blog pero en tamaño grande sin que moleste nada.

Si esto no es posible, podrias decirmme como hacer para que se superponga?
Un saludo

Javier

Rosa y un artículo sobre como tener a tu gusto los comentarios es decir fondos,cuadros,letras

Theemilio_crazy

hola rosa, si eso lo entiendo, pero te digo que cuando trato de buscarlas en mi blog no aparecen, osea hago una busqueda interna y las entradas que he importado no aparecen es como si no estubieran alli, pero si estan...

Rosa

Theemilio_crazy Claro, y así es... el blog es nuevo y Google no ha indexado esas entradas en la nueva url, así que el buscador que usa el motor de Google, no las encuentra.

Rosa

Javier ¿Algo así?:
http://elescaparatederosa.blogspot.com/2007/08/color-de-fondo-en-los-comentarios.html

master

Rosa te agradeceria que contestases mi anterior comentario.


Gracias por tu ayuda

Carnaval de Barranquilla

Buen post como siempre, muy útil y muy bien explicado Gracias!

Sumer

Hola Rosa. Quiero hacerte una consulta... :I
Quiero poner un ícono que diga los comentarios en cada post ( ubicado tal cual lo tienes tú: http://i52.tinypic.com/w8ti6q.jpg ) y borrar el enlace de abajo que dice "... Comentarios"
Espero que sea posible. Muchas graciias :D

almalaire

Acabo de instalarlo. No me termina de convencer por lo que terminaré quitándolo...Pero esta es otra cuestión. Lo que de verdad quería decirte es que hace tiempo que vengo a tu blog cada vez que tengo una duda, se me ocurre alguna chorrada o me da envidia algo que he visto en otro sitio y no se colocar y siempre encuentro una solución. Creo que haces un trabajo fantástico y lo único que yo quería era darte las gracias. Eres increíble. Un abrazo grande y otra vez muchas, mucha gracias.

Rekeme

Me gusto, lo usare...

Sergio

uhhh sera que hay otros modelos:P

Rosa

almalaire Gracias por tan lindo comentario. :F

Rosa

Sumer
http://elescaparatederosa.blogspot.com/2008/12/enlace-comentarios-en-una-imagen.html

Big-Boy Glass

Hola rosa excelente la entrada, OYE AYÚDAME EN ESTO POR FAVOR como haces para colocar lo que tu tienes encima del blog lo que dice "Estás en: Inicio Scriptaculous "Subir" y "Bajar" con efecto deslizante en las nuevas plantillas", recuerda que eres la mejor...!

Big-Boy Glass

Ayuda...! :(( :((

SHIRELL007

Me encanta este blog es de mucha ayuda :p los invito a que visten mi blog http://shirell007.blogspot.com/

dinámica

:D Es increíblemente potente este blog! Hace unas semanas creé un blog por hacer una gracia a mis compañeros de curso y cada vez estoy más metida de lleno en él. Lo creé con la intención de que entre todos le diéramos vida y alimentáramos su existencia pero creo que me voy a quedar sola en el intento...Gracias a ti y a tus consejos me animo cada día más, aunque apenas tengo tiempo, intento subir algún comentario o noticia interesante al blog (http://espacioformador.blogspot.com/)...Aunquesé que me queda mucho camino por recorrer seguiré rastreando por el camino, muchas gracias por tus sabios consejos Rosa.

Rosa

dinámica Uy :D otra que se ha enganchado sin querer, ja,ja.
Gracias por estar y ánimo para seguir con el blog!

Rosa

Rosa, muchísimas gracias. Funciona de maravilla ;)

Globetrotter

Hola Rosa!
perdona que te ponga esta pregunta en esta entrada porque no viene al caso pero no he encontrado la explicación de como hacerlo en ninguna entrada.

Quisiera poner en mi blog lo que tú tienes en el tuyo arriba de todo que dice contacto, y que al clicar sale una pantalla para poner tu nombre y el comentario, y que te envien un mail, como se hace??

Gracias por todo, cuanta ayuda tengo con este maravilloso blog!!!

Rosa

Globetrotter Instalas el formulario en una entrada o página enlazado en el menú después:
http://elescaparatederosa.blogspot.com/2009/06/formulario-de-contacto.html

Jaled

Casi me estropea mi plantilla!Por suerte descargue otra.Puedes enseñarme o hacerlo tu?si puedes dimelo y te hago administradora de mi blog y lo haces

Rosa

Jaled Enseñarte es justo lo que hago en esta entrada... sigues los pasos y listo.
Hacerlo yo, no, lo siento.

Jaled

Y como puedo hacerla exactamente como la tuya,asi,las dos flechas al lado de otras?*

Rosa

Jaled Es casi igual que como ves en la entrada...¿ya lo has conseguido? porque si no es así, lo mismo da arriba que al lado...

Jaled

No lo e conseguido,se me han puesto las flechas encima de otras,y no he podido dejarlas,que hago en este caso?Podrias esxplicarte mejor o grabar un video?Si quieres ver mi blog es este http://defensoresdeben10.blogspot.com/ sugiereme algunas otras mejoras

Jaled

Ayudame....Las imagenes se ponen encima de otras.....

Rosa

Jaled Has preguntado también a Gem@... así que espera te conteste ella.

Jaled

Vaya....Y tu no sabes como hacerlo?

Rosa

Jaled Pues si, si se, pero no me gusta trabajar para que cuando te lo indique ya lo hayan hecho otros... no me sobra el tiempo.

Jaled

Tengo 2 problemitas....1.No funciona el link de bajar y de subir 2.Quiero cambiarles el orden pero no sale.Este es mi blog http://defensoresdeben10.blogspot.com/ de que viene el problema?

Rosa

Jaled Yo veo que funciona perfectamente... y otra cosa, no vuelvas a preguntarme nada si lo heces también a Gem@... no creas que a ninguna nos sobra el tiempo, para que tu puedas estar escogiendo a ver quien te responde antes.

Yolanda

Hola Rosa. Muchas gracias por esta explicación. He usado las mismas flechas que tienes tú en este blog para aplicar este truco, y me ha funcionado. Saludos y felices fiestas.

Yolanda

Hola Rosa. Creo que te había dejado un comentario a esta entrada. He hecho la instalación de este efecto, y se instala, pero curiosamente, desaparece mi lista de seguidores, ¿a qué crees que se puede deber?

Saludos.

Ƹ̵̡Ӝ̵̨̄Ʒ Paulacky Ƹ̵̡Ӝ̵̨̄Ʒ

Hola, mi problema es que puse las flechas y ahora quería cambiarlas por otras mas pequeñas pero cuando voy a guardar los cambios me sale el siguiente mensaje:
"Se ha encontrado más de un artilugio con el ID: Navbar1. Los ID de artilugio deben ser exclusivos."
Yo no tengo ni idea de html si he cambiado algo en el blog ha sido siguiendo despacito paso a poso vuestros tutoriales. Espero me podáis ayudar!!
Mi blog es:http://potispaulacky.blogspot.com/
Un saludo y muchas gracias!!!!! ^^*

Rosa

Ƹ̵̡Ӝ̵̨̄Ʒ Paulacky Ƹ̵̡Ӝ̵̨̄Ʒ Ese mensaje hace referencia a dos secciones o gadgets duplicados, mira en esta entrada a ver si puedes encontrar la solución:
http://elescaparatederosa.blogspot.com/2009/02/mensaje-de-error-los-id-de-artilugio.html

Rosa

Yolanda Gracias a ti y Felices Fiestas! :D

Rosa

Yolanda Tranquila... los comentarios están moderados, así que no salen hasta que yo les doy paso...

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

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