Hoy les mostrare como poner un boton que vaya hacia arriba o hacia abajo
lo primero es crear un elemento "div" y despues darle el nombre que quieran por ejemplo
<div id="arriba">
</div>
el atributo ID sirve para darle un nombre a nuestro elemento.
Despues podemos llamarlo con una etiqueta "a" de esta manera:
<a href='#arriba' onclick='new Effect.ScrollTo("outer-wrapper",{offset:-140}); return false'>
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfyw7JY_iQTWfneHNu_atu9-Hj8bMU3xyBryHigJkvwc27uk3P6qVM9anftifCIST74wJvENklQwzZg5O7_t3xe4UZFqXnKLjh7fMiqR8skwsi9qFmQ2mhlriKvRlamoRCvJbzYM1sVAA/s200/arrow1a.png' style='position:fixed; top:0; right:0;' title='Ir arriba'/></a>
Ahora si queremos que el boton vaya hacia abajo tenemos que poner el elemento abajo del footer
de nuestra web o blog pero si queremos que vaya hacia arriba entonces lo ponemos en el head de nuestra web o blog
Sin embargo para los blogs de blogger es mas facil ya que podemos usar el elemento outer-wrapper
y asi vamos hacia arriba y para ir hacia abajo usamos footer
Ejemplos para blogger:
Hacia arriba:
<a href='#outer-wrapper' onclick='new Effect.ScrollTo("outer-wrapper",{offset:-140}); return false'>
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfyw7JY_iQTWfneHNu_atu9-Hj8bMU3xyBryHigJkvwc27uk3P6qVM9anftifCIST74wJvENklQwzZg5O7_t3xe4UZFqXnKLjh7fMiqR8skwsi9qFmQ2mhlriKvRlamoRCvJbzYM1sVAA/s200/arrow1a.png' style='position:fixed; top:0; right:0;' title='Ir arriba'/></a>
Hacia abajo:
<a href='#footer' onclick='new Effect.ScrollTo("outer-wrapper",{offset:-140}); return false'>
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfyw7JY_iQTWfneHNu_atu9-Hj8bMU3xyBryHigJkvwc27uk3P6qVM9anftifCIST74wJvENklQwzZg5O7_t3xe4UZFqXnKLjh7fMiqR8skwsi9qFmQ2mhlriKvRlamoRCvJbzYM1sVAA/s200/arrow1a.png' style='position:fixed; top:0; right:0;' title='Ir arriba'/></a>
Quiero aclarar que los elementos outer-wrapper y footer no estan en todas las platillas pero en las platillas Minima o Minima-Dark si estan estos elementos asi que si tienes una plantilla modificada es mejor que crees tu propio elemento.
Pueden ver como funciona aqui.
Eso es todo espero les sirva, cualquier duda o comentario ya saben como hacerlo.
Post dedicado a:·•º•·Yuri·•º•·
martes, 20 de julio de 2010
Como poner un boton que vaya hacia arriba
Suscribirse a:
Enviar comentarios (Atom)
4 Comentarios:
mm pero en donde tenemos q crear
el elemento div
ya no entendi..!
Hola YANIN!!!
puedes crear el elemento div en la parte que lo necesites siempre y cuando sea dentro de body o dentro del footer del blog (blogger) por ejemplo yo tengo uno en el footer del blog se llama copyright si le das clic al boton que dice copyright te manda hacia abajo.
Espero haber resuelto tu duda.
Gracias por tu visita!
Hasta luego!
buen articulo, la verdad me sirvio para mi blog, aunque tenga una duda...por que al poner un boton de hacia arriva & otro de hacia abajo aparece solo el de hacia arriva & no funciona?
Hola Brahian, no he probado poner dos botones al mismo tiempo, sin embargo probablemente si estas usando el codigo que publico asegurate que estes usando la platilla minima dark o cualquiera de las minima ya que si usas otra tendras que saber cual es el nombre del footer de la pagina o blog y el nombre del head o cabecera, pero si tu estas creando los nombres entonces asegurate que tu codigo este correctamente escrito.
Gracias por tu visita!
Saludos!
Publicar un comentario
¡Hola!
Gracias por visitar mi blog.
Espero y no sea tu ultima visita.
Deja un comentario, sugerencia, observacion o lo que quieras.
P.D.:Ya no se pueden realizar comentarios anonimos desde que aqui por razones de seguridad, pero puedes utilizar get-box para dejar un comentario con tu nombre y tu mail o url o tambien puedes dar clic en el boton Contacto.