viernes, 19 de marzo de 2010

Colocar Flechitas para subir o bajar en tu web o blog

Colocar las flechitas o indicar con un cartelito la posibilidad de navegar mas rápido por la página del blog es una buena decisión, 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 </head> pegas este código.


<!-- Prototype y Scriptaculous-->
<script src='http://www.google.com/jsapi'/>
<script>
google.load(&quot;prototype&quot;,&quot;1.6.0.3&quot;);
google.load(&quot;scriptaculous&quot;, &quot;1.8.2&quot;);
</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(&quot;outer-wrapper&quot;,{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(&quot;footer-wrapper&quot;,{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(&quot;outer-wrapper&quot;,{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(&quot;footer-wrapper&quot;,{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/.

0 comentarios:

 

Guia Para Torpes Copyright © 2009 Gadget Blog is Designed by Ipietoon Sponsored by Online Business Journal