{Css Soldier}

CSS, HTML, JAVASCRIPT, Trucos, Tutoriales & Plantillas Blogger.

Imagen Flotante (estatica) en el Blog



Después de mucho rato de abandonar este proyecto estamos de regreso, ahora les traigo como poner una Imagen Flotante o Fija en nuestro Blog.

Podemos poner cualquier imagen, y cualquier formato, si ponemos nuestro logo de preferencia sea en PNG ya que asi conservaremos la transparencia y nos dará un mejor aspecto bueno y sin mas manos  a la obra!!!.

Podemos ver como queda en Demo: Imagen Flotante.

Lo pondremos en tan solo un paso.




1.- Entramos a Plantilla | Edición de HTML y pegamos antes de </body> el siguiente codigo:

<img border='0' src='URL de la imagen' style='position:fixed; bottom:0; left:0;' />


Solo cambiaremos los siguientes valores:
URL de la imagen; por el URL de nuestra imagen (tienen que subirla a algun servidor hay muchos gratis como lo son Imageshack, TinyPic o incluso en  el propio Picasaweb de google).

Cambiar la posición es opcional  por ejemplo nuestra imagen saldra en la parte inferior izquierda, para cambiarla de posición remplaza bottom por top si la quieres arriba, y right por left si la quieres a la derecha.

Hay que mencionar también que la imagen saldrá del tamaño que es, si ponemos una imagen muy grande esta nos ocupara mucho espacio del blog.

Esto lo solucionamos agregando width (ancho) y height (alto) a nuestro código anterior quedando de esta manera.

<img border='0' src='URL de la imagen' style='position:fixed; bottom:0; left:0;' width="237" height="211" />

 Y cambiaremos a nuestro gusto los valores numéricos 237 y 211 recordando que width es ancho y height es alto.



4 comentarios:

  1. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  2. Hola estimado, tengo una consulta. En blogs con entradas flotantes como en el ejemplo del template que adjunto, cómo puedo hacer para que cada imagen entera funcione como enlace al interior de su contenido? Así como está ese template solo funciona el texto que tiene encima de cada entrada pero se desperdicia todo el tamaño de la imagen sin poder aprovecharlo haciendo click. Y que de paso la imagen se ponga un poco blanca cuando se pasa el cursor por ella. Puedo eliminar el texto y esa barra sobre las imagines pero no se como hacer que las propias imagines funcionen como link al interior de sus respectivos contenidos. Saludos.

    http://btemplates.com/2013/blogger-template-windows-8-ui/demo/

    ResponderEliminar
  3. Hola buenas, nosé que hago mal, pero he mirado en varios blogs, y no se porque no me acepta este CSS simplemente me limito a copiar el CSS y substituir los de 'URL de la imagen' por el Url de la imagen que quiero poner,
    porfabor ayudenme grácias

    ResponderEliminar
  4. me gusto pero me gustaria que esa misma imagen que flota me enviara a otra web al hacer clic como puedo hacer.

    ResponderEliminar