JMiur [E]

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

28 comentarios:

Unknown  

Grande jMiur!, si a mi tb me tiene harto el IE6, pero q se le va hacer, el 10% de todas mis visitas son en IE& :(

Responder
Paula Lago  

Justamente estoy desde ayer luchando con algo así no porque no supiera como ponerlo sino porque cualquier imagen que agregaba me salía con un fondo blanco y yo quería la imagen en silueta. Edité 28 millones de imágenes con fondo trasparente pero me sigue apareciendo un feísimo cuadrado como fondo de la imagen:s. Me pruebo esto que decís a ver qué tal anda. Gracias!!!:)

Responder
JMiur  

Erwin Salas: Es una cifra muy baja y sólo seguirá bajando si se la deja de tener en cuenta. Mi criterio es simple, cada cual puede usar las herramientas que quiera o que le resulten más cómodas, lo que no puede hacer es obligar a los demás a adptarse a sus decisiones y pretender clavar un clavo con una sierra :D

Pabela: Prueba y cualquier cosa me avisas.

Responder
MamaNunes  

Gracias maestro. Ser citada por usted no tiene precio! (Esta es una expresión brasileña que define un sentido de gratitud)
Muchas gracias:)

Responder
Paula Lago  

JMiur, feliz! sí resultó en el blog de pruebas asique ahora me dispondré a ponerlo en el mío. Muchísimas gracias!:D

Responder
PeterX  

Muchas gracias amigo, he encontrado cosas muy buenas en tu pagina y esta es una mas.
Saludos y gracias again.

Responder
JMiur  

MamaNunes:
No exagere :$ Buen tutorial, me gustó :D

Suerte, Pabela :D

Responder
Susy  

Me parece verdaderamente interesante y queda genial, voy a mi blog de pruebas!!!

Un abrazo JMiur.

Responder
Amador López Criado  

Otra vez gracias maestro. Aunque la idea ya la había leído en alguna parte, al ver imagen me has resuelto la duda que me rondaba desde hace unas semanas, de dónde colocar durante un tiempo una imagen que llamara la atención y no molestara.

Responder
JMiur  

Suerte, Susy.

Amador:La técnica no es novedosa pero verlo funcionando ayuda :D

Responder
Maite  

Me acabas de dar la idea para hacer una imagen temporal para unos días... y eso que ya tenía las flechas de arriba y abajo pero no había caído en la cuenta hasta que te he visto ésto!!!!
Me has despertado la neurona jajaja
Gracias :)

Responder
JMiur  

Claro, bien puede ponerse para promocionar un evento o algo especial ya que siempre queda a la vista. Buena idea :D

Responder
Jorge Mamani  

:D

Responder
Unknown  

nice blog for content and style
I do same for mine with dark one.
I love dark style

Responder
Andres Acosta  

Hola
Antes que nada te doy las gracias ya que he sacado muchas cosas para mi blog desde tu blog, estoy realmente muy agradecido por tu trabajo.
Tengo una pregunta con respecto a los botones flotantes: si yo quisiera que el boton flotante cambie de aspecto aleatoriamente cada vez que se ingresa al blog...
Te cuento un poco para que lo entiendas mejor, en mi blog tengo un hombrecillo (que yo mismo dibujé) que es el boton flotante y me gustaria que cada vez que alguien entre al blog lo reciba un personaje distinto, se entiende?
Se podria hacer eso? Como seria el codigo?
Un saludo y gracias ;)

Responder
Andres Acosta  

Perdon que escriba de nuevo, pero me olvide de pasarte la direccion de mi blog asi veias de que estoy hablando.
http://www.blogdecaricaturas.com.ar
(un hombrecito que esta abajo a la derecha)

Responder
JMiur  

Entiendo. Para eso, necesitarias un script que cargara las dierentes imágenes. Por ejemplo, si la imagen tuviera un ID para identificarla:

<img id='aleatorio' src='URL_imagen0'/>

una forma seria usar algo parecido a esto:

<script type="text/javascript">
//<![CDATA[
onload=function() {
var imagen=new Array();
// lista de imágenes a utilizar numeradas a partir del cero y en forma consecutiva
imagen[0]="URL_imagen0";
imagen[1]="URL_imagen1";
imagen[2]="URL_imagen2";
// ....... todas las que se quieran
imagen[7]="URL_imagen7";
var alea=Math.round(Math.random()*CANTIDAD); // donde CANTIDAD = último número de orden
document.getElementById("aleatorio").src = imagen[alea];
}
//]]>
</script>

Responder
balam  

muy buena la explicación, en el caso de que quiera colocar un reproductor de musica/radio me imagino no es la misma técnica, o existe en tu blog ya una explicación como hacer el trabajo, en realidad lo que necesito es; un reproductor flotante, ubicación- en la parte inferior-centro del blog asi como tienes el ejemplo el caso ahora esque es un repro, gracias desde ya!

Responder
JMiur  

En teoría, es exactamente lo mismo. En lugar de colocar un enlace con una imagen dentro del DIV flotante, colcoas el código HTML del reproductor SWF.

Responder
:D  

eres el maestro gracias

Responder
Anónimo  

hay una parte en donde me pierdo. a que te refieres con fijar el div?
tengo que copiar el div mismo que pusiste arriba en ese lugar despues de fixed; ?

JMiur  

EL DIV lo colocas al final de la plantilla.

Lo que lo fija en una posición son las propiedades de estilo (position:fixed); esas reglas de estilo se agregan junto con todas las demás, entre <b:skin> y </b:skin>

Responder
wesker  

gracias.
LO usé en iexplorer 9, firefox 16.x e iron 22.x
pero habia un problema con iexplorer, es que no aparecia, le modifique un poco:

#imagenFlotante {
bottom:40px;
right:10px;
position: absolute;
}
#imagenFlotante a img { border: none; }

y listo, aparece en las posiciones indicadas, por lo menos no tube problemas en los 3 exploradores que uso.

gracias por compartir el codigo

Responder
Miguel  

En internet explorer 7 se me deforma la web entera shur

no hay algun otro modo de poner mi boton flotande te facebook

quizas quitando el rollo del css y añadiendole parametros ? hechameun

cable porfa


a href="#" onclick="window.open('face.php','window','width=210,height=258')"><img src="http://l2prelude.ucoz.com/l2topzone2.png"


mi web es Lineage2c1.com

JMiur  

Simplemente, actualiza tu navegador y deja de usar uno que es obsoleto.

Responder
zamora  

Excelente, gracias por el codigo

Responder
Sergio Ravello C.  

Una consulta , quisiera agregar un boton flotanto a mi blog , pero que este boton abra una el enlace en una ventana pequeña y no se vea toda la parte blanca de esto http://zer0asc.wix.com/chat , eso se podria hacer ?

Responder
Sergio Ravello C.  

Y aparte d eso quiero crear mas de un boton flotante :) , gracias por su tiempo

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR