Cómo agregar las flechas de Ir Arriba e Ir abajo

 Agregar estas flechas al final de la página es algo muy fácil de hacer, los códigos que se comparten a continuación son HTML básico, si desean las flechas que desaparecen o aparecen busquen en google por: "ir arriba ir abajo blogger css".

Todo el procedimiento lo vamos a realizar a través de tres gadgets HTML-Javascript que se crearán en la parte de Diseño.

Primero las flechas, coloquen cada código en un gadget, y estos colóquenlos en la parte inferior derecha del diseño de sus plantillas (lógicamente el de Ir arriba iría sobre el de Ir abajo).

Código Ir Arriba

Codigo de ir arriba

<div class="separator" style="clear: both; text-align: center;"> <a style="display:scroll;position:fixed;bottom:58px;right:1px;" href="#" imageanchor="1" style="margin-left:1em; margin-right:1em"><img height="65" width="65" alt="Ir Arriba" title="Ir Arriba" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxlRVxjGyYEPQD0VYbiacGAouQoTpwa7auuVAaT94BPyUODtsVHmcH0DBgHq_5zkqnkyUjBnAUDO7ZheXVBP48l3pVFgDkNujCfmh_XMY0bFg3Pf649NNzFLuEEQk7uDA-z-o41k0ADemn/s320/FlechaArriba2Charkleons.png" onmouseover="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzGLuFGb6JJOlwF17cUCU9oVOINAVyuWPYRdygBxYxeGWUKgsdOis5_gxrBZjTpUii55LfRk9JS7QjEaicCK9gJlfolGxSiiUtkoEIymh2dueCcquNIO_riFSZ8QoToXhgC5bjwCXLXvrI/s320/ArribaCharkleons.png';" onmouseout="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxlRVxjGyYEPQD0VYbiacGAouQoTpwa7auuVAaT94BPyUODtsVHmcH0DBgHq_5zkqnkyUjBnAUDO7ZheXVBP48l3pVFgDkNujCfmh_XMY0bFg3Pf649NNzFLuEEQk7uDA-z-o41k0ADemn/s320/FlechaArriba2Charkleons.png';" /></a></div>

Código Ir Abajo

Coigo de ir abajo

<div class="separator" style="clear: both; text-align: center;"> <a style="display:scroll;position:fixed;bottom:10px;right:1px;" href="#abajo" imageanchor="1" style="margin-left:1em; margin-right:1em"><img height="65" width="65" alt="Ir Abajo" title="Ir Abajo" src="http://4.bp.blogspot.com/-GhlPZ_qQw6Q/U20xZteOTcI/AAAAAAAANOs/TOhbAWlTi4E/s1600/Abajo+Flecha+Azul.png" onmouseover="this.src='http://1.bp.blogspot.com/-a15wW6ToySs/U20xZrifsPI/AAAAAAAANOw/XJgXsy7Gj9M/s1600/Abajo+Flecha+Verde.png';" onmouseout="this.src='http://4.bp.blogspot.com/-GhlPZ_qQw6Q/U20xZteOTcI/AAAAAAAANOs/TOhbAWlTi4E/s1600/Abajo+Flecha+Azul.png';" /></a></div>

En el tercer gadget deben colocar lo que se llama un ancla en HTML que servirá para indicar a dónde se debe dirigir al visitante al hacer clic sobre la flecha que va hacia abajo. Este gadget lo pueden ubicar debajo del cuadro de "Entradas del blog", o en la parte final en el diseño del blog.

Código del ancla Ir Abajo

ejemplo Selección de texto en JavaScript

Codigo de anclar abajo

<a id='abajo'/></a>

Imagen de ejemplo

Ahora les comparto las partes que pueden editar:

En bottom se define la distancia desde la base o parte final de la página. Para el botón de Ir arriba está 58px y para el de Ir Abajo está 10px.

En right definen la distancia que tendrá la flecha desde la parte derecha de la página.

En azul está el enlace o url de la imagen que se visualizará al poner el puntero del mouse/ratón sobre la flecha. Las otras dos url o enlaces que están en cada código son para la flecha que se visualiza primero. Esta información es útil en el caso de que quieran personalizar las imágenes, les recomiendo que visiten las páginas recomendadas de Íconos, busquen las flechas por "Arrow", y recuerden que se descargan en formato .png

Como notarán los enlaces de redirección que usamos son href="#" para ir arriba y href="#abajo" para ir abajo.

Eso sería todo, si quieren las misma flechas que se usan en Tabooktron.es solo copien los códigos en los respectivos gadgets y listo. Si desean cambiar las imágenes solo cambian las url de las que ya están, y si quieren que solo se visualicen en las entradas agreguen el respectivo código condicional en la plantilla. Al ser imágenes y un código básico de HTML no se retrasará la carga de la página.

Pronto estaré poniendo mas paginas que les puedan servir de ayuda 

Comenta si te ha gustado la entrada y compártela con tus amigos