En esta entrada colocaremos una flecha que nos permita volver al inicio o la parte superior del blog.


Obtendremos el mismo resultado que al realizar el truco "flecha para volver arriba" pero esta vez, con un efecto deslizante, prácticamente igual pero sin necesidad de alojar scripts externos en la plantilla, con lo que obtendremos una instalación simple.

Puedes comprobar el resultado pulsando la flecha en la esquina inferior izquierda de cualquier entrada o en el footer (parte inferior del sitio)de este blog.
Ir a Edición de HTML:

Diseño► Edición de HTML ►Presionar Ctrl + F y Buscar lo siguiente:►
Busca la etiqueta </head> y arriba de esta inserta el siguiente script:

<!-- Volver arriba deslizante -->
<script language='javascript' type='text/javascript'>
var bl_subirdesliz;
function bl_clicsubir() {
if (document.body.scrollTop != 0 || document.documentElement.scrollTop != 0) {
window.scrollBy(0, -40);
bl_subirdesliz = setTimeout(&#39;bl_clicsubir()&#39;, 8);
}
else clearTimeout(t);
}
</script>
<!-- Fin volver arriba deslizante -->

Ahora, justo encima de la etiqueta </body> inserta este código:

<a href='#' onclick='bl_clicsubir();return false' style='display:scroll;position:fixed;bottom:5px;right:5px;' title='ir arriba'><img src='URL la imagen'/></a>

Obteniendo la flecha en la esquina inferior derecha. Para cambiar su posición:

• Flecha en la esquina superior derecha:

Cambia el atributo bottom por top.

• Flecha en la esquina inferior izquierda:

Cambia el atributo right por left.

• Flecha en la esquina superior izquierda:

Cambia el atributo right por left así como bottom por top.


Puedes sustituir la imagen por cualquier otra, reemplazando la la línea en color gris con la URL de tu icono.

Si en lugar de una imagen prefieres mostrar una palabra borra dicha línea gris y escribe el texto.


Para mostrar la flecha en el pie de tus post, introduciremos el código antes de una de:

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

Sino la encuentras busca

<div class='post-footer-line post-footer-line-2'>

Antepone esta otra línea...

<a href='#' onclick='bl_clicsubir();return false' style='float: left' title='ir arriba'><img src='URL de la imagen'/></a>