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 dirigidoAhora si queremos que al pinchar se abra en una ventana emergente o Pop-up agremaremos el siguiente codigo a href
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 debajoleft: a que distancia del lado izquierdo
esta propiedad tambien puede cambiar a right si lo queremos a la derechasrc: url de la imagen
<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 ventanaasi pues nuestro codigo completo quedaria de la siguiente forma:
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
<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=66615XXXXXXXla ID la puedes encontrar facilmente al momento de hacer una entrada, editar tu plantilla y demas:
Ejemplo
<a href="¿donde lo coloco?
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>
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
Suscribirse a:
Enviar comentarios
(
Atom
)
kawii graicas por este tuto me servioo de mucho
ResponderEliminarllevaba tiempo buscando un tuto asii
y que lindo blog tienes *-*
ya te siigo
No sabes lo que me ayudaste *0* GRACIAAAAAAAAAAAAAS
ResponderEliminar