DISEÑO Y SERVICIO WEB, RECURSOS EN LINEA, TUTORIALES, PROGRAMAS Y MÁS...

viernes, 25 de septiembre de 2009

¿Cómo colocar una imagen de cabecera en un blog?

¿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
como colocar una imagen de cabecera en el blog
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:
como colocar una imagen de cabecera de la forma correcta
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í:
imagen de cabecera de un blog
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

8 comentarios:

  1. טוב תודה לך נושא יותר נפלא

    ResponderEliminar
  2. Lionel agradeceríamos que lo dejaras en español... sería bueno saber que fue lo que quisiste decir...

    ResponderEliminar
  3. haaa! gracias!!!! :)
    un 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

    ResponderEliminar
  4. hola LHC1
    Mira, 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

    ResponderEliminar
  5. gracias gracias gracias dies mil veces graaaciaaas! entren a mi blog y miren que bonito y ancho que quedo!

    ResponderEliminar
  6. Hola! Me aparece lo mismo que a Rebecca Rosenbaum, me podrias decir donde realizar los cambios? Gracias!

    ResponderEliminar
  7. No encuentro el #head-wrapper... alguien me puede decir como localizarlo??

    ResponderEliminar