Centrar imagen subida con Blogger, en la cabecera

Cuando subimos una imagen a la cabecera del blog con el método que nos proporciona Blogger hemos de procurar que la imagen tenga el mismo tamaño, más o menos, que el tamaño de nuestra cabecera del blog.

Si el tamaño de la imagen es mayor, esta se "saldrá" de la cabecera, así que no tendremos más solución que, ampliar la cabecera o reducir la imagen.

Puede darse el caso de que nuestra imagen sea más pequeña porque así lo hemos decidido, entonces nos daremos cuenta una vez subida que (en el caso de algunas plantillas, por ejemplo la Rounders o la Denim) el título y la descripción del blog aparece hacia la izquierda y, por tanto, nuestra imagen también tomará esa posición.

Para evitar esto, si es que lo que queremos es centrarla, hemos de añadir un código en el CSS de nuestra plantilla.
Vamos a la edición de la plantilla - HTML Y colocamos estas líneas de código en la zona del CSS que ordena nuestra cabecera, justo después de /* Blog Header------ */:

.header .widget {
margin-top: 4px;
width: 520px;
padding: 0 100px;
}

El margin-top: 4px; es la distancia del borde de nuestra imagen abajo y arriba, a la cabecera.

En width: 520px; pondremos el tamaño en horizontal que tiene nuestra imagen en pixeles.

En padding: 0 100px; es donde controlamos la distancia de la imagen a los lados, si lo dejamos tal cual yo lo he puesto, por ejemplo, una imagen de 520px se verá centrada en la plantilla Rounders.
Según sea el tamaño de nuestra imagen y la plantilla que estamos usando, tendremos que "jugar" con el padding. Los cambios se ven en "vista previa" lo que nos evitará problemas antes de guardar los cambios definitivos.

Espero que te sirva Mike!

0 comentarios:

Publicar un comentario