07 July 2012

Agregar "botones flotantes!

Aqui explicare como colocar un boton flotante como el que tengo para "follow me", esto lo he hecho en una plantilla clasica.
lo primero que necesitamos es diseñar nuestro boton, una vez terminado lo almacenaremos ya sea en photobucket, blogger u otros servidores, ahora el codigo:
<a href="URL DE LA PAGINA A LA CUAL TE DIRIGIRA"><img style="display: scroll; position: fixed; top:0px; left: 320px;"  src="URL DE TU IMAGEN" ></a></div>
este codigo es el mas sensillo, las propiedades que aqui vemos son:
href: url a la cual seras dirigido
style: propiedades de la imagen
position: posicion
top: la altura a la cual estara la imagen
en este caso podemos cambiarlo a bottom, si deseas que este debajo
left: a que distancia del lado izquierdo
esta propiedad tambien puede cambiar a right si lo queremos a la derecha
src: url de la imagen
Ahora si queremos que al pinchar se abra en una ventana emergente o Pop-up agremaremos el siguiente codigo a href
<a href="http://www.blogger.com/follow-blog.g?blogID=6641XXXXXXXXXXX"target="_blank" onClick="window.open(this.href, this.target, 'width=500,height=400,top=200px,left=300px'); return false;">
Las propiedades utilizadas son:
target_blank : abre el link en otra ventana
onClick: al hacer click que es lo que hara
width: el ancho de la ventana pop-up
height: la altura de la ventana
left: la posicion de la ventana
asi pues nuestro codigo completo quedaria de la siguiente forma:
<a href="URL DE LA PAGINA"target="_blank" onClick="window.open(this.href, this.target, 'width=500,height=400,top=200px,left=300px'); return false;">
<img style="display: scroll; position: fixed; top:0px; left: 320px;"  src="URL IMAGEN" ></a></div>
Si como yo quieres que el boton te envie a la pagina de subscripcion de blogger solo necesitaremos este link y la ID de tu blog.
http://www.blogger.com/follow-blog.g?blogID=66615XXXXXXX
la ID la puedes encontrar facilmente al momento de hacer una entrada, editar tu plantilla y demas:


Ejemplo
<a href="
http://www.blogger.com/follow-blog.g?blogID=66615XXXXXXX"target="_blank" onClick="window.open(this.href, this.target, 'width=500,height=400,top=200px,left=300px'); return false;">
<img style="display: scroll; position: fixed; top:0px; left: 320px;"  src="http://4.bp.blogspot.com/AAAAAAAAA3U/i_Boi/XXX/ejemplo.png"></a></div>
¿donde lo coloco?
Bueno yo lo coloque antes de las etiquetas
</body>
</html>

que viene siendo al final.

Si tienen dudas, errores o sugieren una forma mas sensilla no duden en comentar





    Post a Comment