¡Hola, que tal!; en este ocasión, te voy a compartir algo muy básico y útil a la hora de personalizar tu blog. Se trata de colocar y ajustar una imagen en la cabecera, cosa que he visto que causa muchos problemas en los blogs.
Es muy importante saber la medida de la imagen que quieres colocar. Claro que dependerá de los resultados que busques pero, suponiendo que quieras que la imagen abarque el ancho disponible de la cabecera (excluyendo los margenes), es posible usar una imagen un poco más grande, o igual que el ancho del blog completo, para obtener resultados satisfactorios, aunque te recomiendo que la imagen sea del mismo ancho del blog ya que usar una imagen más grande, agregará más peso a la página.
Para saber cuanto mide el ancho del blog completo (mismo que tú determinas en las nuevas plantillas), selecciona la pestaña Plantilla, luego vas a Personalizar►Ajustar ancho, y ve el valor que tienes definido para Blog completo. De ese modo sabrás el tamaño de la imagen que puedes usar y servirá de base para hacer los ajustes.
Subir la imagen a la cabecera en las nuevas plantillas
Vamos a suponer que ya tienes una imagen lista para usar, (puedes encontrar muchas en esta pagina de Smashing Magazine ). Entonces, veamos cómo ponerla en el blog ;)
Paso 1: Ve a la pestaña Diseño, y haz click en "Editar" en la sección que corresponde a la cabecera.
Paso 2: Asegúrate de activar la opción Reducir hasta ajustar, si la imagen es más grande o igual que el ancho del blog completo.
Reducir hasta ajustar
También, selecciona las opción para la ubicación de la imagen, de las opciones que permite, como:
Detrás del título y la descripción
En lugar del título y la descripción
Colocar la descripción después de la imagen
Paso 3: Sube la imagen, ya sea desde una carpeta de tu computadora, o escribiendo la URL e la imagen en la opción que dice: Desde la web.
Paso 4: Finalmente guarda los cambios. Perfecto!, ya tienes una imagen propia en la cabecera del blog ;)
Ajustar una imagen más pequeña
Vamos a suponer que la imagen que quieres colocar, la vas a mostrar en lugar del título y la descripción.
Ahora la imagen es mucho más pequeña que el ancho del blog completo, mide 850 pixeles de ancho, y el blog completo mide 980 px., si seleccionas o no la opción reducir hasta ajustar, la imagen se irá hacia la izquierda, ya que es más pequeña que el ancho disponible.
Veamos como manipularla:
Ejemplo 1. Centrar la imagen de la cabecera o header
Paso 1: Ve a la pestaña Plantilla, luego a Personalizar►Avanzado►Agregar CSS y agrega las siguientes lineas, dentro del cuadro que está a la derecha:
#header-inner img {
margin: 0 auto;
}
Paso 2: Ahí, puedes ver los resultados, para guardar los cambios harás click en APLICAR AL BLOG.
Ahora la imagen se verá así...
Obviamente esta imagen que uso como ejemplo lucirá fea de ese modo, solo quiero ilustrarte con una imagen con bordes definidos los resultados, lo cual seguramente te resultará útil para otro tipo de imágenes.
Ejemplo 2. Cambiar el tamaño de la imagen
Usando la misma imagen del ejemplo, pero ahora más pequeña, vamos a suponer que a esa imagen la quieres ampliar para que cubra todo el espacio disponible para la cabecera, entonces lo que harás es definir el ancho y alto de la imagen que se mostrará , y para ello, harás lo mismo del paso 1 del ejemplo 1 (cuando la centramos), sólo que ahora vas a escribir estas lineas de código:
#header-inner img {
width: 960px; /*Ancho*/
height: 220px; /*Alto*/
}
Nota: los valores para el ancho (960px) y el alto (220px) son sólo ejemplos, tu deberás ajustarlos según el tamaño que quieres que muestre la imagen.
Luego, cuando consigas el resultado que buscas, haces click en APLICAR AL BLOG.
Ahora, la imagen que mide 850 pixeles de ancho, se ve así, sobre un ancho del blog que mide 980 pixeles.
NOTA: Ten en cuenta que al ampliar la imagen, puede perder calidad, sobre todo si las medidas no son proporcionales a las de la imagen original.
Usar una imagen detrás del título y la descripción
Hasta aquí podemos manipular una imagen que es colocada en lugar del título y la descripción, pero ¿qué pasa si en lugar de usar una imagen que sustituya el título y la descripción, quieres que esta aparezca detrás del título y la descripción?
Usaremos la misma imagen del ejemplo anterior, pero ahora no tendrá título ni descripción sobre la imagen. Ésta mide 980 pixeles de ancho, y el ancho del blog completo, también mide 980 pixeles.
Bueno, para empezar, al subir la imagen, (arriba las indicaciones) marcarás la casilla de reducir hasta ajustar, luego, seleccionas la opción Detrás del título y la descripción. Después guardas los cambios.
Mover el titulo del blog y la descripción
Si necesites mover un poco el título y la descripción, solo tienes que ir Ir a Plantilla►Personalizar►Avanzado►Agregar CSS y agregar unas lineas de código para ajustarlos:
.header h1{
margin: 10px 0 0 40px;
}
.header .description {
margin:-20px 0 0 0;
}
Nota: Necesitas ajustar los valores según tus necesidades. El margen que está en .header h1 es para el título, y el que está en .header .description es para la descripción, y el margen se lee así:
Ejemplo:
margin: 10px 0 0 40px;
...quiere decir: (10 pixeles)Arriba, (0 pixeles)a la derecha, (0 pixeles)Abajo, (40 pixeles) a la izquierda
Puedes incluso, manipular la sección donde está la imagen, por ejemplo, poner borde alrededor de ésta:
#header-inner{
border: 2px solid #000;
}
Centrar una imagen más pequeña, cuando usas la opción detrás del título y la descripción
Si usas una imagen más pequeña, como en el caso de un logotipo, al subirla se mostrará hacia la izquierda, si quieres centrar la imagen, tienes que hacer lo mismo que el paso 1 del ejemplo 1, sólo que ahora usarás estas lineas de código para lograrlo:
#header-inner {
margin: 0 auto;
}
Ten en cuenta que esto también afectará al título de tu blog, ya que cuando seleccionas esta opción, el título se muestra en función al ancho de la imagen. Si quieres moverlo, sigue las mismas indicaciones allá arriba donde dice ajustar el título y la descripción.
Notas finales pero importantes
En algunos casos, las cosas no se ven igual en todos los navegadores, y aquí los problemas son visibles si la imagen es más grande o igual que el ancho del blog, y no seleccionas la opción de reducir hasta ajustar antes de subir la imagen.
Si por ejemplo, colocas esta imagen que mide 980 pixeles, en lugar del título y la descripción, y el ancho del blog completo también mide 980 pixeles, al no marcar la casilla de reducir hasta ajustar, la imagen se verá incompleta en Firefox y Google Chrome...
...y aunque dependiendo de la imagen no puede ser notorio el problema en esos navegadores, en Internet Explorer, para no perder la costumbre, las cosas se verán peor:
Y entre más grande sea la imagen, más se va a salir o desbordar la imagen hacia la derecha, hasta llegar a provocar una barra de desplazamiento en el fondo de la ventana del navegador, si se excede el ancho de la resolución de pantalla del usuario. Como no queremos que eso pase, marca siempre la casilla de reducir hasta ajustar antes de subir la imagen ;)
Nota: Si deseas que el ancho de la imagen cubra el ancho completo del blog, echale un vistazo a esta entrada donde explico cómo hacerlo.
Espero que esto te sea útil =)
