Volver arriba en cada post y en pie de página

Facilitará a nuestras vistas el poder "volver arriba", es decir, ir al inicio de la página desde cada post con un simple click, sin tener que andar usando la barra de scroll cuando terminan de leer un post.
Buscamos en el html de la plantilla esta parte, que es donde yo creo quedará mejor:

<p class='post-footer-line post-footer-line-1'/>

Y justo encima, agregamos esta línea:

<a href='#' title='Volver Arriba'>Ir arriba</a>

Justo antes de: <p class='post-footer-line post-footer-line-3'/> también quedaría bien, la colocación va en función de los gustos de cada uno.

También podemos usar una imagen, un icono pequeño sería lo adecuado, solo hemos de sustituir el texto "Ir arriba" por la url de nuestro icono: <img src="url del icono"/>

Este es el código que yo estoy estaba usando, con la url de imagen de la casita incluida, por si queréis usarlo tal cual lo veis en El Escaparate, es decir colocado a la derecha del pie de la entrada. Lo he colocado justo después de: <div class='post-footer'>

Código
<!--Casita ir arriba -->
<a href='#' title='VOLVER ARRIBA'><img align='right' src='http://img66.imageshack.us/img66/1698/houserq1.png'/></a>

Nota
Lo que pongais en "title" es lo que se leerá al poner el cursor sobre el icono, en un pequeño cartel emergente.
La primera línea del código <!--Casita ir arriba --> la he añadido para una vez colocado en la plantilla poder localizarlo fácilmente si es necesario.

Volver Arriba al pie de página

Si queréis usar el icono al pie de la página además de en cada entrada o solo al pie del blog, colocamos este código en nuestra plantilla, casi al final de todo su código, antes de  </body>:

<a href="#" style="bottom: 0px; position: fixed; right: 0px;" title="Volver Arriba"><img src="Url_de_la_imagen"/></a>

0 comentarios:

Publicar un comentario