Agregar un botón flotante

Lo que nos explica Mamanunes es cómo colocar un botón de Twitter flotante. Una imagen con un enlace que permanece en una posición fija de nuestro sitio, sin importar si el visitante hace scroll. Por supuesto, lo mismo puede hacerse con cualquier otro botón.

Click para ver el ejemplo.

La imagen y el enlace los ponemos justo al final de la plantilla, inmediatamente antes de </body>, en un DIV al que le colocamos un ID exclusivo que es con lo que luego, lo controlaremos utilizando CSS:

<div id='imagenFlotante'>
  <a href='http://twitter.com/USUARIO'>
    <img src='URL_imagen'/>
  </a>
</div>

Ahí, sólo necesitamos colocar nuestro nombre de usuario y la imagen a utilizar. Por supuesto, si queremos aplicarlo a otras cosas, bastará poner otro enlace; siempre, dentro del DIV.

Ahora, faltaría el CSS que ponemos antes de </b:skin> y que es la clave de todo:

#imagenFlotante {
  bottom:10px;
  right:0px;
  position: fixed;
  _position:absolute;
  clip:inherit;
  _top:expression(document.documentElement.scrollTop+document.documentElement.clientHeight-this.clientHeight);
  _right:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth);
}
#imagenFlotante a img { border: none; }

Como se ve, el código parece algo extraño porque está pensado para que funcione en cualquier navegador, incluidos las versiones más viejas de Internet Explorer (menores de 7); en lo personal, prefiero olvidarme de esas compatibilidades extremas y declarar a IE6 muerto y enterrado así que eso podría simplificarse de este modo:

#imagenFlotante {
  bottom:10px;
  right:0px;
  position: fixed;
}
#imagenFlotante a img { border: none; }

Donde el valor fixed "fija" el DIV y su contenido.

La posición del mismo la establecemos con las propiedades top, right, bottom y left.

Por supuesto, esas son las propiedades elementales y pude agregarse cualquier otra.

REFERENCIAS:Mamanunes