163

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!

Entradas Relacionadas:

163 comentarios:


Anónimo

Muy buen tutorial. Por cierto, conseguí poner los iconos de feed que quería y le he dado unos retoques coloridos al tema de las suscripciones.

Es curioso, pero he llegado a una conclusión. Cuando parece que ya tienes el blog a tu medida y tal como te gusta, siempre encuentras algo que quieres usar para mejorarlo o modificarlo; lo que nos llevaría a una reflexión: Cuanto más tenemos más queremos. Cuanto más sabemos más queremos hacer.

Moraleja: Si empiezas exámenes dentro de diez días... ¡¡¡olvídate que tienes un blog!!! xD.

Hasta pronto!

Anónimo

Hola Rosa. Sigo a la carga de nuevo. ¿Te acuerdas que hace tiempo te pedi que me comentaras como podía encuadrar por separado las secciones de la side-bar?

Bueno. Pues lo consegui, pero si te fijas me ha quedado la raya de separacion por debajo y un espacio grande entre el titulo de cada seccion y su contenido. Pasate por mi blog y lo ves mejor.

He intentado tocar todos los parametros de la side bar pero nada. ¿se podrá arreglar?

Anónimo

Jabba, jajja, cuanta razón llevas! Así empecé yo...con un blog normalito y como inconformista que soy, cada vez quería más...Ahora con el Escaparate tengo la disculpa perfecta para probarlo todo, je,je.

Pues a estudiar se ha dicho, pero no te olvides del blog, úsalo como premio...piensa, si estudio x tiempo empleo x en el blog. Eso si, sin estudio no hay premio. ;)

Anónimo

Coño, Toxic!! Si ya me habias comentado eso...XD, tenía pensado mirarlo y se me pasó...los nervios pre-vacacionales supongo :D

Ahora voy pa yaaaa!!

Anónimo

Toxic, ya estoy aquí :D
Creo que ya lo tengo...es que en esa template el código que controla el título de la sidebar está aparte de los demás controles para ella. Por eso no lo encontrabas, seguro.
Busca esto:
h2 {
margin.:1.5em 0 .75em;
font:normal bold 103% 'Trebuchet MS',Trebuchet,Arial,Verdana,Sans-serif;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.2em;
color:#ffcc66;
}

En margin:1.5em 0 .75em; he puesto
0.0em 0 .75em; y ya va para arriba, je,je, depende de la distancia que quieras pon 0.5, 1.0...lo que mejor te vaya en vista previa.
¡Saludos! Y hasta pronto (estoy segura) ja,ja,ja,

Anónimo

Gracias Rose. Eres la caña. ¿Seguro que no eres programadora de HTML? ¡Nos estas engañando! Ahora lo probaré.

Respecto a lo del FLASH: El código que te pasé por mail para subir flash funciona. Yo lo he probado varias veces y lo sube a la perfeccion. El problema quizá es que es el mismo FLASH que yo te pase el que lleva la orden de blank, es decir, abrir en una nueva ventana. Se la puse yo. Dime si es eso lo que te falla por que vuelvo a enviartelo sin blank ¿o tal vez sin link? ´´

lo que quieras

Anónimo

Claro, toxic, sabía yo que estaba ahí....Lo quiero sin el blank, que voy a usarlo en el header...

Y funcionar, funciona, que ya lo comprobé...

Anónimo

Ok. como voy a hacerlo otra vez. dime si quieres alguna medida en pixels o algo.

ok?

Anónimo

Como está, está perfecta, solo quitale el blank ese, je,je.

Y Gracias!

Anónimo

hola como estas Rosa pasaba por tu blog, esta muy interesante :)

siempre entro a ver que hay de nuevo

mi blog es enpro.blogspot.com :)

Franz Häuser

Hola Rosa,

Vuelvo a pasarme por aquí. La verdad es que ya te tengo en favoritos, y estoy poniendo en práctica varios de tus trucos. Gracias!

Por otro lado, estoy teniendo problemillas al añadir imágenes en la sidebar. algunas no quedan ajustadas a la barra, aunque marco la opción para ello. Alguna idea ?

Graciasssss

Anónimo

kcb, pues tienes toda la razón, aunque marques la opción no sirve de nada...
La única solución es meter imágenes de 240px de ancho o menos, que es la capacidad de tu sidebar, ya sabes, Blogger es así...:(

Anónimo

Enpro, gracias, te visitaré! ;)

Anónimo

ok rosa espero tu visita :) y me dices que te pareció mi Blog :D

Soundtrack Radio

Hola Roús
gracias por el mail donde me señalabas cómo subir archivos en flash al blog, ahora veo que estás en algo parecido, albricias! =)
Te molesto una vez más: tengo la plantilla Mínima en el blog, y me gustaría ponerle una imagen (un degradado) de fondo, pero el tema es que se "transparenta" con el texto, ¿habrá alguna forma de solucionar eso?
GRACIAS MILLLLL!!!!!!!
Byess

Matías

Gabriela

querida rosa:
¿donde puedo cambiar la distancia entre la imagen del titulo del blog y las entradas?

gracias.

Anónimo

Soundtrack, ¿que quieres decir con que se "transparenta"???

Anónimo

Gabriela, busca en tu plantilla esta parte:

#main-wrapper {

Y justo debajo añades: margin-top:20px;

Si quieres más distancia, aumenta el 20 por un número mayor.

Has de tener en cuenta que solo "bajaran" las entradas, y la sidebar no.
Si quieres que esten igualadas, busca esto:

#sidebar-wrapper {

Y añade la misma línea (con el mismo número que para las entradas)

¡Suerte!

Soundtrack Radio

A ver si puedo hacerme entender, perdón por mis pocos datos... viste que los post (y la side bar y todo el blog) en la plantilla Minima no tienen color de fondo, sino que llevan el color de fondo del blog, por lo que si cambio este background (por un color o una imagen oscura, por ejemplo) se me hace ilegible lo que escriba.
Se entiende? Cómo se le podría poner una imagen degradada oscura de fondo a este tipo de plantillas???
Saludets

Matías

Anónimo

Soundtrack, ¿has probado a cambiar el color del texto? Si el fondo es oscuro, podrías poner el texto blanco, por ejemplo.

Franz Häuser

Gracias por la respuesta Rosa. Probaré a hacer un resize de la simágenes a ver que tal.

Gracias, eres un crack!

.: Alexia Stark :.

Hola de nuevo Rosa ^^

Mira, resulta que al poco de empezar mi blog le quise poner una imagen el la cabezera, pero no sé en que blog lo busque, el tema es que toque el html para ponerla, funcionó, pero ahora la cabezera es solo una imágen, es decir, no tiene ninguna url para volver al indice como antes...
Ahora la cabezera la tengo puesta con la opción de blogger, que como era muy nueva no sabia ni que estaba T_T
Hay alguna forma de que mi cabezera pueda volver a redireccionar al indice??

Un saludo.

Anónimo

Alexia, cuando usas la opción de Blogger automáticamente la imagen del header redirecciona al inicio... ¿Estas segura que lo has hecho en Blogger?, has quitado la imagen anterior?, no se me ocurre que puede ir mal...

Diego

Rosa,

Veo que te tenemos ocupada con todas las consultas... no sé qué haríamos sin gente como tú.

He tratado de seguir tus instrucciones para centrar el título, pero en la plantilla Tekka no está el "/* Blog Header------ */"... puedes orientarme sobre cómo proceder en este caso?

Gracias!

.: Alexia Stark :.

Sí Rosa, lo hice en Blogger, en el blog que lo mire explicaba como sustituir la cabezera que habia por una imágen mia, para eso tenia que borrar noseque y pegar el código que daba, lo hice y me salio bien, pero ya no redireccionaba...
Pasate si quieres a mi blog y le tiras una miradita, a ver si tu sabes si se puede solucionar.
Muchisimas gracias y perdón por las molestias :(

Anónimo

La opción de Blogger que yo te digo es esta:
http://elescaparatederosa.blogspot.com/2007/04/imagen-de-cabecera-opcion-de-blogger.html

¿Lo has hecho así?

Gustavo Pérez

Hola soy Gustavo de nuevo, desde las Palmas de Gran Canaria. Tengo un problemilla con la imágen que me he subido para la cabecera de mi web-blog. Resulta que utilizando el explorer la cabecera se ve sin problemas pero cuando lo abro con el Fire-Fox entonces la cabecera desaparece. ¿me puedes ayudar? ¿necesitaría un codigo especial para adjuntarlo en la plantilla?

Muchas gracias.

Anónimo

Hola Gustavo!
Es raro eso...normalmente se ve sin problemas en los dos,claro que no se que sistema has empleado para colocarla, si es en el html, igual tienes algún error... ¿El resto del blog se ve igual en los dos navegadores?
No he podido revisar tu blog porque no tienes habilitado el perfil...

Anónimo

Hola Rosa, soy Gustavo de nuevo. Gracias por tu rápida respuesta. Mira aquí te paso el link de mi web-blog para que veas lo que te comentaba:
www.motoclubvespagrancanaria.blogspot.com

y gracias de nuevo

Anónimo

Hola gustavo!!

Un aire muy retro el de tu blog...¡me gusta!

Mira a mi me pasa al reevés, veo el header en Firefox perfecta y en IE no la veo...

Es una plantilla antigua y yo lo que más domino es el Blogger nuevo, pero creo que el problema esta en esta línea:
@media all {
#header {
background:none url("http://bp1.blogger.com/_VOGnpVoahUs/RrMOFNd83UI/AAAAAAAAAh0/XAUijYkEeeM/s1600/CABECERA%2BAGOSTO.jpg") no-repeat left top;

Has eliminar (borralo) el none

Gustavo Pérez Guerra

Rosa....eres una máquina. Muchas, muchas gracias. El problema ya está solucionado. Me traía de cabeza pues no daba con este dichoso problema de la cabecera para que se viera en Fire-Fox.
Échale un vistazo si quieres.

Ah! Me alegro mucho de que te guste mi web-blog. Soy el presidente de este club de vespas y la verdad es que nos va muy bien. Por lo del aire retro es un vicio que tengo. Me encanta todo lo que tenga que ver con los 50' 60' y 70'.

Lo dicho Rosa, muchas gracias.Te debo una de momento,je,je.

Un abrazo, Gustavo.

Anónimo

Gracias a ti Gustavo!

La solución era sencilla, algunos navegadores no interpretan el "none" pero los que lo hacen,lo toman como lo que es:

none= nada

je,je

grafica-gm

Hola Rosa... qué tal? ya me ves nuevamente recorriendo lo blog de punta a punta... jeje
Tengo una nueva consulta, es que coloqué en la cabecera del blog una imagen (con logo y demás datos) pero tengo problemas con el tamaño... Ya que no sé exactamente el tamaño en pixels que tiene ese sector de mi plantilla blogger finalmente la hice en 640 de largo x 180 de alto. Pero igualmente quedó mál ya que el alto se pasa de los bordes...
Yo trabajo con Corel y Photoshop asi que el tamaño puedo manejarlo desde el principio del diseño pero mi problema es que no sé que tamaño tiene mi plantilla...
Podrás ayudarme nuevamente???
Gracias,
Cecilia

Anónimo

Hola de nuevo Cecilia!!

He visto que tu imagen queda sobre los bordes del header. Puedes rehacer tu imagen para que quede mejor, o puedes modificar la cabecera facilmente sin tener que tocarla imagen.


Si la quieres como está, pero encuadradita, busca esta parte de la plantilla:

#header-inner {
background-position: center;
margin-left: auto;
margin-right: auto;
}

Y le añades antes de la llave de cierre esta línea:

padding:5px 5px 5px 5px;

Quedará así:

#header-inner {
background-position: center;
margin-left: auto;
margin-right: auto;
padding:5px 5px 5px 5px;
}

Usa la vista previa y si no se ha corregido, me avisas.

grafica-gm

Gracias Genia!!!!!!!!!!!!!! jeje
Cómo sabés tanto???? ;-))
Se arregló bastante bien... igualmente quedó casi perfecto pues quedan diferentes los márgenes der-izq con respecto al superior y al de abajo... Imagino que es por el tamaño de mi imagen... A tu criterio cuál sería el tamaño correcto que debería tener la imagen? Igualmente como te dije antes quedó mucho mejor al menos no se empasta con los bordes del header...
Muchísimas gracias!!!
saludos

Anónimo

Cecilia, no me atrevería a darte una medida exacta porque, depende de muchas cosas añadidas a la plantilla, Blogger responde como quiere, te digo esto porque en una copia de tu template los cambios que te di, a mi me quedaba exacta y a ti ya ves...

De todos modos puedes seguir probando así, modificando los padding (los 5) por un número mayor, lo haces de uno en uno, o sea, cambias el primero y usas vista previa, tu sola puedes ir consiguiendo centrarla.

Me atrevería a decir que podrías en todo caso probar dejando la imagen en 635 x 170px

Mninha

Llevo horas peleándome con la plantilla de mi blog porque no era capaz de poner una foto en la cabecera y centrarla. Y gracias a ti lo he conseguido en cinco minutos. Muchísimas gracias!

www.librosdebabel.com

Anónimo

Diego, tienes que perdonarme no había visto tu consulta hasta hoy. He visto en tu blog que aún no lo has conseguido, así que más vale tarde que nunca, je,je.

Busca esto en tu plantilla:

#content-wrapper {
margin: 0px 0px 0 5px;
}

Y justo debajo añades esto:

#header-inner{
padding-left:150px;
}

Ten en cuenta que si alguna vez cambias la imagen actual, y dependiendo del tamaño de la nueva, tendrás que modificar el "padding" que es la distancia de la imagen al borde del blog, desde su derecha.

Diego

Rosa,

Eres un ANGEL. Mil gracias.

Gianmarco.


PD: Ese otro Diego, el de "tky vgn" no soy yo.

Small Blue Thing

Hola, Rosa.

A mí, con la Rounders3, me va mucho mejor subir la imagen desde disco en lugar de alojarla en una tercera web. Un detalle para próximos experimentos :)

Gracias como siempre por las informaciones.

Anónimo

small, está explicación es para eso...si te entendí bien...Es para cuando la subes desde el PC directamente con la opción que da Blogger en Cabacera-Editar.

Anónimo

CRISTHIAN: Hola rosa no se si me podrias ayudar en este problema la cabecera de mi blog y el menu en el IE7 se ve normal pero cuando cambie a firefox la cabecera y el menu se pegan a la izquierda y no se puede centrar.
Te agradesco tu respuesta..

Anónimo

http://cabrerahighschool.blogspot.com/

Anónimo

Este es el blog por si quieres verlo http://cabrerahighschool.blogspot.com/

Anónimo

Anonimo, bueno Cristhian. ;-) necesitaría que me mandases por mail el código de la plantilla y a ser posible, el del menú. Gracias!

Anónimo

aca esta la plantilla y css menu plantilla cristhian

Anónimo

Cristhian, no he podido trabajar con tu plantilla ya que Blogger me da error y no me deja instalarla...
He mirado su html directamente y aunque no estoy segura del todo, me parece que el problema viene porque has aplicado fuera de sitio el flash de cabecera y el menú.
Si fuera yo intentaría pegar el código de ambos en un nuevo elemento HTML y arrastralo debajo de la cabecera, después dejaría la cabecera a cero para que el flash y el menú sustituyeran al header:
#header {
height:0px;
}
Ya te digo que no es seguro, pero podrías probar a ver...

Anónimo

Gracias ya lo solucione el problema no se si hecho lo que tu me decias ya que el codigo que habia visto en una pagina para insertar flash no lo habia copiado completo solo lo habia aumentado algunas cosas al header ahora lo he copiado todo y se soluciono. GRACIAS

Otra preguntita, por que en Firefox cuando en tras a ELEMENTOS DE PAGINA en blogger no se puede editar ninguna cosa. GRACIAS POR TU RESPUESTA

Anónimo

Me alegro que lo solucionaras Cristhian! Si que se puede... en realidad no cambia nada respecto a IE, bueno algo de su aspecto, pero se edita normalmente. A veces Blogger tiene algún fallo y durante horas e incluso días (a mi me ha pasado) no se puede, pero no tiene nada que ver con el navegador.

Anónimo

ok. gracias

Taty

Rosa, mi consulta es la siguiente. Cuando pono una foto en la cabecera con la herramiento de blogger me queda debajo del titulo y comentario del blog. Existe alguna manera de dejar la foto al lado izq y el titulo y el comentario al derecho? seentiende?

Anónimo

Tatiana, en tu caso lo más fácil sería modificar la imagen, o sea, hacer que el espacio gris de la izda fuera mayor. Me he tomado la libertad de modificarla yo para que así entiendas mejor a que me refiero, te dejo la url de la imagen para que pruebes, no se si quedará bien del todo, pero te servirá como orientación.

http://img90.imageshack.us/img90/3728/lklkhp0.jpg

Pablo Hernán Paul

Hola Rosa, he visto por acá que das solución a lo imposible! Hace un par de días que ando luchando con mi blog, la verdad es el primero q tengo y ando experimentando. Tengo problemas con la imagen del Header, he puesto una así:
#header-inner {
background:url(http://bp3.blogger.com/_-t3jbx6o3_g/Ry3xI4FtSBI/AAAAAAAAAAg/5RWekcmVpPo/s1600-h/header_pol.gif) bottom left no-repeat;
}
sin embargo no me aparece...sabés q ue puede estar fallando?
El blog es lafonia.blogspot.com
Gracias, Pablo

Pablo Hernán Paul

Rosa, nuevamente yo, acabo de ver esto http://elescaparatederosa.blogspot.com/2007/04/imagen-de-cabecera-opcion-de-blogger.html....
fue la solución a mis problemas. Aparentemente hay un problema con la url...cosas de internet
Gracias, tu ayuda es de lo mejor!

Anónimo

Pablo, veo que ya está todo correcto, al menos yo veo tu imagen ok.
¡Saludos!

ludithor

HOLA ...tengo un pekeño problema con el q espero me puedas ayudar.... yo aun no se casi nada de HTML pero intento mejorar mi blog (ludithor.blogspot.com)... puse un template q me agrada mucho empece q modificarlo... ahora me doy cuenta q no puedo centrar las imagenes y las entradas q tenia anteriormente quedaron desacomodadas ...... aki le dejo el link del template con el q estoy trabajando


link

Anónimo

ludithor ¿ya lo has arreglado? porque yo lo veo perfecto...

ludithor

No ..perodon pero se me olvido especificar ..y talvez te confundi con el link q puse ...

Mira la segunda entrada (Matsuri 2007) ..todas esas fotografias estaban centradas ... al cambiar el template kedaron asi

Anónimo

ludithor, supongo que el template anterior tendría el espacio del main (entradas) más ancho y al poner la nueva plantilla con el main más estrecho las imágenes se recolocan como pueden.
Tendrás que editar de nuevo la entrada e intentar colocarlas como quieres...

ludithor

Entiendo ..gracias

Lienzo tierra

Hola Rosa, otra vez reclamo tu ayuda. Ando perdidísima. Resulta que tengo una imagen en la cabecera de mi blog (plantilla Mínima Dark que ensanché hace tiempo según tus consejos). Todo bien, la imagen centrada tal cual el tamaño exacto. El problema es que al poner el título encima de la imagen, se me desplazó la imagen a la izquierda.
Le quito el título y me vuelve a centrar la imagen, pero ya con un tamaño más pequeño que el anterior, lo cual queda fatal.
¿Por qué al poner el título del blog me la desplazaba a la izquierda? ¿Por qué al quitarlo me la ha cambiado de tamaño?
Supongo que el tamaño original de la foto es el que tiene ahora ¿no?. Entonces ¿por qué antes salía más grande? ¿Qué me aconsejas? Espero no abrumarte con tanta pregunta.

Anónimo

Mamen, pues sintiendolo mucho tengo que contestarte lo mismo que a demasiada gente últimamente...
Blogger está teniendo un bug (error) con las cabeceras subidas con su sistema, se cortan, no suben, no puede quitarse el título...en fin, de todo...
Siento decirte que no queda más que esperar o intentarlo a mano desde la plantilla, lo cual no siempre da el resultado esperado...

Lienzo tierra

Pues muchas gracias por contestarme de todos modos Rosa. Veré a ver cómo me las apaño para que quede mejor. ¡¡Un saludo!! Menos mal que siempre estás ahí cuando te necesitamos. Eres como la mamá de todos, jaja.
Besos!

LA COMUNA

hola tengo una plantilla que me da el espacio de la cabecera mas pequeño que todo el cuerpo del blog lo que hace que la imagen de la cabecera este a la izquierda.

¿como hago para ampliar el espacio de la cabecera?

lacomuna.blogspot.com

Anónimo

La comuna, yo no veo tu cabecera hacia la izquierda...lo que si veo es que la imagen no es lo bastante grande y no ocupa todo el ancho del blog...

Anónimo

Hola Rosa, paño de nuestras lágrimas, cómo estás??
Bueno te enred un poco más en este tema... He intentado centrar la imagen como dices aquí pero no encuentro en mi plantilla el /* Blog Header------ */: ni el #content-wrapper { que le contestatste a Diego.
Me sale la imagen a la derecha. miarala aquí: http://losherederosdemartinmcfly.blogspot.com/

La opción fácil sería que me la ajustara automáticamente blogger pero quiero pelearme más y ponerla lo más grande posible, y de camino darte un poco la lata.
A ver que me dices.
Salu2

Anónimo

Deadius, tu problema es ni más ni menos que la imagen es mayor que la capacidad de la cabecera y esta se "desborda" a un lado.

Tu imagen mide 830 pixeles de ancho, así que tienes que poner esa misma medida en el header, busca esto:
#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid #000000;
}

En width pon 830 en lugar de 660.

Anónimo

Rosa, a eficiencia no te gana nadie. Eres la repera!!!!
Muchas gracias por tu ayuda y felicidades por lo de "El jueves".
Merece que lo pongas en un marco y lo cuelgues en un sitio privilegiado.
Lo dicho, Felicidades

Salu2

Anónimo

Deadius, veo que ya está el header en su sitio :D

Muchas gracias!

Pelayín

Hola

No soy capaz de sustituir el título y la descripción de mi blog. ¿Me puedes ayudar?

Anónimo

Pelayín , sustituirlo porque?? explícate algo más concretamente. :-)

Anónimo

Anónimo, tienes dos opciones, o hacer la imagen de 660px de ancho que es lo que ahora tiene tu header; o aumentar el ancho del header (que si se puede), para hacerlo localizas esto en tu plantilla:
/* Header
-----------------------------------------------
*/
#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid #333333;
}

Donde dice 660px pones 760px o sea, el ancho de la imagen.

Anónimo

benitez, mira como quitarla aquí:
http://elescaparatederosa.blogspot.com/2007/01/ocultar-que-no-quitar-la-barra-de.html

Cristal United F.C

Rosa, en mi plantilla no aparece el código
/* Blog Header------ */: lo busque por todos lados y no esta!!! tengo la plantilla TicTac, la comun (cabezera verde)... ademas lo busque con ctrl + f en firefox (buscador de palabras en la pagina visitada) y no esta!

ayuda!!

muchas gracias...

Anónimo

Jairo, solo era una referencia...ponlo después de /* ---( header and site name )--- */

Ramón Guinea

Hola, quiero cambiar la alineación del texto de la cabecera de mi blog (utilizo el propio de blogger). ¿Cómo puedo hacerlo?.

Gracias y un saludo

Anónimo

Ramon, supongo que es para "Maabarismos con Antorcha" ...
Tienes que modificar en esta parte:
#header h1 {
margin:0;
padding:10px 30px 5px;
line-height:1.2em;
font: normal bold 200% 'Trebuchet MS',Verdana,Arial,Sans-serif;
}
Los valores en padding, ve cambiando esos valores hasta dar con la posición adecuada.

Ramón Guinea

Gracias, Rosa, pero aún no entiendo donde debo introducir eso datos. Decntro de diseño / edición de HTML no veo nada similar a lo que dices

Anónimo

Ramon, en tu panel de Blogger en la parte donde se ve todo el código completo de la plantilla, ve bajando y mirando dentro de ese código y verás eso que te índico.
Fijate en la línea que dice:
padding:10px 30px 5px;

Prueba ahí distintos valores, por ejemplo aumenta el 30 a 60...vas probando y usando la vista previa.

Soldier

Genial es lo que estaba buscando desde hace mucho. Me ha servido del todo

Gracias ;)
Saludos

fresaediciones

Rosa, hace ya un tiempito que visito casi a diario tu genial blog ya que necesitaba hacer uno y no tenía ni idea de cómo hacerlo. Gracias a tus claras y pacientes explicaciones lo he conseguido aunque aún me queda mucho por hacer y aprender. Recurro a tus conocimientos y a una respuesta personal pues me estoy volviendo loca con la cabecera del blog. Le incluí un logo con texto desde mi ordenador siguiendo tus indicaciones pero no logro centrarlo, para que no quede esa distancia en el borde. No soy capaz de encontrar las palabras que tu das para hacerlo, no logro encontrarlas y tengo temor de tocar algo que no es y empeorar la situación. Podrías ayudarme por favor? Disculpa la molestia pero no se qué más hacer. Desde Uruguay te mando un gran abrazo y muchas gracias por estar y enseñar! Dora.
Por si quieres darte una vuelta te dejo la dirección: http://fresaediciones-uruguay.blogspot.com

Anónimo

fresaediciones, no es ninguna molestia cielo :D

Dentro de tu panel ve a Edición HTML, ahí donde ves todo el código completo de la plantilla.
Empieza a "bajar" por el código hasta que veas esto:
/* Header */

Justo debajo de eso pega estas líneas:
.header .widget {
padding: 0 20px;
}

Usa la vista previa a ver como se ve antes de guardar los cambios.

fresaediciones

Siii, lo logré!! gracias atí Rosa que eres un sol, esto me tenía loca, tengo muy escasos conocimientos sobre todas estas cosillas y aveces cuando no le pego con algo que me lleva horas, me desanimo totalmente. Gracias a Dios que me permite toparme con gente como tú que tan generosamente comparte su conocimiento. Mil gracias por la ayuda, seguramente más tarde te molesto con algo nuevo. Un beso enorme, Raquel

La Verdad Si Importa

:) No te imaginás cuanto me has ayudado Rosa.
Te enlazo desde mi joven blog.
Todavia esta en construcción y yo en aprendizaje.
GRACIAS ROSA!!!
Xavier

Anónimo

Xavier Ya veo que recién empiezas :D
¡Mucha suerte!

Anónimo

Hola rosa quisiera saber si de casualidad no te sabes el codigo para poner una imagen de fondo flotante a mi blogger.

Anónimo

benitezanimado Una cosa es una imagen de fondo:
http://elescaparatederosa.blogspot.com/2007/01/imagen-en-el-fondo-de-pgina-blogger.html

Y otra cosa es una imagen flotante:
http://elescaparatederosa.blogspot.com/2007/03/imagen-flotante-en-blogger.html

Lena

Hola, por ahora no tengo habilitado blog actualmente pero antiguamente me he peleado bastante con ellos... sólo tengo una duda de la imagen de cabecera. Centrarla está muy bien, pero, es posible algún truquillo para que se redimensione según las pulgadas del monitor que estés usando? Es decir, que si yo tuneo la cabecera desde mi monitor de sobremesa, para que quede perfecto, luego en el portátil sale inevitablemente de pantalla... y si lo hago desde el portátil, luego la imagen queda muy pequeña la verlo en el monitor de 19". Estoy probando con la minima stretchy, porque me gusta que el blog ocupe toda la pantalla... el texto sí que se ajusta según en qué monitor estés, pero las imagenes... es posible?

espero haberme explicado. Pasaré de nuevo por aquí para aprender más truquillos!!!

Anónimo

Lena No, eso es imposible...no podemos adaptar una imagen a todas las resoluciones.
Podríamos usar una intermedia, digamos, pero "escogerla" y "estirarla" a voluntad va a ser que no...

Podrías colocar una imagen más pequeña, por ejemplo de 700px y centrarla, después darle un color de fondo a la cabecera igual al del fondo de la imagen, para lograr un efecto óptico parecido a lo que dices...

Es lo que yo uso aquí...una imagen de 750px y otra aplicada en el body del mismo color de fondo que la del header y que se repite a lo ancho de la pantalla.
Por cierto que tengo en borradores la entrada que explica paso a paso como hacerlo, en breve la subiré :D

Lena

Gracias Rosa, esperaré esa entrada para que me quede perfecccto jeje. Ya he visto que aquí usas ese truquillo y se ve estupendamente en varias resoluciones (bueno, lo más pequeño que puedo probar es un monitor de 12 y queda de lujo).
Gracias por la rápida respuesta

Anónimo

Lena Mira por donde se que se ve bien en uno de 12 :D
No tardaré en subirla ;)

Anónimo

gracias! :D esto sirvio de mucho ^^

EdCharrúa

Antes de nada pido perdón si alguien ya ha escrito algo parecido, pero son tantos comentarios que no los he leído todos. Yo hace tiempo que uso lo siguiente (sé que es bastante chapucero pero me va bien ;) )... Añadí en la parte de CSS lo siguiente:

img { display: block; margin: auto; }

Problema: afecta a todos los tags img, pero en mi caso a las que quiero les añado style="float:right" o left.

Anónimo

EdCharrúa No es que sea chapucero, es que como tu dices afecta a todas las imágenes y es mayor el perjuicio que el beneficio...en mi opinión.

EdCharrúa

Rosa creo que al fin sí di con una solución más afortunada que la que comentaba anteriormente. Se trata de en vez del código que decía antes poner el siguiente:

#header img {
margin-$startSide: auto;
margin-$endSide: auto;
}

Espero que esto nos sirva a todos, saludos y gracias.

Anónimo

EdCharrúa Que bien que te funcionó, aunque depende de la plantilla no en todos los casos servirá solo así...
Gracias por compartirlo.

Arturo Herrera ''Chiko Burned''

Por favor ayudame, no logro dar con el resultado y googleando di con tu web que se ve muy buena, solo que en el mio no aparece nada de lo que mencionan anteriormente

solo aparece esto:

/* Header
-----------------------------------------------
*/

#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}

Anónimo

Arturo No se trata en tu caso de centrar, no puedes usar una imagen en tu plantilla mayor de 660px de ancho que es lo que tu cabecera actual te permite.

Maxon

Hola Rosa soy Maxon de nuevo, perdon por la molestia y por preguntar algo que no tiene que ver con este post, pero ya no se que hacer!

Quiero poner sitemap en mi blog pero cuando pongo el codigo que me da google me da error, lei muchos blog de ayuda y dicen que lo ponga debajo del head pero no anda

Disculpa la molestia y muchas gracias!!

recetas-maxon.blogspot.com

pd: perdon si repito los mensajes es que no los manda

Anónimo

Maxon Yo lo he colocado justo después del título, es decir, después de esto:
<title><data:blog.pageTitle/></title>

Si te da error, asegúrate que la línea del sitemap lleve la barra /de cierre al final.

Maxon

Hola Rosa, Muchicimas realmente eres una genia en 5 segundos me resolviste algo con lo que me estaba volviendo loco!

Muchas gracias

Arturo Herrera ''Chiko Burned''

Rosa muchisimas gracias!!!!
en serio, si no hay seguiria.
Ahora lo que no se es como cargar una plantilla a mi blog, la baje esta en .zip pero como la subo?
En esta pagina hay muchas y muy buenas.
http://mashable.com/2007/09/13/blogger-templates/

Espero y me puedes ayudar, gracias!!!
buen dia.

Anónimo

Arturo Si está en .zip tienes que descomprimir el archivo con un programa comopor ejemplo el WinRAR (puedes descargarlo gratuito, en Google lo encuentras fácil) y después subes ese archivo desde el "Examinar" de Edición HTML de tu panel.

Arturo Herrera ''Chiko Burned''

Si claro, tengo Win RAR descomprimir todos los archivos el problema es que al parecer el blogger no da la opcion de subir archivos multiples, solo te deja subir uno que es el XML pero en los archivos que se encuentran en el .ZIP no hay ninguno, no sabes en que servidor o como se suben. De hecho si se muy poco de programación de HTML, trabaje con Dreamweaver incluso eh ido a varios congresos y me eh ganado 1ro y 2do lugar, pero pues obvio tu eres super inteligente y sabes mas que yo, graxias por tu tiempo y ayuda.

Anónimo

Arturo En las páginas que proporcionan plantillas suelen aportar el archivo en .xml pero en algunas ocasiones este puede venir en formato de texto .txt por ejemplo, entonces se trata de copiarlo y pegarlo directamente en Edicion HTML después de haber borrado por completo todo el código de la plantilla anterior.

Arturo Herrera ''Chiko Burned''

Lo voy a intentar gracias por tu ayuda eres la mejor!!http://3.bp.blogspot.com/_8PJ-pgoBhWQ/SV-CcgxzpDI/AAAAAAAAF64/3jqIhdLhRas/s400/Nueva+imagen.PNG

Cece

Hola Rosa,

Estoy tratando de agregar una imagen dentro de la cabecera. Es una imagen más pequeña de la cabecera, y quiero que se vea alineada a la derecha, con el nombre y la descripción del blog a la izquierda. Pero cuando quiero alinear la imagen al borde derecho, también me alinea el texto, y queda el texto sobre la imagen, todo a la derecha. Cómo puedo hacer para solucionarlo? Gracias!

Anónimo

Cece Veo en microplancton que lo conseguiste...

Angela Beatriz Marriaga

HOLA ROSA, pues he hecho lo que decis pero no centra la imagen del blog, te dejo mi blog para que mires

http://misanotacionescontables.blogspot.com

Anónimo

Beatriz Marriaga No lo entiendo, la verdad... tu header está perfectamente centrado.

Unknown

Gracias Por el aporte

frantxisku

Hola Rosa...

Estoy usando la plantilla Tekka de blogger... pero no consigo centrar la imagen insertada bajo el título... No me aparece * Blog Header------ *...

Negrevernis

Hola, Rosa.
Hace algún tiempo que visito tu blog y aplicado algunas cosas tuyas.
Ahora me estoy peleando con algunas cosas de mis blogs; la más inmediata, que no logro centrar las imágenes de las cabeceras. En un caso es una Thisaway y en otro una Rounders 2; he puesto lo que indicas aquí en la Rounders pero la imagen sigue ahí, descolocada. La cargué hace mucho y no recuerdo los pixeles de cada uno.
Te dejo la url por si lo necesitas:
www.oculimundi.blogspot.com
www.oculimundibiblioteca.blogspot.com

Gracias de antemano :D

frantxisku

Ya...

Conseguí centrar "toda la cabecera" (texto incluido) con lo siguiente...

#header-inner {
background-position: center;
margin-left: auto;
margin-right: auto;
padding:5px 5px 5px 5px;
}

...y creo que, de momento me va bien...

De hecho, estoy probando... Es un blog de viaje... Algún consejo¿?.. Es bien sencillo...

Saludos y ... Gracias por abrir "esta ventana" al conociemiento...

Anónimo

Pancho La plantilla Tekka es distinta... está construida en porcentajes, con lo que se adapta a la pantalla de quien la ve... es mala idea tratar de centrarla ya que en algunos pcs se vería cortada entonces... de ahí que venga a la izda en el diseño original.

Negrevernis

Hola de nuevo, Rosa.

He estado peleando de nuevo con la imagen de la cabecera de la Rounders2. La imagen tiene 800px, ya la he encontrado por la red, pero se desborda del margen derecho.
No encuentro en header wrapper lo que dices de width, sino esto:
#header-wrapper {
background:$titleBgColor url("http://www2.blogblog.com/rounders2/corners_cap_top.gif") no-repeat $startSide top;
margin-top:22px;
margin-$endSide:0;
margin-bottom:0;
margin-$startSide:0;
padding-top:8px;
padding-$endSide:0;
padding-bottom:0;
padding-$startSide:0;
color:$titleTextColor;
}

¿Qué puedo hacer?:S

Anónimo

Negrevernis En ambas plantillas el problema es la imagen... las dos imagenes miden más que el ancho del header, con lo que siempre se saldrán.
Lo que debes hacer es usar una imagen de 740px aproximadamente, sino por muchos códigos que añadas no lograrás nada.

Anónimo

Pancho Genial...:D

Rob X

Hola Rosa!! he seguido el tutorial al pie de la letra, el problema es el siguiente: La cabecera de mi blog esta situada a la izquierda en firefox y en el centro en explorer, q podria hacer para corregir este error?? hay algun código que pueda utilizar o alguna otra salida?

Rob X
http://transformersg.blogspot.com/

Gracias

Anónimo

Rob XAl pie de la letra no... en la entrada digo: "En width: 520px; pondremos el tamaño en horizontal que tiene nuestra imagen en pixeles." y tu lo has dejado en 520 cuando tu imagen es de 640px...

ERALDO

Hola Rosa:
cre que hace bastante meses no he visitado tu escaparate, que esacaparate deberias de ponerle el "MalldeRosa" por lo imponente de tus aportes.

Solo pasaba ha felicitarte e invitarte a que veas unos de mis blog que en la cual he aprobechado unos de tus consejos ( el menu)
http://gratisbajadas.blogspot.com/
Yo empese apenas sabiendo navegar y con un poquitin de estudios y consejos como los tuyos estoy logrando esto, pero como tu sabes uno contra más sabe o tiene más encuentra cosas que hacer.
Quiero hacer un aporte a Rob X: en vez de poner width:520px cambia por width:100%; y asi te aseguraras de que cualquiera que sea la resolucion de pantalla del usuarios siempre ocupe el ancho de pantalla, y abajo de width es conveniente poner lo siguiente para asegurarse de que se sentre en la pantalla y en la página: position:center;
Gracias y sigue asi

Santi

Genial, grácias !!

Rosa

ERALDO ¡Muchas gracias! :D

Dr. Page

Hola Rosa. Quisiera que me ayudaras, si yo quiero que la imagen de la cabecera sea mas estrecha, que parámetro debo modificar, probé pero no se modifico con ninguno.

Rosa

Dr.VictorPuedes estrechar el header desde el código, pero eso no estrechará la imagen, sino que ocultará parte de ella... para hacer la imagen más estrecha, hay que hacer eso precisamente... estrechar la imagen con un programa de edición de imágenes...

@ManelFdez

Rosa, antes de nada agradecerte tus respuestas y comentarios porque son de gran ayuda a todos. :) Estoy intentando insertar una imagen en la cabecera utilizando el gadget que blogger pone a nuestra disposición. El problema es que deja la imagen completamente a la izquierda y me gustaría dejarla en la derecha de la cabecera. Además, no encuentro los códigos que a otros bloggers les muestras. Supongo que debe ser cosa de la plantilla que utilizo. Espero tu respuesta. Saludos.

Anónimo

La Classe de Francés No encuentras los códigos porque tu plantilla es del nuevo diseñador de Blogger...
No puedo ayudarte... aún no me he "metido" con el código de las nuevas plantillas, entre otras cosas porque aún están en pruebas y cosas como esa que comentas de subir la imagen no van de forma correcta... además de alguna otra cosa que he observado y que tendrán que corregir...

Anónimo

hola rosa :) pero no se donde esta esa linea de blog header me puedes poner el parrafo a y otra cosa lo mio es como la linea de despedida del blog y yo lo quiero centrar gracias rosa, laura.

:)

Anónimo

laura Lo colocas antes de ]]></b:skin> y ya está...

lo de "la linea de despedida del blog" ¿es una pregunta?, si es así matiza eso porque no entendí...

Forojm

Hola Rosa, este es nuestro blog http://www.forojm.blogspot.com/ , llevo un montón de tiempo intentando que me quede bien la cabecera y no me sale. Cuando centro la imagen como dices, queda centrada en el ordenador donde lo hago pero al verlo desde otro no me sale. Entonces pensé que otra opción sería poner la imagen en la derecha y el título en la izda pero tampoco me sale. Por favor puedes ayudarme? Me gustaría:
1- Ver si puedo centrar la imagen para que se vea así desde todas partes
2- Qué tendría que hacer para poner la imagen a la derecha y en la parte de la izda poner el titulo en grande y vertical

Gracias por tu colaboración

Anónimo

Forojm No es la imagen, sino la plantilla... esa plantilla está diseñada en porcentajes, es decir, la mires del PC o resolución que la mires, ocupará el total del monitor, por eso la imagen está colocada a la izda, si la centras tendrías el problema que dices siempre.

Forojm

Rosa, perona que te moleste otra vez, estoy aburrida porque no consigo que se vea bien la imagen de la cabecera http://www.forojm.blogspot.com/ he probado ponerle a la izquierda un rectángulo del mismo color para agrandarla horizontalmente y así que quede más centrada pero me sigue saliendo mal. Me has dicho que el problema es la plantilla que está configurada como porcentajes, pues en este caso qué me aconsejas que haga con la imagen para que se vea bien desde cualquier ordenador? Por favor echame un cable!!!
Gracias

Anónimo

Forojm En esa plantilla para que se vea el header correctamente en cualquier resolución, ha de ir obligatoriamente donde está, a la izquierda...

Ionixis
Este comentario ha sido eliminado por el autor.
Anónimo

IonixisPara usar la cabecera a la izquierda harían falta unos cambios de diseño y la imagen del header pasaría a estar en body... mira, me he permitido hacerlo en un blog de pruebas para que veas... yo creo queda muy original y lindo:D si te gusta así me lo dices y ya te digo que has de modificar.

http://cocinaparatodos-rosa.blogspot.com/

Ionixis
Este comentario ha sido eliminado por el autor.
Anónimo

Ionixis No entiendo nada la verdad... mira si esta entrada te ayuda para hacer lo que quieres:

http://elescaparatederosa.blogspot.com/2009/05/header-con-ancho-total.html

Anny

Hola Rosa! Siempre entro a tu Blog pero es la primera vez que comento. Y quiero hacerte una consulta. Verás, en la cabecera de mi plantilla hay un marco en el cual se supone que quiero poner una foto de mi hijo, pues soy una mamá bloguera, pero no puedo hacerlo. Desde editar cabecera es imposible pues la foto no queda exactamente dentro del marco.
Ojala me explique bien, en todo caso te agradeceria mucho si visitas mi blog y veas exactamente el lugar donde quiero poner una fotografía. Por ahora solo se visualiza el titulo de mi blog y la descripción.
Ojala puedas ayudarme.
Anny (la mama de "Mi hijo unico" Blog)
http://bebeunico.blogspot.com

Anónimo

Anny El problema en el caso de tu plantilla, es que ya tiene imagen en el header, concretamente es esa del marco y todo lo que está desde la linea de puntos hasta arriba, eso es la imagen de cabecera.
Para añadir una de tu hijo ahí, lo mejor sería descargar esa imagen de cabecera, añadir la foto de tu hijo con un programa de dibujo en el marco y volver a subir la cabecera completa.

Anny

Hola Rosa! Gracias por contestarme. Eso es lo que voy hacer. Un beso.

Kairi03

Hola Rosa, descubrí tu blog hace un par de días y estoy siguiendo tus pasos poquito a poco. Para el tema de la cabecera, tengo puesta la plantilla de Scribe de Blogger, y no encuentro por ninguna parte el cógido css que pones, he probado otras cosas pero no me viene :S espero que me puedas ayudar, porque me gustaria tenerlo centrado el logo.

Un saludo!!

Anónimo

Kairi03 El código puedes colocarlo antes de ]]></b:skin>

APU

Hola Rosa.
Primero felicitarte por tu excelente blog y la ayuda que ofreces a los inexpertos.
No sé como centrar la cabecera de mi blog porque no encuentro las líneas de código en mi plantilla que indicas. ¿Puedes echar una ojeada a mi blog y decirme que puedo hacer?
Muchas Gracias! Un abrazo.

Sig:

Hola Rosa, muy valioso tu blog. Te escribo porque hasta ahora no puedo centrar la imagen de la cabecera en mi blog. Espero puedas darme algunas luces, te mando la dirección: http://mislobosdelsimbolo.blogspot.com/
desde ahora muchas gracias por la respuesta

Anónimo

Sig: Antes de nada, procura usar una imagen que no hayas tomado de algún lado de forma directa...

Anónimo

APUVeo que lo has conseguido. :D

Iván

GRAAAAAACIAS!! :D

Unknown

Muchas gracias!! Esta entrada no sabes como me ayudo! Eres mi salvacion!! Si algun dia tienes tiempo de pasarte por mi blog hazlo xfa: www.dulcesadicciones.blogspot.com
Muchisimas gracias en serio!! :D

Sara L.

Lo apliqué a mi blog ^^
Visitadme :$
http://alejatedemiporfavor.blogspot.com/

Sara L.

Ah! Y mil gracias por la ayuda :D

NiÑa RaTa

jummm me he leido casi todos los coments buscando un caso similar al mio ...en muchos no aparecen las mismas cosas por la plantilla original que se utiliza ...no tengo ni pajolera idea de cual utilizo yo :S jajaj al final del blog pone"etereo plantilla de jason morrow" asi que ......ennnfinnnnnnn que a mi en los codigos no me pone "blog header" solo pone "header " a secas y luego
.header-inner {
padding: 27px 0 3px;
}

.header-inner .section {
margin: 0 35px;
}
cambio los valores pero en vista previa NO SE VE NINGUN CAMBIO!!jummmm ...me resigno y simplemente me busco la vida para que mi imagen cumpla con 140 px :(

PD:aunque este frustradilla con esto tu blog es increibleeeeee:)

NiÑa RaTa

uis ..kise decir 740 px no 140 jejej

Anónimo

RaTa...(Oó) Tu plantilla es de las nuevas, así que esto no te sirve... y tampoco te servirá modificar nada, tendrás que colocar una imagen de la misma medida que la cebecera si...

NiÑa RaTa

ok !!jummm muchas graias por aclararme sino ya me veia cortando y pegando codigos hasta el dia del jucio final y sin que valiera de nada.saludossssss:)

Mokte

Muchísimas gracias, ésto lo estuve buscando durante 4 dias continuos hasta que encontré tu post.

Gran ayuda +1000

Juanma Gemio

He encontrado la página por casualidad y me ha resuelto el problema de la cabecera. Muchas gracias.

Pachiarts

Gracias por la ayuda..Por fin centre la imagen!!!
Me encanta tu blog.

Paola Burgos P.

Hola Rosa como estas.
Me estoy cabeceando con la imagen de la cabecera de este blog:
http://chiloe-encantado.blogspot.com/
esta hecho con una plantilla antigua MINIMA que me encanta usar porque se pueden personalizar mucho...pero no puedo centrar la famosa foto de cabecera ya que alguien le metio mano al codigo que estaba impecable hasta ayer.
Mi nombre es LINCOLN ANDRADE, y le estoy arreglando su blog a mi amiga Paola Burgos.
Dame alguna buena idea para no perder tanto tiempo buscando como centrar esta cosa por favor.
Gracias de antemano.

Anónimo

Paola Burgos P. No entiendo... yo veo todo centrado ahí...

Nelson Lombardo

Hey gracias, me ayudo mucho. Saludos.

Publicar un comentario

Si vas a dejar una consulta, procura tener habilitado tu perfil en Blogger o deja la url del blog a revisar (no enlace).

Los comentarios están siendo moderados.

:) :(( :( :P :D :$ ;) :I :X :O |O :S