viernes, 19 de marzo de 2010
Colocar Flechitas para subir o bajar en tu web o blog
Author: Miki
| at : 3/19/2010 |
Category :
aplicaciones web,
blogs,
Blogsearch,
html,
javascript,
programación,
recursos web,
trucos
|
Suscribirse a:
Enviar comentarios (Atom)
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 </head> 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/AVvXsEh6JKaCx78wls1fO8FATI5DWEX9Agfohi4nkfAqdlmfQuLBYcH-AtPt9OrT-hAa-TPVz177e2mU7ce256OyPStsq8uiIUfvzwMd2DfywYg0qNjoDQbckxxpAFLlOlMPuLv3YWSn3aJNhoM/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/AVvXsEicfzXdXrLRSJe6IwE-idnvWWYd_wANHMTysGcHdyx9Dc-fbi3SMelmZJAV2WegVTBMbVM37aGTf_-2TYilrbQZnF_YedbM0ufTpdtK9nDCIi4SY4n0Xle2Ar6otOhyphenhyphen00xTGATxTnchi_o/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/.