otro menú



Google Chrome | ZROX |
Esté sitio está optimizado
con Google Chrome

domingo, 18 de diciembre de 2011

Poner botón ir abajo e ir abajo.

Los botones arriba y abajo facilitan al usuario al desplazamiento sobre el contenido de la página, sobre todo esto es muy indispensable cuando en la página hay demasiadas entradas o cuando las entradas tienen muchos comentarios o demasiado texto. Ahora les explicare la manera de poner los botones arriba y abajo. 

Hasta el momento conocía manera pero en la web encontré una manera más sencilla de igual manera les pondré las dos maneras para que ustedes decidan cuál les agrada más. 

Entra en Diseño > Edición de HTML y antes de </body> pega lo siguiente:
Sin importar cuál forma utilicemos vamos a ver lo siguiente, si usamos la nueva plantilla de Blogger tenemos que hacer lo siguiente antes que nada: 

<div class='body-fauxcolumns'>
Y lo cambiaremos por lo siguiente:

<div id='outer-wrapper' class='body-fauxcolumns'>
Ahora buscaremos lo siguiente:

<div class='content-cap-bottom cap-bottom'>
y lo cambiaremos por esto:

<div id='footer-wrapper' class='content-cap-bottom cap-bottom'

FORMA QUE UTILIZÓ.
Lo primero que tienes que hacer antes de </head> pegamos el codigo siguiente: 
<!-- 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-->

Ahora antes de </body> pega lo siguiente:
<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; bottom:450px; right:0;' title='Ir 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:400px; right:0;' title='Ir abajo'/></a>

FORMA SENCILLA
Entra en Diseño > Edición de HTML y antes de </body> pega lo siguiente:
<a href='#'><img border='0' style='position:fixed; top:0; right:0;' src="URL de la imagen" title="Ir arriba" /></a>


<a href='#footer-wrapper'><img border='0' style='position:fixed; bottom:0; right:0;' src="URL de la imagen" title="Ir abajo" /></a>

En donde dice URL de la imagen colocamos la URL que tiene la imágen. 

0 comentarios:

Publicar un comentario

Gracias por dejar tu mensaje es muy importante para nosotros.