Alinear la imagen de cabecera y la descripción del Blog

Cuando insertamos una imagen de cabecera en nuestro Blog, Blogger nos ofrece 3 ubicaciones para esta, las cuales son debajo del titulo y la descripción, en lugar del titulo y la descripción o debajo de la descripción, pero ademas de eso podemos poner la imagen a la izquierda y el texto a la derecha o viceversa, pero Blogger no nos da esta opción, pero si es posible hacerlo, una visitante de este Blog Marisol me pregunto como hacer esto, espero que llegue a leer esta entrada y poder solucionar su duda.

En esta entrada aprenderemos como hacerlo, como ya dije Blogger no nos ofrece esta opción, así que tendremos que meter manos en el código, pero despreocúpate no es nada complicado.

Alinear la imagen de cabecera y la descripción del Blog:

Si queremos que la imagen de cabecera y la descripción del Blog estén alineados en la misma fila, la imagen a la izquierda y la descripción a la derecha o viceversa, lógicamente tenemos que poner una imagen que no cubra todo el espacio de la cabecera para que el texto pueda posicionarse en el espacio sobrante.

Esto no quiere decir que si reducimos de tamaño la imagen la descripción automáticamente se posicionara en el espacio sobrante, aun falta un código adicional para lograr esto.

Código para hacer que la imagen este en la izquierda y la descripción a la derecha:

#header img { float:left; }

El resultado al utilizar el código es el siguiente:

El código fue probado en este Blog, como pueden ver en la imagen, la imagen de cabecera se posiciono a la izquierda mientras que la descripción paso automáticamente a la derecha utilizando el espacio que dejo la imagen.

Código para hacer que la imagen este en la derecha y la descripción a la izquierda:

#header img { float:right; }

El resultado al utilizar el código es el siguiente:

Así de la misma forma el resultado es similar ambos están ubicados en la misma fila con la diferencia de que la imagen esta al lado derecho y la descripción al lado izquierdo, esto se puede dar gracias a la propiedad float de css

OJO: El código fue insertado usando la herramienta de plantilla personalizada de Blogger, en la sección de añadir css, de esta forma podemos ver los cambios en vivo mientras editamos el código, así podremos ver la previa del resultado y si nos gusta lo guardamos.

Espero que esta entrada les sea de mucha utilidad, cualquier duda o aporte hacerlo por comentarios.Gracias por su Tiempo!

¿Tienes alguna otra forma de alineas la imagen y la descripción dela cabecera? comentala!