SERVICIOS - DISEÑO - FREEBIES - MEJORA TU BLOG -

26 feb. 2015

Botón para subir arriba: Sube Suavemente

El tutorial de hoy es súper sencillo, me lo han pedido varias personas y yo también quería enseñároslo, porque con estas chorraditas, nuestro blog cada día queda mejor.
 
Por ejemplo, si vamos al blog de baqui (en el mío también lo puse hace tiempo) cuando bajamos al pie de su blog y hacemos click en el botón para subir arriba, lo hace suavemente y no de un bote.
Pues el tutorial de hoy trata de eso, cómo hacer que nuestro botón para subir, suba de una manera suave.

Lo primerísimo es tener un botón para subir arriba, si no lo tenéis, aquí encontraréis el tutorial y aquí un montón de botoncitos gratis.

Una vez lo tenemos, vamos a nuestra plantilla.
Hacemos una copia de seguridad, como siempre. 
Click en editar HTML.
Hacemos click en el cuadro donde sale todo el código de nuestra plantilla.
Apretamos la tecla Control y la F a la vez, se nos abrirá una cajita de búsqueda.
Ahí pegamos esto:  
</body>
 
Una vez encontrado ENCIMA pegaremos esto:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'/>
<script>
   $(function () {
   $(&#39;.go-to-top&#39;).click(
function () {
   $(&#39;html,body&#39;).animate({
   scrollTop: 0
    }, 500);
   return false;
    });
    });
</script>

Guardamos todo, ahora, si pusisteis el Botón directamente en vuestra plantilla, tal como explico en mi tutorial, es decir vuestro botón NO ES UN GADGET, buscaremos en la plantilla lo siguiente:
 </footer>
Y justo encima deberíais encontrar este código:

<a href='#' style='display:scroll; position:fixed; bottom:0px; right:1px;' title='subir arriba'>
    <img src='URL_de_tu_Flechita'/>
  </a>

Bien pues donde os he marcado en rojo el  href='#' pues sustituís eso por esto: href=#wrap y añadís esto también class='go-to-top' después de donde dice: title='subir arriba' ponedlo antes del >

Total el código de vuestro botón, al final os debería quedar así:
<a href='#wrap' style='display:scroll; position:fixed; bottom:0px; right:1px;' title='subir arriba' class='go-to-top'>
    <img src='URL_de_tu_Flechita'/>
  </a>

Muy fácil.
Si vuestro botón es un gadget, lo que haréis es ir a Diseño, Editar el gadget de vuestro botón y hacer exactamente lo mismo, cambiar estas dos cosas en el código y ya está.
Pero en la plantilla tenéis que poner igualmente el primer código que os he puesto.

Espero que os sirva, os guste y que le deis a subir con mucha suavidad!!!
Muah!



6 comentarios:

  1. Gracias. Encantada de que estes de nuevo por aquí. Petons.

    ResponderEliminar
  2. Dicho y hecho, un nuevo cambio gracias a la genial Lireth!!!
    Besotes y mil gracias guapa!!

    ResponderEliminar
  3. Como me alegra que estés de vuelta. Como siempre tus post son súper interesantes y útiles.
    Te agradezco el que hayas puesto de ejemplo mi blog, me ha hecho mucha ilusión. Poquito a poco lo voy mejorando, en gran medida a tus enseñanzas.
    Besotes

    ResponderEliminar
  4. Yo tengo el rápido y aunque de momento no lo voy a cambiar, me alegra que lo tengas aquí para cuando me canse.
    Gracias por todo.
    Un beso

    ResponderEliminar
  5. Genial! Muchas gracias por el tutorial!!
    Un saludo

    ResponderEliminar