Revista Blog

Botón para subir arriba: Sube Suavemente

Publicado el 26 febrero 2015 por Lireth
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!


Botón para subir arriba: Sube Suavemente
¡Gracias por suscribirte!

Volver a la Portada de Logo Paperblog