Los botones de Subir y Bajar facilitan el acceso al contenido de la página, sobre todo cuando en la página principal hay muchas entradas o cuando una entrada tiene demasiados comentarios.
Vamos a ver dos formas de poner los botones de Ir Arriba e Ir Abajo, una es la forma "simple" y la otra tendrá un efecto deslizante.
Entra en Plantilla | Edición de HTML y antes de </body> pega lo siguiente:
Cambia la URL de la imagen donde se indica; el primer código corresponde al botón de Ir Arriba, el segundo al de Ir Abajo.
Para que al subir y bajar tenga un efecto deslizante necesitaremos Scriptaculous, así que estando igual en la Edición de HTML pega antes de </head> el siguiente código:
NOTA: Si ya lo tienes en tu plantilla no es necesario pegarlo de nuevo.
Ahora antes de </body> pega lo siguiente:
De igual modo hay que cambiar la URL de la imagen tomando en cuenta que el primer código es para el botón de Ir Arriba y el segundo para el de Ir Abajo.
Los botones estarán uno en la parte superior derecha y otro en la parte inferior derecha, si deseas que ambos estén en medio de la pantalla entonces en el código de la imagen de "Ir Arriba" verás que dice top:0; eso cámbialo por otro valor como top:250px;
Y en botón de "Ir Abajo" dice bottom:0; eso cámbialo por top:490px;
ACTUALIZACIÓN:
En cualquiera de los dos métodos (simple o deslizante) si usas una plantilla nueva del Diseñador de plantillas de Blogger entonces tendrás que buscar esta línea:
Y cambiarla por esta otra:
Luego buscar esta línea:
Y cambiarla por esta:
Con eso funcionará también en esas plantillas.
Aquí les dejo unos íconos que pueden utilizar para sus botones.
Vamos a ver dos formas de poner los botones de Ir Arriba e Ir Abajo, una es la forma "simple" y la otra tendrá un efecto deslizante.
Forma simple
Entra en Plantilla | Edición de HTML y antes de </body> pega lo siguiente:
<a href='#'><img border='0' style='position:fixed; top:0; right:0;' src="URL de la imagen" title="Ir arriba" /></a>
<a href='#footer-wrapper'><img border='0' style='position:fixed; bottom:0; right:0;' src="URL de la imagen" title="Ir abajo" /></a>
Cambia la URL de la imagen donde se indica; el primer código corresponde al botón de Ir Arriba, el segundo al de Ir Abajo.
Efecto deslizante
Para que al subir y bajar tenga un efecto deslizante necesitaremos Scriptaculous, así que estando igual en la Edición de HTML pega antes de </head> el siguiente código:
NOTA: Si ya lo tienes en tu plantilla no es necesario pegarlo de nuevo.
<!-- 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-->
Ahora antes de </body> pega lo siguiente:
<a href='#outer-wrapper' onclick='new Effect.ScrollTo("outer-wrapper",{offset:-140}); return false'><img border='0' src='URL de la imagen' style='position:fixed; top:0; right:0;' title='Ir arriba'/></a>
<a href='#footer-wrapper' onclick='new Effect.ScrollTo("footer-wrapper",{offset:-140}); return false'><img border='0' src='URL de la imagen' style='position:fixed; bottom:0; right:0;' title='Ir abajo'/></a>
De igual modo hay que cambiar la URL de la imagen tomando en cuenta que el primer código es para el botón de Ir Arriba y el segundo para el de Ir Abajo.
Los botones estarán uno en la parte superior derecha y otro en la parte inferior derecha, si deseas que ambos estén en medio de la pantalla entonces en el código de la imagen de "Ir Arriba" verás que dice top:0; eso cámbialo por otro valor como top:250px;
Y en botón de "Ir Abajo" dice bottom:0; eso cámbialo por top:490px;
ACTUALIZACIÓN:
En cualquiera de los dos métodos (simple o deslizante) si usas una plantilla nueva del Diseñador de plantillas de Blogger entonces tendrás que buscar esta línea:
<div class='body-fauxcolumns'>
Y cambiarla por esta otra:
<div id='outer-wrapper' class='body-fauxcolumns'>
Luego buscar esta línea:
<div class='content-cap-bottom cap-bottom'>
Y cambiarla por esta:
<div id='footer-wrapper' class='content-cap-bottom cap-bottom'>
Con eso funcionará también en esas plantillas.
Aquí les dejo unos íconos que pueden utilizar para sus botones.
hola buen post como siempre
ResponderEliminaresta genial el blog
bye
Es un tema pendiente agregar uno de estos botones en Cyber, pero la verdad que no quiero seguir agregando cosas, es mas, estoy viendo que se puede quitar porque carga muy lentamente... :(
ResponderEliminarSi alguien lo implementa por favot paseme el link de su blog así lo veo funcionando (me interesa mas el segundo)
Un abrazo!!!
bernardo28, gracias por tu visita. Saludos.
ResponderEliminarbrother, habría que ver qué es lo que está alentando la carga de tu página, pero es verdad, suele tardar un poco para cargar. El segundo con el efecto es el que yo tengo en este blog. Un abrazo!
muy bueno y completo hasta con las imagenes, en mi blog tambien lo uso con el efecto slide de Scriptaculous y me parece que queda bien :D
ResponderEliminargenial :D
ResponderEliminarEstupendo Potro.
ResponderEliminarSiempre estoy pendiente de tu sitio.
Saludos y éxito!.
Jpz.-
fabian, también lo prefiero con efecto deslizante, le da más estilo.
ResponderEliminarbLACk, qué bueno que te gustó.
Jpz, gracias, yo igual estoy siempre al pendiente del tuyo ;)
Muy bueno Potro
ResponderEliminarYa lo habia puesto en Curiosidades del Mundo
pero yo tenia la de la forma simple
solo agregue el codigo de Scriptaculous y me salio en dezlisante
esta muy bien
mmm a mi me va algo mal :S otra vez.. :S el de abajo no me sirve :s intente con los 2 y nada, mira directamente:
ResponderEliminarhttp://mr-ubuntu.blogspot.com/#footer-wrapper
Excelente post pero me surgio un problema ir abajo no funciona Jejeje...! cual sera el por Que? ya que lo tengo agregado en mi blog Christopher SC
ResponderEliminarAlex, me alegro que te haya servido =)
ResponderEliminarDavis N., en el caso de tu plantilla es distinto, en el código de Ir Abajo cambia las dos veces que dice footer-wrapper por footerbottom
Christopher, en tu caso cambia el segundo código las dos veces que dice footer-wrapper por credit.
Hola potro veras,recientemente puse una imagen parecida a la de las flechas en mi blog,pero quisiera ver si no hay una codigo para que se cierre esa imagen cuando alguien ya no la quiera ver,podras ayudarme? Saludos.
ResponderEliminarOk gracias, ya funciona perfectamente...!
ResponderEliminarAhhhh... es verdad Bro, sabes que soy espiestado, no lo había notado. Queda muy bonito ese efecto!
ResponderEliminarHoy voy a trabajar para ver si puedo aumentar la velocidad de carga del blog... les cuento lo resultados luego.
Un abrazo!!!
Borest, supongo que con algún script se podría hacer, en cuanto me haga un poco de tiempo veo qué se puedo hacer y lo publico.
ResponderEliminarChristopher, ya lo veo funcionando ;)
brother, de todas formas con el Leer más que pusiste sí ha aligerado el tiempo de carga. Un abrazo!
Gracias potro,espero...
ResponderEliminarHola me interesa el ir arriba y abajo pero no se como se pone la urs de las flechas. saludos y gracias.
ResponderEliminarAver si lo pongo en mi plantilla, por cierto, las flechas estan perfectas. Saludos!
ResponderEliminarHola.
ResponderEliminarCuando cree mi nuevo blog, en contre una plantilla muy buena para colocar videos.
pero no se como hacer que aparesca.
podrias ayudarme.
http://disneystarstube.blogspot.com
y esta es la de blogger templates.
http://btemplates.com/?s=Tube&x=0&y=0
saludos.
..NaNy.., necesitas tener la URL de la imagen que has subido a Internet, esa URL es la que debes poner en el código.
ResponderEliminarPepeX, gracias por tu visita =)
El Venado, nunca he usado esa plantilla, te dejo el enlace de la página del autor donde explica cómo ponerlo: http://www.dantearaujo.net/2009/09/blogger-video-template.html
Andamos de Regreso despues de estas Vacaciones
ResponderEliminaryeh potro muy buen codigo ya lo avia visto aqui pero jamas lo encontraba en tus post anteriores y cual era la sorpresa que no lo avias publicado hasta ahora
que buen codigo te arhorras trabajo estar subieno y bajando por partes
GrACcias Potro!
Potro Rulez
Debió ser de los primeras entradas que debí publicar pero por una u otra razón no lo hice...y ahora que veo hay varios temas básicos que tengo en el olvido. Trataré de irlos publicando estas semanas.
ResponderEliminarGracias por tus comentarios y bienvenido de nuevo!
Este comentario ha sido eliminado por el autor.
ResponderEliminarHola Mundo Tv,
ResponderEliminarNo es ninguna molestia. El código de Scriptaculous debe ir antes de </head> no antes de <head>
Cámbialo de lugar y deberá funcionar.
Saludos.
tu espacio me ha servido de mucho, de corazon gracias mi espacio tiene un mejor aspecto...saludos
ResponderEliminarMuchas gracias a ti por tu visita ;)
ResponderEliminarHOLA HE COLOCADO TAL COMO DISE EN TU TUTORIAL PERO NO ME FUNCIONA SIGUE SUBIENDO LA FLECHA PERO SIN EFECTO HO ESTARE ASIENDO ALGO MAL :S ESPERO TU AYUDA
ResponderEliminarAQUI TE DEJO UN BLOG DE NOTAS DONDE COLOQUE LOS CODIGOS ESPERO Q ME RESPONDAS GRACIAS
URL : http://www.4shared.com/file/192479773/ccf0be25/wwwperuanotevetk.html
SALUDOS
100% CIUDADBLOGGER ^^
Es que estás utilizando el código equivocado. Pusiste el de la forma simple, sin efecto. Para que tenga efecto debes poner el código de abajo.
ResponderEliminarSaludos.
xD me equiboque jejeje disculpa pero ahora el problema es q he colocado el codigo de abajo y ahora no sube no responde la flecha asu :S que estara mal ???
ResponderEliminartu me diras lo dejo sin efecto o me sigueras ayudando :D te lo agradeseria ^^
100% CIUDADBLOGGER ^^
no ahy otro lugar en donde ponerlo ???
ResponderEliminar100% CIUDADBLOGGER ^^
Lo que sucede es que el código que puse es para las plantillas con estructuras "oficiales" de Blogger y la tuya tiene muchas variantes.
ResponderEliminarEn el código de la flecha de arriba verás que dice dos veces outer-wrapper, cambialo por wrapper
En el código de la flecha de abajo dice dos veces footer-wrapper, cámbialo por footer
Saludos.
Este comentario ha sido eliminado por el autor.
ResponderEliminarERES LO MAXIMO QUE COMES QUE TODO LO SABES GRACIAS POR SER PACIENTE ^^
ResponderEliminarME FUNCIONO ^^
100% CIUDADBLOGGER ^^
Me alegra que al fin tengas los resultados esperados ;)
ResponderEliminarSaludos!
tengo una curiosidad quisiera saber con q programa ases las botones png
ResponderEliminarQUE TENGAS BUENAS BACACIONES ORALE POTRO
SALUDOS
100% CIUDADBLOGGER ^^
Estimado Potro:
ResponderEliminar(Mi Blog: http://kishaper.blogspot.com/ )
Yo coloco el codigo de efecto deslizante y ponga las imagenes de las flechas rojas pero sim empargo solo funciona el de ir arriba y sin efecto deslizante.
¿Que puedo hacer?
Un Saludo:
Muzgo Webmaniatico
www.PeruanoTeve.tk, esos botones no los hice yo, lo encontré en la red. Los que yo hago los hago en Photoshop ;)
ResponderEliminarmuzgo webmaniatico, no veo que tengas las flechas puestas para ver el código :S
ok!!! Salió!!! Por fin ya me salió!!! Gracias!!!
ResponderEliminarHola Potro feliz vagaciones jejejeje mira este efecto lo inplemente en mi blog de Tech Adicto pero no funciona he estado probando algunas opciones que estan en el comentario pero sin embargo no funciona, cuando este libre visita mi te dejo la direccion http://techadicto.blogspot.com/ para que ayudes en esta oportunidad y quien como vos que si puede ir de vacaciones Jejeje Saludos...!
ResponderEliminarHola Christopher,
ResponderEliminarHabía que aprovechar las ofertas de la agencia ;)
En el caso de tu plantilla en lugar de #footer-wrapper pon #copyright recuerda que tienes que cambiarlo en los dos lugares que aparece.
Saludos.
Genial, ya estan funcionando a la perfeccion....!
ResponderEliminarGracias
Perfecto! Ya lo he visto trabajando.
ResponderEliminarSaludos.
hola necesito ayuda para mi blog sobre el tema de las flechas arriba y abajo.ir arriba si me sirve pero ir abajo no mi blog es www.penawebdelxerecismo.blogspot.com y estas dos webs www.cocinaandaluza.es.tl www.leatherpielall.es.tl espero respuestas.un saludo.
ResponderEliminarHola xerez,
ResponderEliminarEn el caso de tu plantilla de Peña Xerecista no tiene footer , así que antes de </body> pega <div id='footer-wrapper'/> para que funcione.
En las otras dos webs no sabría decirte, mis conocimientos se limitan a la plataforma de Blogger.
Saludos.
hola gracias porl la ayuda ya me sirve en el blog y yo ya buscare alguna solucion para las otras dos webs un saludo y hasta pronto..
ResponderEliminares que las quite por que no funcionaban, llamame muzgo solo y ahora las pongo para que lo veas.
ResponderEliminarPorfavor y Gracias
Ponlos para que pueda ver el código.
ResponderEliminarHola Potro denuevo yo jejeje sabes tuve que cambiar de plantilla por algunos problemas es el mismo pero creo o me parece que algunos codigos han variado por que no acepta o mejor no funciona los botones te dejo la direccion para que me ayudes nuevamente techadicto.blogspot.com y gracias por tu ayuda :P
ResponderEliminarHola Christopher,
ResponderEliminarPara ir arriba sería top-wrapper y para ir abajo sería copyright-data ;)
Saludos.
Hola Potro, bueno algo raro sucede con los botones, por que cuando subo en la barra de direcciones sale http://techadicto.blogspot.com/#top-wrapper lo cual no deberia salir y ademas no tiene el dezlisamiento suave, sube si o baja pero no se deslisa ¿Que sucedera? :(
ResponderEliminarHola Christopher,
ResponderEliminarEs que tienes en tu plantilla JQuery y este efecto necesita Scriptaculous, cuando se juntan estos scripts uno (o ambos) fallan ya que no son compatibles :S
Bueno, gracias por la ayuda pero que pena en verdad pero bueno al menos sube y baja jejejeje. Saludos de Buenos Aires
ResponderEliminarDéjame recordar el método de JQuery que tiene el mismo efecto, ahí ya no tendrías problemas.
ResponderEliminarSaludos.
Tengo el mismo problema que Christopher, porque mi plantilla tiene algunos scripts en JQuery. Te agradecería si encuentras la solución.
ResponderEliminarSaludos.
Hola Serrucho,
ResponderEliminarNo hay otra solución excepto decidirse por usar una sola librería, ya sea Scriptaculous o JQuery, ambas tienen funciones muy similares.
Saludos!
Este comentario ha sido eliminado por el autor.
ResponderEliminarHola Potro, creo que de todas los tutoriales el tuyo está bastante claro, pero tengo un problema y es que la flecha no llega al tope del la pagina, cuando hago click en la flecha de ir arriba queda un poco mas abajo que la cabecera, no entiendo a que se debe, te estaría muy agradecido si me ayudas con esto, un Saludo y muchas Gracias.el blog es http://selectprint.blogspot.com/
ResponderEliminarHola ANDRES ARMAS,
ResponderEliminarMuchas gracias por tu comentarios.
Lo que sucede con tu plantilla es que arriba del outer-wrapper tienes otro elemento, por eso no llega al tope. Pero tiene solución: al inicio donde tienes tu menú dice <ul class='menu4'> eso cámbialo por esto,
<ul id='top' class='menu4'>
Luego en el código de las flechas de Ir Arriba cambia las dos veces que dice outer-wrapper por top
Con eso al subir llegará hasta arriba de la página.
Saludos.
El Potro:
ResponderEliminarYa he puesto los botones a ver si eres capaz de ayudarme
Hola muzgo webmaniatico,
ResponderEliminarPara que el botón de Ir Abajo funcione cambia en el código las dos veces que dice footer-wrapper por footerbox
El efecto deslizante no funciona porque tienes un menú que usa JQuery y ese tipo de efectos no es compatible con Scriptaculous.
Saludos.
El Potro, eres flipante, muchas gracias.
ResponderEliminarPodrias crar una entrada explicando el nuevo gadget de blogger, lo de las paginas?
Por favor y gracias:
Muzgo Webmaniatico
Muy interesante, gracias
ResponderEliminarmuzgo webmaniatico, más adelante hablaré un poco sobre ello :)
ResponderEliminarNuria, qué bueno que te ha servido!
Gracias otra vez, lo he puesto a la izquierda (left) porque mi barra esta ahi, y a la derecha me tapaba un poco los extremos de las entradas.
ResponderEliminarPor cierto, me he permitido "fusilar" tus flechitas.
No hay problema, para eso las puse ;)
ResponderEliminarMuy agradecido por tu respuesta Potro, gracias por tu ayuda tan valiosa y desinterezada, aqui hay mucha información, voy a intentarlo nuevamente. Saludos.
ResponderEliminarPor nada ANDRES, seguro todo saldrá bien.
ResponderEliminarSaludos.
Hola funciono el boton arriba abajo de maravillas gracias por tu aporte
ResponderEliminarhttp://institutociencias.blogspot.com/
Me alegra que te haya servido.
ResponderEliminarSaludos.
Muchas Gracias, ahora mismo lo tengo en el Blog, creo que sin tu ayuda no lo hubiera logrado, excelente amigo un abrazo.
ResponderEliminarPor nada ANDRES, un placer ayudarte.
ResponderEliminarSaludos.
buenas potro
ResponderEliminaryo tengo un blog es
http:// mundo-rulas.blogspot.com
lo acabo de comenzar por eso
no tengo nada pero no funcionan las flechas
me podrias ayudar?
Hola Anónimo,
ResponderEliminarNo he podido ver tu blog, la dirección que pusiste dice que el blog no existe.
Saludos.
Como consigo las flechas, quiero decir el URL de cualquiera!!!!!
ResponderEliminarJeje ya pude visita mi blog y dime que tal
ResponderEliminarExcelente Laura, te han quedado muy lindas ;)
ResponderEliminarme encanta tu blog estoy aprendiendo montones, muchísimas gracias
ResponderEliminarGracias a ti por tu visita y tus comentarios ;)
ResponderEliminaroye potro los botones me funcionan
ResponderEliminarmuy bien en mozilla firefox
pero ahora que lo abri en el explorer veo que quedan en la parte de abajo y no a la derecha de la pagina como deberia
me podrias explicar a que se debe?
http://varias--cosas.blogspot.com
Puede ser la versión de tu Internet Explorer, he entrado con la versión 8 y las flechas están en el lugar adecuado, lo que sí es que no cargan siempre.
ResponderEliminarPor cierto que en el caso de tu plantilla en el primer código debes cambiar donde dice outer-wrapper (2 veces) por wrapper.
Y el segundo código cambia donde dice footer-wrapper (2 veces) por footer.
Saludos.
Buenas tardes Potro .
ResponderEliminarNada que no soy capaz ...he hecho todo como pones y na de na .
http://tabloncentral2010.blogspot.com/
Lo de las URL he subido las flechas a PICASA y he copiado las url ... es asi ???
esto es lo que he puesto antes de
ResponderEliminar(lo he tenido que borra no me lo admiten los comentarios)
y no veo las flechas por ningun lado.
Hola VRedondoF,
ResponderEliminarLas URL están mal. Entra a Picasa y dirigete a donde está la imagen, luego con el botón derecho del mouse selecciona Copiar la ruta de la imagen. Es es la URL que debes poner.
Respecto al código de Ir abajo, busca donde dice <!-- end outer-wrapper --> y debajo pon esto:
<div id="footer-wrapper"></div>
Saludos.
Hecho ... muy agradecido ...
ResponderEliminarSoy un "Carroza Jubilado" y esto no se me da muy bien ...
Abusando de tu amibilidad ... podria separarlo un poco arriba , que no quede tan pegado arriba??.
A tu disposicion para lo que necesites ...
Por cierto me parece muy intesante tu blog me lo voy a tabajar en profundidad.
Repito MUY AGRADECIDO.
En el primer código busca donde dice:
ResponderEliminartop:0;
Y cámbialo por top:10px;
Con eso estará más separado de la parte superior.
Qué bueno que te ha resultado bien.
Saludos!
Saludos.El boton de abajo no me funciona en mi blog.Os paso el enlace.
ResponderEliminarhttp://seccion-anime.blogspot.com/
Este blog es un apartado de mi blog principal.
saludos.
En el caso de tu plantilla en lugar de #footer-wrapper es sólo #footer
ResponderEliminarSaludos!
Ahora si !! Dios k grande k eres !! Muchas gracias y enhorabuena por este blog, que sirve de gran ayuda.Gracias.
ResponderEliminarBueno gracias por lo del boton y otros comentarios, muy utiles, le estoy trabajando a mi blog y no esta mal del todo ahí les dejo la dirección para darle una hojeada
ResponderEliminarhttp://signartesgraficas.blogspot.com
Qué bueno que te ha sido de utilidad :)
ResponderEliminarHola potro aqui nuevamenete molestandote aqui va mi problema yo he colocado los codigos tal como estan y me funciona pero mi Menú estilo Dock para Blogger (1) deja de funcionar todas las imagenes se ponen para un lago y no funciona el efecto quisiera preguntarte si ahy otro lado donde colocar el codigo para que tenga el efecto de Efecto deslizante
ResponderEliminarGracias Suerte
100% CIUDADBLOGGER ** !!!
Hola PeruanoTeve,
ResponderEliminarEl menú estilo Dock usa JQuery, y el efecto deslizante de estas flechas usan Scriptaculous, estas librerías no son compatibles, por lo que no puedes tener ambas sino sucede eso, dejan de funcionar las cosas.
Saludos!
MUY BUEN POST LAMENTO DESIRTE QUE A MI NO ME FUNCIONO Y TENGO UN BLOGEER ! AYUDAME !!
ResponderEliminarSin saber cuál es tu blog me es imposible ayudarte.
ResponderEliminarTambién necesitaría saber qué es exactamente lo que no funcionó.
hola potro, bueno te queria comentar que yo puse todo como lo dice ai, pero sin embargo la flecha de abajo no me sirve, no se si es porqe le puce una imagen flotante o que, porqe cuando la cierra si funciona, pero no la qiero sacar, que le puedo poner para mantener las dos :S?
ResponderEliminarEfectivamente es por la imagen flotante que se encima al botón y no deja que tengas acceso a él.
ResponderEliminarPuedes poner la imagen flotante del lado izquierdo o ponerla al lado de la flecha para que no interfiera.
Busca en tu plantilla esta parte:
#ftr_imagen {
background: url(http://img440.imageshack.us/img440/7929/belloto.gif) no-repeat;
bottom: 0px;
right: 0px;
Si lo quieres a la izquierda cambia right por left.
Si lo quieres al lado de la flecha cambia el 0px por 50px
ya lo arregle :), muchas gracias :D
ResponderEliminarHola Potro
ResponderEliminarSiento decir que no me funciona, solo tengo la flecha de ir arriba, e ir va, pero no con efecto deslizante. Si pudieras echarle un vistazo te lo agradecería.
Un saludo
Hola Kartlingas,
ResponderEliminarEl primer código debe ir justo antes de la etiqueta </head>
Tú lo has puesto en el área de los estilos, es por eso que no se ejecuta el script. Pégalo donde te menciono y me comentas si se ha arreglado.
Saludos.
Muchas gracias Potro, ha ido perfecto.
ResponderEliminarUn saludo
A mi no me sirve ni una ni otra, pongo los codigos y sale alreves ya tengo dos horas tratando y ya me di porvencida, espero y me puedas ayudar porfavor, aqui te dejo el link de mi blog, para que heches un vistazo porfavor a lo mejor es el tipo de planilla que tengo, porque pongo el codigo que se supone que debe de subir y la flecha se pone arriba y no abajo para que suba, espero tu ayuda potro...abrazos.
ResponderEliminarhttp://lacarolitasdesignz.blogspot.com/
En el caso de tu plantilla en el botón de Ir arriba, en lugar de poner #outer-wrapper debes poner #art-main
ResponderEliminarSaludos.
Hola Potro, otra vez yo, mira ya hise lo que me dijiste que pusiera, la flecha si sube, pero esta arriba, y yo quiero que este abajo, como le puedo hacer?? que este abajo para que suba...muchas gracias por responder mi mensaje anterior, eres bien amable...besos
ResponderEliminarHola .·:*¨♡¨*:·. LaCaRoLiTa .·:*¨♡¨*:·.,
ResponderEliminarEntonces busca en el código que has puesto esta parte top:0; y cámbialo por bottom:0;
Saludos!
Yessss!!! muchas gracias Potro, wow! quedo surper, si que te la sabes de todas todas, que padre que hay personas como tu que comparten lo que saben y mas que nada que respondas las preguntas, eres super!!! pasa a mi blog a ver que me quedo muy bien, ah! tambien tome tu link y lo puse en el top menu de mi blog para que vengan a visitarte... besos Potro que tengas un lindo fin de semana.
ResponderEliminarQué bueno que ya ha quedado y que está funcionando!
ResponderEliminarMuchas gracias por el enlace y tus comentarios!
Buen fin de semana :)
no funciona
ResponderEliminarNo se dice no funciona, se dice ¿por qué a mí no me funciona?
ResponderEliminarAmigo esta bueno tu aporte, lo malo es ke me genera algunos problemas con gadgets de mi blogger, como arreglaria eso?
ResponderEliminarNo se porque pero funciona mejor en el modo simple, con el modo de efecto vota errores con otros scripts del mismo blogger
ResponderEliminarSi usas JQuery es posible que te cause conflictos, pues no se lleva con Scriptacoulos, que es el que se usa para conseguir el efecto deslizante.
ResponderEliminarSaludos.
una consulta, se puede hacer algo para que la flecha de "Ir abajo" aparezca en la parte superior de cada post y te redirija hacia el final del post?
ResponderEliminarHola EmmaX,
ResponderEliminarPues haciendo algunas modificaciones se puede, el problema es que no baja exactamente hasta donde termina el post, sino en la caja de los comentarios.
ahh. bueno me diste esperanzas por lo menos, ja.
ResponderEliminarMe podrias pasar el codigo o indicar las modificaciones que le tengo que hacer a la plantilla?
Tengo bastante idea de html y css, asi que podes explicar sin miedos
No es nada complicado, expande los artilugios y busca esta línea:
ResponderEliminar<div class='post-body entry-content'>
Debajo pon este código:
<div style='float:right;'><a href='#abajo-footer'><img border='0' src='URL de la imagen' title='Ir abajo'/></a></div>
Luego busca esta línea:
<div class='post-footer'>
Y sustitúyela por esta otra:
<div id='abajo-footer' class='post-footer'>
Ya sólo cambia la URL de la imagen y listo.
¡Saludos!
oye potro no me sele el efecto deslizante
ResponderEliminarhttp://segundo--e.blogspot.com
Debe haber algún otro script que no deja funcionar el que hace que tenga el efecto :S
ResponderEliminarGracias potro. La verdad es que con tu ayuda los que hace un par de meses no teníamos ni idea, tenemos en marcha al menos yo un Blog que marcha fantásticamente bien.
ResponderEliminarAl igual que otros he tenido problemas con el funcionamiento de la flecha hacia abajo, pero después de varios cambios ha funcionado quitanto el footer-wraper por solo footer. Mi pregunta es ¿porqué ocurren estas cosas en algunas plantillas no sirviendo el código original que tan amablemente nos facilitas?. Es simple curiosidad. Gracias
Un saludo
Hola Cristina,
ResponderEliminarMe da mucho gusto saber que la información que has encontrado aquí te ha sido de ayuda para emprender tu blog.
La razón por la que no a todos les funciona el código original es porque ese código (al igual que la mayoría de los que explico) está basado en las plantillas estándar de Blogger, que son las plantillas clásicas, más específicamente en la plantilla Mínima.
Sin embargo, quienes diseñan las demás plantillas generalmente no respetan el nombre original de los códigos y les cambian el nombre o simplemente dejan de incluir ciertos elementos; esto hace que se vuelva todo un caos, pues una plantilla tiene un nombre, otra otro, y otra no tiene nada.
Es por eso que en esos casos hay que detenerse un poco a analizar la plantilla para identificar cuál es el nombre que le debería corresponder y así solucionar el problema.
¡Saludos!
Una pregunta. Haber colocado las flechas de arriba y abajo ha podido de alguna manera perjudicar el Gadget de Seguidores?. Desde que lo instlé ha desaparecido la información. Otra pregunta que no tiene que ver con esta entrada pero no he encontrado otra para hacerlo. Quisiera colocar unos catálogos en pdf para ser descargados por los clientes, cómo lo hago.
ResponderEliminarGracias de nuevo
Un saludo
Hola Cristina,
ResponderEliminarSi usaste el método con efecto deslizante sí, pues el script de Prototype y Scriptaculous tiene conflictos con los códigos de la Lista de Seguidores.
Esto es genial, funciona perfectamente. Gracias por tomarte la molestia de transmitirnos tus conocimientos.
ResponderEliminarNo es ninguna molestia ;)
ResponderEliminarMuchísimas Gracias El Potro !!! me ha sido de mucha utilidad tu web con tus consejos, ya que mis conocimientos eran muy escasos.
ResponderEliminarCon paciencia lo he conseguido. Gracias nuevamente.
Si quieren hechar una hojeada al blog para ver como me quedó, aquí les dejo la dirección de mi blog.
http://recordandoamagonico.blogspot.com/
Un saludo muy cordial.
Te agradezco tu comentario :)
ResponderEliminarmuchas gracias sos la gran ayuda que necesitamos los principiantes como yo
ResponderEliminarTe agradezco tu comentario :)
ResponderEliminarMe funciona pero no el efecto deslizante y eso que lo he pegado como ponía, ademas en el mio si pone lo de footer-wrapper y demás...
ResponderEliminar¿que podrá ser?
Por cierto, he enseñado en blog en clase y todo dios quiere poner en práctica tus trucos, con la diferencia de que (aunque nivel básico) soy el informático de la clase y me llaman cada dos por tres.
Je, je, je. ¡Los martes y viernes vas a recibir al menos 100 visitas extra! ¡Enhorabuena!
Jajaja, entonces ya pronto tendrás que abrir tu blog de ayuda :P
ResponderEliminarEl problema está en que el efecto deslizante requiere de Scriptaculous y tú en tu blog usas JQuery, estas librerías son incompatibles, por lo que cuando se usan juntas una de las dos deja de funcionar.
¡Saludos!
Hola Potro.
ResponderEliminarInserté el truco y tengo una duda:
En la flecha "subir", al ejecutar, no recorre hasta arriba, queda "casi casi" en el top... ¿Que será?
Saludos.
Jpz.-
Eso es porque tienes más elementos arriba del outer-wrapper.
ResponderEliminarPara que suba hasta arriba cambia en el código de la flecha los outer-wrapper por top
Saludos.
Graciela Potro...
ResponderEliminarUn detallito!.
Jaja.
Saludos.
Jpz.-
Pequeño detallito nada más ;)
ResponderEliminarMuchas gracias Potro funcionan de maravilla
ResponderEliminarMe alegro que así sea :)
ResponderEliminarHola Potro, quise agregar "Boton de ir Arriba e ir Abajo" y al ver vista previa, salio este cartel:
ResponderEliminarNo se ha podido analizar su plantilla, porque no está bien formada. Asegúrese de que todos los elementos XML se han cerrado correctamente.
Mensaje de error de XML: The value of attribute "src" associated with an element type "null" must not contain the '<' character.
La verdad no se que hacer hice paso a paso y no sale.
Tendre que guardar igual la plantilla?
Espero tu respuesta,gracias.
Saludos.
Ese mensaje indica que no estás colocando bien la URL de la imagen y/o que al mismo tiempo hay una parte del código que no se está poniendo completa.
ResponderEliminarInténtalo de nuevo pero antes verifica en tu navegador que la URL de tu imagen funciona sin problemas.
Saludos.
Hola de nuevo El potro gracias por contestarme tan pronto en la pregunta anterior, ahora se me ha ocurrido añadir esto... pero vuelvo a fallar jejeje perdona mi ignorancia. Mi plantilla me imagino que también está modificada, y claro, no se que tengo que cambiar... he probado alguna de las opciones de los comentarios anteriores pero no me ha funcionado ninguna. Muchas gracias
ResponderEliminarHola La tahona,
ResponderEliminarEn el caso de tu plantilla en lugar de #outer-wrapper hay que cambiarlo por #page
Y para la flecha de abajo en lugar de #footer-wrapper hay que poner #footer
Saludos.
Tienes razón jejejej pero hay un problema cuando agrego Prototype y Scriptaculous los dos gadgets que tengo de google no aparecen, me refiero al de fiend conects y el de comentarios, ahora lo tengo quitado y si aparecen estos dos gadgets pero lógicamente no funciona el efecto. Gracias eres genial, un poquito ya hemos avanzado jejeje, gracias por tu tiempo.
ResponderEliminarCiertamente esas librerías no son compatibles con muchos gadgets de Google Friend Connect, pero puedes usar la forma simple, sin efecto.
ResponderEliminarHola, aun no encuentro la forma de habilitar el boton de subir video en la ventana de publicación de mi blogg, si alguien me puede ayudar...
ResponderEliminarHola he conseguido el el efecto pero tan solo "subir" con jquery en este sitio http://www.pazosblogger.com/2010/02/boton-ir-arriba-efecto-deslizante-con.html, pqrq los que nos nos va el Prototype y Scriptaculous eta otra librería consigue el efecto de igual manera o casi. Un saludo y gracias
ResponderEliminarBalery Sánchez, ya se te ha respondido en la primera entrada donde preguntaste, por favor hagamos el seguimiento de las preguntas en la entrada que corresponde.
ResponderEliminarLa tahona, el único inconveniente con esa librería es que no tiene la opción para poner el botón de ir abajo.
Ya me he dado cuenta, de que solo se puede en una dirección pero bueno, algo es algo jejeje muchas gracias, quizá se pueda modificar la librería si encuentro algo te aviso. Muchas gracias eres muy atento y de gran ayuda para torpes como yo jejej. Un saludo
ResponderEliminarHola Potro.A mí de momento no me ha funcionado de ninguna de las formas.En el efecto deslizante no funciona ninguna flecha.En el simple sólo la de arriba.Y si entro en personalizar se ven las dos flechas en la pantalla de elementos de página.Supongo que será por la plantilla que tengo o por la cantidad de personalizaciones que le estoy haciendo a mi blog.
ResponderEliminarhttp://ivanserranogarcia.blogspot.com/
Muchas gracias.Saludos.
Hola Ivan Serrano,
ResponderEliminarEso es porque tu plantilla no es original de Blogger y los elementos tienen otro nombre.
En el caso del botón de Arriba en lugar de #outer-wrapper debes poner .body-fauxcolumns
Y en el del botón de Abajo en lugar de #footer-wrapper debes poner .cap-right
Saludos.
Hola Potro.Gracias por la respuesta.No sé que pasa con ésas flechitas dichosas que no quieren formar parte de mi blog.He probado lo que me has dicho y un montón de cosas y nada...
ResponderEliminarAl clicar en las flechitas me sale una página que me dice:
ResponderEliminarNo se encuentra la página.
Lo sentimos, la página que estabas buscando en el blog Ivan Serrano no existe.
Saludos.
Me temía que no pudiera funcionarte. El problema es que los códigos de las flechas necesitan encontrar un contenedor que tenga un ID por ejemplo <div id='contenedor1'> de ese modo las flechas saben que tiene que ir hasta el ID llamado contenedor1
ResponderEliminarAhora, en tu plantilla ningún contenedor tiene IDs asignadas sino que en su lugar tienen clases (class) por ejemplo <div class='contenedor1'>
Por lo tanto no encuentra un ID a donde ir y es por eso que en tu plantilla no funciona.
Entonces me resigno a poner sólo las flechas de ir arriba.Más adelante si sale algo nuevo,lo volveré a intentar.Muchas gracias por tu atención y por la ayuda Potro.Me está siendo enormemente útil.
ResponderEliminarSaludos.
Hola, puse la flecha hacia arriba y bien, me gusta como queda. Despues de probar con las dos opciones tuve problemas con la flecha abajo, pero me gusta como queda con una sola,
ResponderEliminargracias por tus trucos y consejos!
Bien, pero si después quisieras las dos flechas me dices cuál blog es para que veamos cómo solucionarlo ;)
ResponderEliminarSaludos.
Cordial saludo Potro,soy nueva por aca en tu blog es muy interesante y practico me ha gustado bastante e intentado hacer lo de las flechas al pie de la letra pero solo aparecen las imagenes y al hacer click en ellas no hay efecto alguno podrias ayudarme no se si es por el tipo de plantilla que utilizo o alguna otra razón.
ResponderEliminarDe antemano agradezco tu colaboración y mira esta es la dirección de mi nuevo blog:
http://rainbowtyr.blogspot.com
Hola Rainbowtyr,
ResponderEliminarBienvenida a Ciudad Blogger!
En efecto es por tu plantilla. Veo que el de Ir abajo sí funciona, el único que no es el de Ir arriba. Para esa fleca el lugar de poner #outer-wrapper debes poner #wrapper
Con eso funcionará.
Saludos.
Hola Potro,
ResponderEliminarEstoy muy agradecida con vos, pues efectivamente funciono, muchas gracias por esta pronta respuesta y excelente solución; bueno estaré ojeando más acerca de este maravilloso blog que me parece excelente, muy útil y optimo el manejo que vos le brindas la rapidez y efectividad de tus respuestas. Gracias!
Saludos!!!
Te agradezco tus amables comentarios :)
ResponderEliminarEste comentario ha sido eliminado por el autor.
ResponderEliminarMuy bueno, leí hace unos días los mandamientos del blogger, en mi caso le voy a agregar uno, leer los comentarios antes de preguntar algo, también tuve que cambiar en la flecha de abajo, #footer-wrapper y dejar solo #footer.
ResponderEliminarMuchas gracias
Definitivamente leer los comentarios puede solucionarnos el problema :D
ResponderEliminarEncontre una pagina donde dicen como aplicar el efecto deslizante con JQuery, por si quieren hecharle un vistazo:
ResponderEliminarhttp://elbalcondejaime.blogspot.com/2010/02/volver-arriba-con-efecto-deslizante.html
Hola. He intentado poner la flecha deslizante en mi blog pero la de ir abajo me da error. He copiado todo en donde se requeria. ¿Qué hago mal? ¿Podeis ayudarme? Gracias.
ResponderEliminartagmander, por favor no hagas SPAM, sólo deja enlaces cuando alguien lo solicite.
ResponderEliminar^(.)^ You me and a cup of tea ^(.)^, posiblemente estás eliminando un caracter sin darte cuenta o está faltando una parte del código, en el mensaje de error debe especificar cuál es el problema.
Hola, encontre una solucion para el conflicto que tiene JQuery con otras librerias como scriptacoluos y asi poder usar los efectos sin tanto conflicto. JQuery tiene una funcionalidad la cual es noConflict()que tiene diferentes usos.
ResponderEliminarSi quieren saber como usar esa funcion de JQuery busquen en google, porque luego me llaman la atencion por poner los enlaces.
Yo la he usado y no he tenido éxito, pregunté a unos amigos si a ellos les funcionaba y tampoco tuvieron éxito :(
ResponderEliminarHola de nuevo. Lo que hago es cortar y pegar el código, lo único que copio es la url de la flechita. Y no me sale mensaje de error. Aún asi muchas gracias por responder. Seguiré investigando.
ResponderEliminarPotro es que hay que sustituir en el codigo js del efecto que estemos usando el simbolo de $ por alguna otra variable, por ejemplo haciendolo asi:
ResponderEliminarvar J = jQuery.noConflict();
Y en el resto del codigo del js usado para tal efecto lo cambiariamos por J, listo y funcionara.
Yo tube problemas con el efecto Slide de Posts(JQuery) y Mostrar mas de un SiteMap(Scriptacolous) que tenia en uno de mis blogs, funcionaba nada mas el Slide pero el mostrar mas del SiteMap no, y ya con lo que hice quedo listo, solucionado.
Nos vemos, espero que te sea de utilidad
Hola de nuevo ^(.)^ You me and a cup of tea ^(.)^
ResponderEliminarComo habías dicho que te daba error supuse que Blogger no interpretaba los códigos.
En el caso de tu plantilla debes cambiar en el código de la flecha de Ir abajo las dos veces que dice footer-wrapper por footer
Con eso ya funcionará.
Saludos.
Hola tagmander,
ResponderEliminarAsí es como lo hice pero sin resultados o.O
Supongo que tendré que intentarlo de nuevo pero ya será otro día.
¡Qué bien! sí señor, ahora funciona perfectamente. Gracias miles Potro. Seguiré muy de cerca tus trucos.
ResponderEliminarSalu2
disculpa, tengo un problema con las funciones de google. no me sale el efecto al hacer click en la flecha que puse en mi blog y google chrome me dice algo como: Uncaught TypeError: Cannot call method 'cumulativeOffset' of null en el archivo effects.js.
ResponderEliminar¿puedes ayudarme?
PD: esta en elblogdeyass[punto]blogspot[punto]com
Si usas el efecto deslizante tienes que poner el código que se menciona antes de /head
ResponderEliminarhola amigo ya esta todo ok, solo que la flecha aparece con fondo
ResponderEliminarla flecha esta en png con transparencia
http://1.bp.blogspot.com/_qgZA1ny_dAs/S0QFhg9IWII/AAAAAAAADg8/i2hHjcVDgE4/s200/arrow2a.png
potro, el problema era que mi plantilla no tenia los elementos outer-wrapper ni footer-wrapper... tuve que ponerle otros destinos. Gracias por el codigo te quedo muy bueno.
ResponderEliminarWallMix, la imagen está bien, debe ser otro problema.
ResponderEliminarYaGrEoR, así es, los nombres de esos elementos son los nombres estándar para plantillas de Blogger, las que no son de Blogger suelen tener otros nombres, pero hiciste lo correcto al cambiar el nombre de destino ;)
Hola. He cambiado la plantilla por una de las que ahora aparecen con la nueva función de plantillas de blogger, y ahora no me funciona ni el menú deslizante ni las flechas arriba y abajo (con la anterior funcionaban ambas cosas). No sé si es que no pongo en el lugar los códigos. Me puedes ayudar? Saludos. http://historiaenpresent.blogspot.com
ResponderEliminarHola Empar,
ResponderEliminarEso es porque las nuevas plantillas no tienen un ID que los distinga.
Para que funcione de nuevo busca esta etiqueta:
<div class='body-fauxcolumns'>
Y remplazala por esta:
<div id='outer-wrapper' class='body-fauxcolumns'>
Luego busca esta otra:
<div class='cap-right'>
Y cámbiala por esta:
<div id='outer-wrapper' class='cap-right'>
Saludos.
Perdón, la última debes cambiarla por esta otra:
ResponderEliminar<div id='footer-wrapper' class='cap-right'>
Gracias. Ahora intentaré hacerlo. Saludos
ResponderEliminarHola de nuevo. Ahora funciona el menú pero no hay espacio para las pestañas que se despliegan. No sé tiene solución; y funciona sóla la flecha de subir (aunque sin deslizante, pero no es imprescincible), pero no la de bajar. Si hay solución, ya me lo dices, no quiero molestar más. Gracias.
ResponderEliminarEntonces deshaz el cambio del último que te dije y mejor busca esta etiqueta:
ResponderEliminar<div class='content-cap-bottom cap-bottom'>
Y cámbiala por esta otra:
<div id='footer-wrapper' class='content-cap-bottom cap-bottom'>
El efecto deslizante no funciona porque has agregado el menú y ese usa jQuery la cual no es compatible con el script que hace que la flecha tenga el efecto deslizante.
Saludos.
Gracias, ya funcionan ambas flechas. Saludos
ResponderEliminarhola no puedo crear las flechas de arriba hacia abajo pues me habre otra ventana al dar click en la flecha el blog es:
ResponderEliminarhttp://calidad-senacdae.blogspot.com/
No veo que tengas puestas las flechas.
ResponderEliminarhola soy nueva en esta web esta buena pero nunca encuentro donde se ponen las plantillas seria un poco mas facil para otros principiantes como yo gracias
ResponderEliminarah y me descargue la plantilla pop star pero me decia q tenia un error
ResponderEliminarHola TEEN ANGELS FANS CLUB,
ResponderEliminarBienvenida a Ciudad Blogger.
Para saber cómo cambiar la plantilla del blog mira esta entrada.
La platilla que descargaste está comprimida en un archivo .RAR así que para poder usarla necesitas primero descomprimir el archivo y extraer el archivo con extensión XML que se encuentra en el archivo que descargaste, ese es el que necesitas para cambiar de plantilla como se explica en la entrada que te he mencionado.
Saludos.
Gracias Ptro... me quedó joyaaaaaaaaaaaaa. Un abrazo
ResponderEliminarPotro, date una vueltita por mi blog... la flecha de ir abajo no llega bien abajo. Se podrá arregalar?
ResponderEliminarPodrías poner antes de <!-- end outer-wrapper --> esto:
ResponderEliminar<div id='footer-wrapper2'></div>
Y en el código de la flecha de abajo cambia #footer-wrapper por #footer-wrapper2
Hola Potro... sigue todo igual. No llega hasta abajo de todo.
ResponderEliminarhola como va?? nio me andan los botones con el deslizante... tenia el de arriba solo y andaba despues puse el de abajo no andaba y cambie por un codigo que sugeriste a uno de los usuarios y anduvo... despues me encapriche y quise poner el deslizante y ahi dejo de andar todo y no hubo codigo que lo solucione... como hago?gracias
ResponderEliminarHola German,
ResponderEliminarRecuerda que la palabra footer-wrapper2 se pone dos veces en el código, en una va así #footer-wrapper2 y en la otra va footer-wrapper2
Prueba de nuevo con eso, sino entonces vemos otro modo.
Saludos.
Hola Cristian Soriano,
ResponderEliminarEn las plantillas nuevas de Blogger es todo muy diferente, de inicio no sé si con el efecto deslizante funcione ahí pues muchos scripts no funcionan en esas plantillas, pero podemos intentarlo, primero busca esta línea:
<div class='body-fauxcolumns'>
Y cámbiala por esta otra:
<div id='outer-wrapper' class='body-fauxcolumns'>
Luego busca esta línea:
<div class='content-cap-bottom cap-bottom'>
Y cámbiala por esta:
<div id='footer-wrapper' class='content-cap-bottom cap-bottom'>
Luego pon los códigos que se explican en esta entrada tal y como están.
Saludos.
Gracias Potro, ahora llega hasta el final pero sin el efecto deslizante.
ResponderEliminarCreo que no me entendiste, el código de la flecha Ir Abajo debe ir así:
ResponderEliminar<a href='#footer-wrapper2' onclick='new Effect.ScrollTo("footer-wrapper2",{offset:-140}); return false'><img border='0' src='URL de la imagen' style='position:fixed; bottom:0; right:0;' title='Ir abajo'/></a>
Además, veo que debajo de esta línea:
<!-- end content-wrapper -->
Tienes esta:
<div id='footer-wrapper2'>
Ese ID debes cambiarlo por cualquier otro porque ya más abajo agregaste un contenedor con el mismo ID y te puede dar problemas más adelante.
Saludos.
gracias... quedó espectacular. Un abrazo
ResponderEliminarahi esta maestro mil gracias sos un groso!
ResponderEliminarQué bueno que ya les quedó bien y que está funcionando perfecto ;)
ResponderEliminarEste comentario ha sido eliminado por un administrador del blog.
ResponderEliminar