Bienvenido a mi blog. Aquí encontrarás todas las cosas que he creado e ido aprendiendo con el tiempo, útiles para ti y tu sitio web.

Cómo poner Botón UP | efecto deslizante


OLI!!! ( ̄▽ ̄)ノ Este tutorial lo vi en varias platillas muy lindas y lo estuve buscando mucho (muchísimo ┰ω┰), por fin lo encontré y hoy quiero compartirlo con ustedes!

Ya todas conocemos el clásico BOTÓN UP. Que con darle clic aparece de inmediato en la cabecera.
La diferencia con este botón es que este botón se desliza por lo largo del blog hasta llegar a la cabecera.

Vale aquí voy con el paso a paso, pero antes.
Primera Parte
Si tienes en tu plantilla el jQuery, omite el sgte. paso, para saber si ya lo tienes usa Control+G y escribe jQuery. Y si no aparece en tu plantilla has lo sgte. ↓↓↓

PASO 1: Ve a PLANTILLA → Editar HTML. Usa  Control+F  (para buscar) y escribe </head>

PASO 2: Pega el stge. código antes de </head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script>
PASO 3: Guarda los cambios pero no salgas del Editor HTML.
Segunta Parte
Sgte. paso, AGREGAR EL SCRIP PARA EL EFECTO DESLIZANTE!

PASO 1: Sin cerra la ventana en la que estabas, haciendo uso del  Control+F  busca </body> ...Pega el sgte. código arriba de este y guarda, sin salir del editor.

Tercera Parte
Bien ahora agreguemos el botón UP↑

PASO 1:
 Aún sin cerra la misma ventana, busca ]]></b:skin> ...Y pega el sgte código arriba de este.
/* Botón Ir Arriba
----------------------------------------------- */
#IrArriba {
position: fixed;
bottom: 250px; /* DISTANCIA DE ABAJO */
right: 5px; /* DISTANCIA DE DERECHA */
}
#IrArriba span {
width: 60px; /* ANCHO DEL BOTÓN */
height: 60px; /* ALTO DEL BOTÓN */
display: block;
background: url(http://cort.as/Ly9b) no-repeat center center;
PASO 2: Por último clic en Vista previa, ahí verás el botón aparecer si bajas por tu blog. Guarda la plantilla y LISTO! Ahora tienes un botón Up con efecto deslizante que aparece y desaparece.

Personalizando y Modificando
  • Si gustas cambiar el Botón UP↑ por un diseño hecho por ti, sólo tienes que cambiar la URL en ROSADO (http://cort.as/Ly9b) por la URL de tu imagen.
  • Si cambiaste la imagen del botón por una tuya, deberás también modificar las proporciones del botón UP↑ ...para que pueda visualizarse completamente tú botón. Es decir deberás modificar ANCHO DEL BOTÓN y ALTO DEL BOTÓN.
  • Si quieres modificar la ubicación de tu botón, cambia bottom y/o right por top y/o left.
  • Su quieres modificar la distancia del botón, cambia DISTANCIA DE ABAJO y DISTANCIA DE DERECHA.
Y es sería todo por hoy, espero les haya gusta el tutorial. Los créditos del tuto para Ciudad blogger. Byesuuuu!

14 comentarios:

  1. Me gusto mucho esta tuto..quizas la ponga en el blog..

    ResponderEliminar
    Respuestas
    1. (>w0) si te lo recomiendo Dayis, es muy lindo el efecto del boton up, yo me pongo a jugar con eso XDDD

      Eliminar
  2. ke lindo yo ya tengo uno pero mas sencillo

    ResponderEliminar
    Respuestas
    1. si Candela-chan esta lindo (>w<) más que gustarme el efecto, me gusta el botón de pollito que puse (*0*) me enamoré de el kyaaaaaaaa

      Eliminar
  3. sí!! justo te iba a preguntar como lo hacías, GRACIAS POR LA TUTO! ^^

    ResponderEliminar
  4. Holitas!^-^ Te quería avisar que te he nominado en mi blog^^
    Es aquí!: http://de-todo-blends.blogspot.com.ar/2012/11/nominada3.html

    Besos!<3

    ResponderEliminar
  5. me gusto muxoo :3 lo pondre mañana creo xD ¡

    ResponderEliminar
  6. Kuma! *.* y como haces que esos monitos se muevan ._.
    Como el de UP de Ittoki-kun
    que clase de Magia negra es eso xD??

    Besos ♥

    ResponderEliminar
    Respuestas
    1. No es magia ...sólo es un gif animado xD

      Eliminar
  7. Muchas gracias, trate con muchos tutoriales y solo el tuyo me sirvio! :)

    Saludos :3

    ResponderEliminar
  8. hola esta super tu blog me encanta! una pregunta como o donde puedo conseguir un UP semejante al tuyo?

    ResponderEliminar

HOME STAFF AFILIATE FOLLOW CONTACT
HOME STAFF AFILIATE FOLLOW CONTACT
Copyright© Nemuri Kuma | Powered by Blogger.
Design n' Blogger template by Kuma.