¿Cómo centro la imagen de la cabecera del blog?
Coloca un imagen el la cabecera o encabezado de tu blog centrada
Últimamente he recorrido algunos blog nuevos con muy buenas ideas pero he notado que la imagen colocada en la cabecera no está centrada o no se ajusta a la plantilla...Yo tuve el mismo problema cuando comencé, pero como soy algo "maniático" con la estética de un blog no me puedo resisitir cuando veo uno con este problema...
Aquí va mi guía para hacerlo paso a paso:
1- En el panel de control de tu blog en "blogger" ir a Diseño--->Elementos de la página
2- Ahora clik en Editar donde dice Cabecera.
3- Se abrirá la siguiente ventana
4- Esta ventana permite cambiar el título del blog y agregar una imagén detrás o en sustitución del mismo. Una vez cargada la imagen estará colocada en la cabecera del blog...
5-Supongo que la mayoría ya sabe hacer esto... el tema es que muchas veces nos llevamos la sorpresa de que la imagen no coincide con nuestra cabecera o que hay que cambiar su tamaño para que se vea bien y NO pase lo siguiente:
6-Pues no es necesario cambiar el tamaño de la imagen y perder parte de ella, sino que podemos cambiar el ancho del blog y de la cabecera, del siguiente modo:
7-Ir a Diseño--->Edición HTML y dentro del lenguaje html buscar el siguiente código:
#header-wrapper {
width:600px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}
#outer-wrapper {
width: 600px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}header-wrapper: idica el acho y los atributos básicos del encabezado
outer-wrapper: indica el ancho y atributos generales de todo el blog
SE DEBEN MODIFICAR AMBOS
Por ejemplo si la imagen que tengo de cabecera es de 900 px deberé cambiar donde dice "width: 600px;" por el número de ancho quedando de este modo "width: 900px;" (siempre es bueno agregarle algún pixel más, tanto en header-wrapper como en outer-wrapper.
Quedará así:
Les recomiendo también ir probando distintas tamaños para ver los efectos que produce.
También pueden modificar el margin y el padding e ir viendo lo que ocurre
No olvidar al salir de edición HTML, guardar los cambios... Si les da miedo hacer una macana o meter la pata con la plantilla le dan a vista previa y no graba los cambios.
Es fácil no teman
Espero os sea útil...
¡Dedicado a Anto!
Post relacionados:
Cómo cambiar la plantilla de mi blog
Cómo quitar la barra navbar
Entradas
טוב תודה לך נושא יותר נפלא
ResponderEliminarLionel agradeceríamos que lo dejaras en español... sería bueno saber que fue lo que quisiste decir...
ResponderEliminarhaaa! gracias!!!! :)
ResponderEliminarun dia lo voy a intentar, pero por ahora no ¡porque me re confundo con lo de edicion html! jeje son muchas letras en un solo lugar, por ahi y por alla ¡te re confunde! jaja, cuando sepa manejarlo lo voy a hacer, y vi unos cuantos blogs con esos problemas, por suerte la cabezera del siberiano la saque de un fondo de pantalla y era bastante ancho jaja
ANTO
hola LHC1
ResponderEliminarMira, aqui te voy a colocar lo que mi plantilla tiene... completamente diferente a lo que tu tienes:
----------------------------------------------- */
#outer-wrapper {
margin: 0 auto;
width: 760px;
text-align: $startSide;
font: $bodyFont;
}
#header-wrapper {
padding-bottom: 15px;
background: url(http://www.blogblog.com/thisaway_rose/bg_header_bottom.gif) no-repeat $startSide bottom;
}
#header {
background: #632035 url(http://www.blogblog.com/thisaway_rose/bg_header.gif) repeat-x $startSide bottom;
}
Te pegué más de lo que tu tienes especificado arriba. Ahora bien, dónde hago los cambios?
cambio el 760px por 900 ?
horrible no saber de estas cosas!!!!
Bueno.. espero tu mensaje tranquilita. Si ya llevo un año con este dibujito tan chiquitito, puedo llevar todavía unos días más..
Gracia LHC, gracias.
Rebecca
gracias gracias gracias dies mil veces graaaciaaas! entren a mi blog y miren que bonito y ancho que quedo!
ResponderEliminarHola! Me aparece lo mismo que a Rebecca Rosenbaum, me podrias decir donde realizar los cambios? Gracias!
ResponderEliminarNo encuentro el #head-wrapper... alguien me puede decir como localizarlo??
ResponderEliminarEste comentario ha sido eliminado por el autor.
ResponderEliminar