Tutoriales para personalizar Blogger
  1. Blogger Tips

Colocar boton de Ir Arriba e Ir Abajo

Los botones de Ir Arriba e Ir Abajo son muy útiles en nuestra Web/Blog ya que facilita la navegación al usuario lector, si por ejemplo en una entrada hay demasiados comentarios o si en la parte de Inicio hay varios artículos.

En esta ocasión veremos una forma de colocar los botones, con un efecto deslizante:

Paso 1

Primero tenemos que inserta Scriptaculous en nuestro Blog para ello entramos a Plantilla > Edición de HTML y pegamos antes de </head> el siguiente código:


Paso 2 

Ahora antes de </body> pegamos este otro codigo:
NOTA:
href='#footer'  ->  Depende de la etiqueta si tiene class es .ejemplo o id es #ejemplo

Effect.ScrollTo(&quot;footer&quot;,{offset:-140})  ->  Solo va el nombre de la class o id sin llamarlos con su simbolo.

Ahora es importante que aprecies los textos de color rojo, ya que solo eso tenemos que modificar de acuerdo con nuestra plantilla.
Primero modificamos el boton de Arriba, cambiando los textos de color rojo de acuerdo con nuestra plantilla. Este boton tiene que tener la etiqueta que este al principio de todo nuestro blog.

Ahora modificaremos el boton de Abajo, al igual que el boton de Arriba cambiaremos los textos de color rojo por la etiqueta que este al final de todo nuestro blog.

Paso 3

Por ultimo colocaremos los estilos para darle forma a nuestros botones.
Ahora nos dirigimos al Diseñador de Plantillas de Blogger (Plantilla > Personalización) y entramos en Avanzado > Añadir CSS. Colocamos los siguientes estilos:
 Listo, ya tenemos nuestros botones para ir Arriba y Abajo rápidamente.

Resultado Final HoyGeek Demo
Otro ejemplo de Botones Arriba, Abajo PeruTve


¿Tienes alguna duda?