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

Flechas Ir arriba - Ir abajo | Charkleons.com

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

<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="http://4.bp.blogspot.com/-iZzQdyRS-YU/UJAwmeuYZzI/AAAAAAAADaE/1axsYqCv7Fs/s320/FlechaArriba2Charkleons.png" onmouseover="this.src='http://1.bp.blogspot.com/-o26f2Nkdp40/UIl2i3jiynI/AAAAAAAAASg/mmpe0hw6REM/s320/ArribaCharkleons.png';" onmouseout="this.src='http://4.bp.blogspot.com/-iZzQdyRS-YU/UJAwmeuYZzI/AAAAAAAADaE/1axsYqCv7Fs/s320/FlechaArriba2Charkleons.png';" /></a></div>

Código 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

<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.

Si solo desean que las flechas se visualicen en las entradas y no en la página principal tendrán que agregarle el código condicional a los códigos de Ir arriba e Ir abajo. En este tema (clic aquí) está la guía y un videotutorial para que conozcan el procedimiento.

Eso sería todo, si quieren las misma flechas que se usan en Charkleons.com 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.

Espero que esta información les sea muy útil.

Gracias.

 Cómo agregar las flechas para subir y bajar en una página, código para ir arriba e ir abajo, flechas subir y bajar con gadgets html, flechas para ir arriba - ir abajo blogger,