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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5ngwvEBTIHO-y_2FzH4ci65KkFZwJqQ4QlQDWvMjsay_dVqJZ6QNbliC40AWGhAMmyXvNqz-Q42YA7BZwllGQFtgP3MQaUyf31XP7XQXB_VSbxdHyNru1zrkRevsktKKubnXuAro2JLY/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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtfj_tb6BzsoGp9WBjFpg0V03vJoJt6TB7mE2nRbcKKyQTuhpqfZDtlEh6qOzvxFo7yoAetdrujOxpJ2eBaa5Hxv6JZM-63lWrPxcwQ-R_HMEIEE6IhlY6BgJrovepzr68lTuX8sZaqJU/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