Cuando subimos una imagen a la cabecera de nuestro blog se puede presentar uno de estos casos: - Que la imagen sea más ancha que la cabecera: En esta caso la imagen se saldrá de la cabecera, y por tanto se debe descartar.
- Que la imagen tenga el mismo ancho de la cabecera: En este caso la imagen encajará perfectamente, y es una imagen que se puede aceptar ya que no afectará la simetría del blog. Es la opción ideal.
- Que la imagen sea menos ancha que la cabecera del blog: En esta caso la imagen nos aparecerá, por defecto, en el lado izquierdo. Si queremos que, para un mejor diseño, la imagen aparezca en el centro de la cabecera, debemos efectuar las siguientes modificaciones en nuestra plantilla (tomando como ejemplo un blog diseñado con el Nuevo Diseñador de Plantillas, y la plantilla Picture Window):
Vamos a Editar HTML: | Diseño | ► | Editar HTML | ► | Click dentro del editor | ► | Ctrl+f | ► | 
|
Ponemos dentro del rectángulo de búsqueda (search) esto: para localizar el encabezado de la sección CSS de la cabecera, que es éste: /* Header
----------------------------------------------- */ |
...e inmediatamente debajo pegamos este código: .header .widget {
margin-top: 4px;
margin-bottom: 4px;
width: 663px;
padding: 0 95px;
} |
margin-top: 4px; corresponde a la distancia de la imagen al borde superior de la cabecera.
margin-bottom: 4px; corresponde a la distancia de la imagen al borde inferior de la cabecera.
width: 663px; corresponde a una imagen con 663 pixeles de ancho.
padding: 0 95px; corresponde a la distancia entre la imagen y los bordes laterales de la cabecera.
En el ejemplo de este tutorial, la imagen está centrada así: al ancho de la imagen corresponde un padding de 0 95px, con esta plantilla. Dependiendo del ancho de la imagen (width) podemos centrarla aumentando o disminuyendo la distancia en pixeles (0 95px) entre la imagen y los bordes laterales (padding) de la cabecera, observando la ubicación de la imagen en la Vista previa, antes de guardar plantilla. Para seguir conservando la simetría en la apariencia de nuestro blog, centramos, dentro de la imagen, el título del blog, así: Siguiendo hacia abajo en la sección CSS de la cabecera (header), localizamos este código: .Header h1 {
font: $(header.font);
text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
} |
...y le agregamos esta línea: Debiendo quedarnos así: .Header h1 {
text-align:center;
font: $(header.font);
text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
} |
Observamos Vista previa y guardamos plantilla. Así se verá el blog: 
|
73 comentarios :
Muchísimas gracias,
Estaba como loca trás una manera de centrar la cabecera con el nuevo blogger;D
Pásate si quieres y ves que tal:
http://www.deseoyoscuridad.blogspot.com
Kisses y feliz día;D
¡Perfecto Karol!. Tu blog es de maravilla.
Felicitaciones!
Buenas tardes Castorlux,
Ante todo, felicidades por tus pedagógicas explicaciones. Los que, como yo, somos de letras, lo agradecemos infinito.
Dicho esto, tengo dudas/pánico: igual que Karol, quiero centrar la imagen de la cabecera de mi blog, pero no se si hay alguna forma de hacerlo sin entrar en el código HTML.
Es decir, ¿puedo hacerlo desde Diseñador de plantillas>Avanzado>Insertar CSS?
Si es que sí, ¿qué debo insertar?
mi blog es: http://daddys4ever.blogspot.com/
(atención: es de 'ocio para adultos', lo digo por si resulta ofensivo para ti, puedo entenderlo perfectamente)
Gracias por tu atención!
Hairy4ever: Diseñador de plantillas de Blogger te permite personalizar aspectos de la apariencia de tu blog a través del uso de hojas de estilo en cascada (CSS), pero con algunas limitaciones.
Si utilizas el Diseñador de plantillas, como tú dices: Diseñador de plantillas>Avanzado>Insertar CSS, encontrarás este enlace Más información sobre la modificación del código de plantilla, que te llevará a un tutorial en donde están las directrices a seguir; este tutorial está en inglés.
Para el caso que nos ocupa (sinceramente te digo, no sé si se trata en ese tutorial) considero que es menos complicado si sigues la instrucciones que damos en esta entrada. No vas a tener complicaciones si sigues las indicaciones tal cual.
Cordial saludo.
Wenaas, vereis queria que la cabecera de mi blog ocupase todo el ancho de mi pagina asi que le puse de width 1277px (que es lo que mide la imagen de ancho) pero la imagen queda centrada y queda un monton de espacio a la izquierda y la imagen ocupa de mas a la derecha.
Como lo hago para que la cabecera se ajuste a la izquierda?
dejo el codigo HTML de la cabecera pra que veais cmo es:
/* Header
----------------------------------------------- */
.header .widget {
width: 1277px;
}
.header-outer {
margin: $(header.margin.top) 0 $(header.margin.bottom) 0;
background: $(header.background.color) $(header.background.gradient) repeat scroll 0 0;
}
.Header h1 {
font: $(header.font);
color: $(header.text.color);
text-shadow: 0 0 $(title.shadow.spread) #000000;
}
.Header h1 a {
color: $(header.text.color);
}
.Header .description {
font: $(description.font);
color: $(description.text.color);
}
.header-inner .Header .titlewrapper,
.header-inner .Header .descriptionwrapper {
padding-left: 0;
padding-right: 0;
margin-bottom: 0;
}
.header-inner .Header .titlewrapper {
padding-top: $(header.padding.top);
}
problema solucionado:
#header {
margin: 0 0 0 -133px;
width: 1263px;
}
¡Felicidades Violeta! te adelantaste a mi respuesta. Disculpa por no haberte contestado oportunamente.
Saludos.
no pasa nada, eske cuando me empeño en encontrar algo a veces me pongo muy pesada y me he puesto a probar medidas, pro gracias por la intencion jeje :)
Castorlux, gracias por tu respuyesta. Probaré tus indicaciones.
De nuevo, mil gracias
En la imagen de cabecera me sale una línea de borde en el costado izquierdo. ¿Saben cómo puedo hacer para que no aparezca?
Saludos
Victoria
Victoria:
¿Qué plantilla utilizas?
Saludos.
eres un genio, no sabes lo que me ha costado encontrar como se hacia, miiiil gracias!!
¡Con mucho gusto Luceral!
Saludos.
hola Castorlux . Esta ves estoy liada para colocar una galeria de imagenes que se desplacen y que se puedan obtener nuevmamente si pinchamos un numero u otra imagen como la que se aprecia en este blog: http://charhadas.com/ , si me pudieras ayudar . gracias. Mary
Mary: Con este código puedes crear una galería de imágenes desplazables:
<marquee><a href="URL DEL SITIO ENLAZADO POR LA IMAGEN" target="_blank" title="TITULO"><img src="URL DE LA IMAGEN"></a></marquee>
El contenido entra las etiquetas <marquee> y </marquee> lo repites tantas veces como imágenes pongas.
Para galerías más complicadas visita esta páginas:
http://creaweb.blogspot.com/2010/05/abrir-imagen-en-la-misma-pagina-con.html
http://www.highslide.com/
Saludos.
Muchas Gracias, eres el unico que me soluciono el problema!!!! Excelente Blog
PEF: Muchas gracias por tu visita y tu comentario.
Saludos.
hola solamente queria agradecer, ya que he querido centrar mi imagen y por fin lo logre, los consejos que encontraba se basaban en las antiguas plantillas de blogger , gracias y sigue con este blog que es muy util
Raslixx: Ese es el objetivo de este blog, ser útil a los lectores. Gracias por tu comentario.
Saludos.
Maestrazo, tenía rato queriendo hacer esto y no habia encontrado una explicación tan sencilla.
GRacias.
Anónimo: Con mucho gusto y gracias por su visita.
muchas gracias me ayudo mucho tu tutorial, al fin pude centrar la cabecera.
saludos segui asi, ah y los invitoa pasar or mi web
www.vyc-metal.blogspot.com
viejo buena tu explicacio.. si me ayudas con esta mucho mejor
ya tengo la imagen centrada y el titulo me gvusta asi a la izquierda pero debajo tengo un banner de adsense que no eh podido centrar
donde modifico el codigo y que le hago graciass!!
Steve: Encierra el código de Adsense entre las etiquetas <center> y </center> así:
<center>Código de Adsense</center>
Saludos
muchisimas gracias, ha funcionado!!!!! y confiso que lo hice con mucho miedo pero al final resulto, esta chulisima la cabecera cantrada, gracias.
Gracias a tu respuesta pude centrar la cabecera aunque me quedo un poquitin a la izquierda quiero saber si se puede centrar del todo. mi correo es ecoartamelia@hotmail.com gracias.
Buenas tardes. Estoy intentando que la imagen de la cabecera de mi blog se ajuste al ancho total de la misma, pero no lo consigo. La imagen mide 1600 x 472 pixeles. Agradecería me pudieras ayudar. Un saludo, Santiago Acosta
/* Header
----------------------------------------------- */
.header .widget {
margin-top: 4px;
margin-bottom: 4px;
width: 900;
padding: 0px 290px;
}
.header-inner .Header .titlewrapper,
.header-inner .Header .descriptionwrapper {
padding-left: 10px;
padding-right: 10px;
}
.Header h1 {
text-align:center;
font: $(header.font);
color: $(header.text.color);
text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
}
.Header h1 a {
color: $(header.text.color);
}
.Header .description {
font-size: 130%;
}
Santiago: Debes modificar el tamaño de la imagen, guardando la proporción entre el ancho y el alto, para que no se distorsione. El ancho debe ser igual al ancho de la cabecera (900px), o sea que las dimensiones de la imagen deberán ser 900px de ancho y 265px de alto. Estas modificaciones las puedes hacer con el programa Paint o en esta página: http://es.tinypic.com/
En cuanto al código, debes modificar el primer bloque eliminando el padding y los márgenes.
Deberá quedar así:
.header .widget {
width: 900px;
}
Muchas gracias Pedro Pablo, lo pondré en práctica y ya te comento los resultados. Un saludo y agradecido.
Muchas gracias. Hacía rato venía buscando una solución y ninguna funcionaba. Gracias!!!
F: ¡Con mucho gusto! y gracias por su visita.
Saludos.
Hola ya pude centrar mi imagenn pero el titulo sigo muy cagado ala derecha, me pueden ayudar?
http://templario-miscenciaymislibros.blogspot.com
Templario: En la parte final del tutorial (en donde dice: Para seguir conservando la simetría en la apariencia de nuestro blog, centramos, dentro de la imagen, el título del blog, así:), se explica cómo centrar el titulo.
Saludos.
Hola...
Muchas gracias por su ayuda, hace rato venia intentando centrar la imagen y no encontraba un buen tutorial para hacerlo.
Pero tengo una pregunta y talves ustedes puedan ayudarme... no vi en las opciones de ayudas que tienen, asique talves no puedan ayudarme... pero, en fin... el tema es que cuando publico la entrada comúnmente cuando la escribo algun tramo del texto lo pongo en otro color... cuando se publica no hay rastros de los colores con la que lo escribi, y llendo a diseñar plantillas/avanzado puedo cambiar el color pero de tooodo el texto.
espero puedan ayudarme, sino... Muchas gracias igual si post fue de mucha ayuda :)
Simplemente te amo: Ensaye a poner los colores manualmente encerrando, en la Edición de HTML de la entrada correspodiente, el texto al que le va a poner color, entre una de estas etiquetas:
<font color="#FE4A4A">TEXTO A COLOREAR</font>
<span style="color: #FE4A4A;">TEXTO A COLOREAR</span>
...en donde #FE4A4A es el código del color. Debe reemplazarlo por el del color que desea poner.
Aquí consigue códigos de los colores que quiera:
http://html-color-codes.info/codigos-de-colores-hexadecimales/
Saludos.
Hola! tengo la cabecera hacia la izquierda y por mas que hago no se me va al centro que puedo hacer.
Martha: No se te olvide que, una vez pegado el código mencionado en el tutorial, si la imagen sigue cargada a la izquierda debes aumentar los pixeles de la segunda cifra del padding (padding: 0 95px;), o sea 95 px, y vas observando con la Vista previa hasta que logres centrarla.
Hola Pedro me podrias ayudar no puedo centrar el titulo de mi cabecera, ya aplique tus consejos de este post pero sigue igual, te dejo el link de mi blog
http://templario-miscenciaymislibros.blogspot.com/
De antemano gracias.
Saludos
Templario: En el tutorial se explicó la forma de centrar el título en sentido horizontal. Al mirar tu blog pienso que lo que tú quieres es centrarlo en sentido vertical, o sea, bajarlo. Si es así debes hacer lo siguiente:
En la plantilla, debajo de:
/* Header
----------------------------------------------- */
busca un código como éste:
.header-inner .Header .titlewrapper,
.header-inner .Header .descriptionwrapper {
padding-left: 20px;
padding-right: 20px;
}
al final del mismo agrega esta línea:
padding-top: 145px;
O sea que debe quedar así:
.header-inner .Header .titlewrapper,
.header-inner .Header .descriptionwrapper {
padding-left: 20px;
padding-right: 20px;
padding-top: 145px;
}
145px corresponde a la mitad del ancho (width) de la imagen. Creo que la imagen de tu blog tiene 290px de ancho; si es diferente le pones la medida correcta. Posiblemente el título no te quede exactamente en el centro. En todo caso no debes poner en el código un valor en pixeles mayor que la mitad del ancho de la imagen, porque se irá creando un espacio entre la cabecera y la parte superior del blog, y la distancia entre la cabecera y el cuerpo de las entradas, aumentará.
Saludos.
No puedo, por mas que lo intento el texto no se expande, si esta centrado pero no expandido. Ayuda por favor! este es mi blog
http://www.estrellozone.blogspot.mx/
Hola!
Al fin encuentro alguien que pueda ayudarme!
Se que el post es muy antiguo, pero espero que aun pueda ayudarme.
Tengo una cabecera de 762x162 pixels y me gustaria encjarla, sin que quedaran margenes alrededor y no lo consigo, aun siguiendo tu tuorial. Aqui le envio una copia del codigo:
/* Header
----------------------------------------------- */
.header-outer {
background: $(header.background.color) $(header.background.gradient) repeat-x scroll 0 -400px;
_background-image: none;
}
.Header h1 {
text-align:center;
font: $(header.font);
color: $(header.text.color);
text-shadow: $(header.shadow.offset.left) $(header.shadow.offset.top) $(header.shadow.spread) rgba(0, 0, 0, .2);
}
.Header h1 a {
color: $(header.text.color);
}
.Header .description {
font-size: $(description.text.size);
color: $(description.text.color);
}
.header-inner .Header .titlewrapper {
padding: 22px $(header.padding);
}
.header-inner .Header .descriptionwrapper {
padding: 0 $(header.padding);
}
Que debo hacer?
Muchas gracias de antemano, un saludo
Respuesta para Estrello Zone (Comentario #40): No sé a qué se refiere con "expandido". El texto del título no tiene que expanderse por que aparece tal cual se incluye. Si se refiere a que no se ve completamente, debe reducir el tamaño de los caracteres.
Saludos.
Respuesta para Alexis (Comentario #41): Para que no le queden márgenes debe poner una imagen que tenga exactamente el mismo ancho del blog. El código indicado en el tutorial, que se debe pegar después de:
/* Header
----------------------------------------------- */
no debe tener padding ni márgenes, debiendo quedar así:
.header .widget {
width: XXXXpx;
}
reemplazando las equis (XXXX) por el número de pixeles del ancho de la imagen que, como indiqué antes, debe ser igual al ancho del blog.
Saludos.
Una gran ayuda para mis trabajos, gracias por compartir sus experiencias
Anónimo: Bienvenido y gracias por su comentarios.
Saludos.
Buenas tardes, soy nuevo por aquí y tengo el mismo problema que AlexIs, me gustaría que la imagen de mi cabecera ocupara todo el ancho de la página, pero al entrar en edición HTML me sale esto:
/* Header
----------------------------------------------- */
.header-outer {
margin: $(header.margin.top) 0 $(header.margin.bottom) 0;
background: $(header.background.color) $(header.background.gradient) repeat scroll 0 0;
}
.Header h1 {
font: $(header.font);
color: $(header.text.color);
text-shadow: 0 0 $(title.shadow.spread) #000000;
}
.Header h1 a {
color: $(header.text.color);
}
.Header .description {
font: $(description.font);
color: $(description.text.color);
}
.header-inner .Header .titlewrapper,
.header-inner .Header .descriptionwrapper {
padding-left: 0;
padding-right: 0;
margin-bottom: 0;
}
.header-inner .Header .titlewrapper {
padding-top: $(header.padding.top);
}
La verdad, no se que tengo que quitar y poner porque no veo la numeración de ancho y alto de la imágen, y no quiero fastidiarlo.
Gracias de antemano y un saludo.
NOHAYFUTURO: La respuesta es la misma que le di a Alexls. Está en el comentario #43.
Saludos
Gracias, yo no quería centrarla, quería alinearla a la izquierda ya que por defecto me ponía la imagen al centro. Con ese código solo cambié center por left y esta de marabilla, gracias.
Sergio: ¡Sentido común! Felicitaciones.
me anduvo perfecto. mira como quedo la imagen en mi blog
quierounmillondedolaresydeamigos.blogspot.com
Gracias
Juan Giménez: Quedó perfecta ¡Felicitaciones!
Te doy las gracias por tu blog, llevaba bastante tiempo intentando centrar la imagen de la cabecera de mi blog sin conseguirlo, buscando y buscando sin remedio. Hasta que di con tu blog, es sensacional te felicito, y animo a que sigas ayudándonos a los novatos. Mil gracias.
J. Carlos: Gracias por tu visita y tu comentario.
Saludos.
Hola, buenas tardes.
Tu blog ha sido muy útil para reacomodar mi pag a mi gusto.
Una pregunta, cómo hago para centrar la descripción del blog?
Muchas gracias!
Sindey: Buscas en la plantilla, sin expandir plantillas de artilugios, la siguiente etiqueta:
]]></b:skin>
...y antes de la misma pegas esto:
.description {
text-align: center;
}
Saludos.
Hola me podrian ayudar no se como alinear un texto debajo de la cabecera de blog:
“De los diversos instrumentos inventados por el
hombre, el más asombroso es el libro;
todos los demás son extensiones de su cuerpo…
Sólo el libro es una extensión de la imaginación
y la memoria”.
http://templario-miscenciaymislibros.blogspot.com/
De antemano gracias
Rikardo: Desde la página principal vaya a Diseño >> Diseño y, debajo de la cabecera, añada un gadget del tipo Texto, dentro del cual pone el texto a que se refiere. Asegúrese de que el gadget quede colocado debajo de la cabecera.
Saludos.
Muchas gracias----saludos
Te agradeceré por toda mi vida ya que este tutorial me sirvió de mucho.
Gracias, gracias~ *--*
¡Felicidades Katherine!
Saludos.
hola, he encontrado su sitio después de intentar en mas de 4 sugerencias que no sirven de otras personas, he logrado centrar mi imagen pero no el tamaño, sigue con el mismo tamaño que cuando la subí.
Quisiera triplicar el tamaño que tiene ahora, pero he cambiado números y no surge efecto. Aquí le paso los códigos
/* Header
----------------------------------------------- */
.header .widget {
margin-top: 4px;
margin-bottom: 4px;
width: 963px;
padding: 0 440px;
}
.header-outer {
background: $(header.background.color) $(header.background.gradient) repeat-x scroll 0 -1400px;
_background-image: none;
}
.Header h1 {
text-align:center;
font: $(header.font);
color: $(header.text.color);
text-shadow: $(header.shadow.offset.left) $(header.shadow.offset.top) $(header.shadow.spread) rgba(0, 0, 0, .2);
}
mi pagina es tikvita.com
Gracias
Verónica: Esa imagen está muy grande y no deja ver la página. El tamaño de la imagen no debe exceder al tamaño de la cabecera.
Saludos.
QUE DIFICIL QUE LO HACEN Y LO EXPLICAN, PONGAN ESTO Y LISTO !!
DEBAJO DE:
/* Header
----------------------------------------------- */
VA ESTO:
.header .widget {
text-align:center;}
.header img {margin:0 auto;}
Uno, su solución es muy sencilla y bastante didáctica. El único problema que tiene es que no funciona. Cómo va a funcionar si no tiene en cuenta ni padding, ni márgenes, ni tamaño de la imagen...ni nada.
Felicitaciones!
Muchas Gracias ;)
Gracias wey!
Estimados:
En mi blogger: liceojtm.blogspot.com no logro centrar la insignia.
¿Dónde debo poner el código para centrar? No puedo hacerlo directamente desde el blog "redactar" porque aparece sólo como gadget en el diseño de la plantilla.
Se agradece desde ya.
Saludos
Patricio
Profe, hice un ajuste en el tutorial explicando, más concretamente, en dónde se debe poner el código.
Saludos.
Muchísimas gracias, este tutorial me ha sido de gran ayuda !!!
Gracias amigo me a sido muy útil. Saludos.
Gracias, muy buen aporte!! :D
Gracias amigo, la explicación es excelente, me solucionaste mucho sin apenas buscarlo =D
Este blog ya cumplió su ciclo, por esta razón, aunque sigue a disposición de los usuarios, no se harán más publicaciones ni se atenderán más consultas. La respuesta a su inquietud puede estar entre los comentarios hechos hasta aquí.
El autor.