Imagen Flotante en Blogger



Como algunos habrán podido observar en la parte inferior derecha del blog hay una imagen flotante una imagen flotante tiene la característica de que puedes bajar la página (scroll) y la imagen se mantiene siempre en la misma posición y si haces click sobre ella te devuelve o hace un return a la pagina principal de la web.

Como ya me han pedido un par de amigos el código y además me lo han pedido también en un comentario procedo a publicar el código que uso y las brevísimas instrucciones para colocarlo dentro de la plantilla, como siempre y por lo que pueda pasar lo mejor es hacerse una copia de todo el código CSS antes de tocar nada.

El código
#flotante {
position: fixed;
right: 0;
bottom: 0;
display: block;
height: 200px;
width: 200px;
background: url(http://www.freewebs.com/honorio.gif) bottom right no-repeat;
text-indent: -999em;
text-decoration: none;
}

Lo pones en /* Sidebar Content, yo lo tengo al final justo encima de /* Profile y luego en la parte del código correspondiente a la sidebar pones

<a id="flotante">Honorio</a>

este lo tengo justo al final, antes de

<!-- End #sidebar -->

</div>
<!-- End #content -->

La sidebar es la parte donde tienes los enlaces a otros sitios y esas cosas.

Cuidado con el tamaño de la imagen no nos vaya a descuadrar la plantilla, luego cada uno puede usar la imagen que quiera solo con cambiar la url.

Recuerden una imagen en formato gif, es mucho mejor, (animación & transparencia) esas son sus cualidades ademas de su poco peso.



imagen gif sin fondo transparente



imagen gif con fondo transparente