Este efecto no es el ultimo ni el primero por lo que en algunos blog ya lo comparten de diferentes formas pero este codigo en especial a mi me gusto y pense que algunas personas pues les puede servir para su sitio el cual lo pueden ver en en el lado derecho de este blog funcionando,este efecto deslizante es muy sencillo y facíl de implementar y se obtiene con javascript,al pasar el mouse por encima de la flecha esta se deslizara hacia el lugar indicado a una velocidad la cual pueden controlar por ustedes mismos al momento de colocar el codigo.
Para colocarlo en nuestro blog simplemente lo van añadir en un gadget para eso nos dirigimmos a diseño >>> añadir un gadget >>> HTML/Javascript y colocamos el siguiente codigo:
<script language="JavaScript">
function abajo() {
window.scrollBy(0,30); // velocidad abajo mas es mas rapido
scrolldelay = setTimeout('abajo()',80); // tiempo
}
function subir() {
window.scrollBy(0,-30); // velocidad subir mas es mas rapido
scrolldelay = setTimeout('subir()',80); // tiempo
}
function stopScroll() {
clearTimeout(scrolldelay);
}
</script>
<a style="display:scroll;position:fixed;bottom:150px;right:0px;" onmouseover="abajo()" onmouseout="stopScroll()" href="" title="Ir Abajo"><img src="http://dl.dropbox.com/u/25944020/flecha%20abajo.png
"/></a>
<a style="display:scroll;position:fixed;
bottom:180px;right:0px;" onmouseover="subir()" onmouseout="stopScroll()" href="" title="Ir Arriba"><img src="http://dl.dropbox.com/u/25944020/flecha%20arriba.png"/></a>
la velocida con la cual quieren que esta se deslice al poner el mouse mientras mas numeros mas rapido se desliza.
Lo que esta en color naranja es la distancia de arriba y abajo en mi caso lo tengo como esta en el codigo
Lo que esta en color verde es la distancia de la derecha esta en 0 lo pueden cambiar a gusto de ustedes
Lo que esta en color rojo es el titulo lo pueden cambiar si quieren
Lo que esta en color amarillo es la url de la imagen la cual pueden remplazar por otra de su agrado
El codigo esta puesto para la derecha si lo quieren a la isquierda solo donde dice right lo remplazan por left.
Una ves puesto el codigo y hecho los cambios correspondientes le dan a guardar y se dirigen a la pagina y ya van a tener sus botones deslizantes funcionando.
:)
:(
;)
:D
;;-)
:-/
:-O
X(
B-)
#:-S
:((
:))
=))
~X(
:-t
8-
=P~
#-o
=D7
:-SS
:-q
:-bd
Este comentario ha sido eliminado por el autor.
ResponderEliminarBuenos días, Gracias por tu aporte, lo que tengo un problema y es que el diseño de mi pagina web es un fondo claro y se ve un borde negro y la verdad no queda bien, te rogaría que me explicara que tendría que hacer para quitar dicho borde.
ResponderEliminarMuchas gracias de antemano
Alvaro
Hola alvaro,visite tu sitio que por cierto lo tienes muy bien implementado todo,el borde negro es una imagen si le das click derecho encima de el borde te va a aparecer una raya vertical y arriba en la url veras la direccion de la imagen esa buscala en la plantilla una ves la encuentres la eliminas y se desaparecera el borde recuerda siempre guardar una copia de la plantilla por si algo sale mal.saludos
EliminarMuchas gracias Jorge, la verdad que la prontitud de tu contestación es increíble, lo probare a ver si puedo ya que te comento que soy muy torpe para estos temas, por cierto tu pagina es de lo poco bueno que he encontrado , todo muy claro y muy bien explicado, muchas gracias
ResponderEliminarAlvaro
No hay de que Alvaro aquí estamos para ayudarnos, suerte.saludos
Eliminar