martes, 20 de julio de 2010

Flecha o (Botón) para ir hacia arriba o hacia abajo

Colocar las flechas o indicar con un cartel para navegar mas rápido por la página del blog , sobre todo si tu post es extenso.


Este truco tiene dos partes.
Primera: se trata de colocar un 
script antes de </head> .
Vas a Diseño > HTML > y busca </head>. Recuerda que puedes usar Ctrl. + F para acelerar la búsqueda.

Justito antes de pegas este código.

<!-- Prototype y Scriptaculous-->
<script src='http://www.google.com/jsapi'/>
<script>
google.load("prototype","1.6.0.3");
google.load("scriptaculous", "1.8.2");
</script>
<!-- Prototype y Scriptaculous-->

Guarda el cambio.
Segunda parte: ahora vamos a las flechitas y la posición en tu blog. Debes buscar </body> . Vuelve a usar Ctr. + F. Justito antes pega este código:

<a href='#outer-wrapper' onclick='new Effect.ScrollTo("outer-wrapper",{offset:-140}); return false'><img border='0' src='URL de la imagen' style='position:fixed; top:0; right:0;' title='Arriba'/></a>

<a href='#footer-wrapper' onclick='new Effect.ScrollTo("footer-wrapper",{offset:-140}); return false'><img border='0' src='URL de la imagen' style='position:fixed; bottom:0; right:0;' title='Abajo'/></a>

Reemplaza donde dice URL de la imagen por la imagen que quieras usar. Puede ser una flecha, un cartelito, lo que desees.
Si quieres uno completo te lo dejo armado a continuación, así lo insertas y listo.

<a href='#outer-wrapper' onclick='new Effect.ScrollTo("outer-wrapper",{offset:-140}); return false'><img border='0' src='http://2.bp.blogspot.com/_qgZA1ny_dAs/S0QFsV1WD7I/AAAAAAAADhs/ZBKrnpzqBrk/s200/arrow8a.png' style='position:fixed; top:0; right:0;' title='Arriba'/></a>

<a href='#footer-wrapper' onclick='new Effect.ScrollTo("footer-wrapper",{offset:-140}); return false'><img border='0' src='http://4.bp.blogspot.com/_qgZA1ny_dAs/S0QKJ3oGf7I/AAAAAAAADis/m4YOx1C9N2g/s320/arrow8b.png' style='position:fixed; bottom:0; right:0;' title='Abajo'/></a>

Guarda los cambios.

Verás a la derecha de tu blog las imágenes, para subir y bajar por el blog con efecto deslizante. Les dejo una página con miles de íconos. Este es el enlace a las flechas (arrows).
http://icons.mysitemyway.com/free-icons-clipart-tagged/arrow/748/.
Espero les sea útil.Saludos y una excelente semana!

0 comentarios:

Publicar un comentario