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!
163 comentarios:
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!
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?
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. ;)
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!!
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,
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
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é...
Ok. como voy a hacerlo otra vez. dime si quieres alguna medida en pixels o algo.
ok?
Como está, está perfecta, solo quitale el blank ese, je,je.
Y Gracias!
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 :)
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
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í...:(
Enpro, gracias, te visitaré! ;)
ok rosa espero tu visita :) y me dices que te pareció mi Blog :D
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
querida rosa:
¿donde puedo cambiar la distancia entre la imagen del titulo del blog y las entradas?
gracias.
Soundtrack, ¿que quieres decir con que se "transparenta"???
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!
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
Soundtrack, ¿has probado a cambiar el color del texto? Si el fondo es oscuro, podrías poner el texto blanco, por ejemplo.
Gracias por la respuesta Rosa. Probaré a hacer un resize de la simágenes a ver que tal.
Gracias, eres un crack!
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.
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...
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!
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 :(
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í?
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.
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...
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
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
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.
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
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
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.
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
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
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
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.
Rosa,
Eres un ANGEL. Mil gracias.
Gianmarco.
PD: Ese otro Diego, el de "tky vgn" no soy yo.
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.
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.
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..
http://cabrerahighschool.blogspot.com/
Este es el blog por si quieres verlo http://cabrerahighschool.blogspot.com/
Anonimo, bueno Cristhian. ;-) necesitaría que me mandases por mail el código de la plantilla y a ser posible, el del menú. Gracias!
aca esta la plantilla y css menu plantilla cristhian
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...
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
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.
ok. gracias
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?
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
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
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!
Pablo, veo que ya está todo correcto, al menos yo veo tu imagen ok.
¡Saludos!
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
ludithor ¿ya lo has arreglado? porque yo lo veo perfecto...
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
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...
Entiendo ..gracias
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.
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...
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!
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
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...
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
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.
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
Deadius, veo que ya está el header en su sitio :D
Muchas gracias!
Hola
No soy capaz de sustituir el título y la descripción de mi blog. ¿Me puedes ayudar?
Pelayín , sustituirlo porque?? explícate algo más concretamente. :-)
Hola soy benitezanimado, pues es que hize una firma en fireworks de 760 pixeles x 130 pixeles, pues lo agrege a mi blogger, pero la imagen se sale de la cabecera, segun mi experiencia, solo he podido cambiarle el tamaño de la cabecera, pero solamente el ancho de arriba hacia abajo, pero de izquierda a derecha no se puede, no se si me podrias orientar, espero vivites mi blogger `para que te des una idea de lo que me esta sucediendo, saludos, espero con tu apoyo, nos vemos.
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.
Hola rosa no sabia que te llamabas rosa, pero bueno dejame decirte que tu respuesta fue de gran ayuda, mi blogger esta perfecto, gracias por la ayuda, ya estaba desesperado, pero bueno te felicito por tu foro, ahora queria saber que onda con los comentarios ultimamente, mi blogger, parece que nadie lo ve, o que onda, pero bueno espero veas mi blogger, para que veas el trabajo que acabas de hacer, saludos.
por cierto como le quitas la barra de navegacion, no se pero es que la gente es repayasa, y vayan a querer reportarme, los bien sensibles, bueno eso es todo, buena suerte.
benitez, mira como quitarla aquí:
http://elescaparatederosa.blogspot.com/2007/01/ocultar-que-no-quitar-la-barra-de.html
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...
Jairo, solo era una referencia...ponlo después de /* ---( header and site name )--- */
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
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.
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
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.
Genial es lo que estaba buscando desde hace mucho. Me ha servido del todo
Gracias ;)
Saludos
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
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.
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
:) 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
Xavier Ya veo que recién empiezas :D
¡Mucha suerte!
Hola rosa quisiera saber si de casualidad no te sabes el codigo para poner una imagen de fondo flotante a mi blogger.
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
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!!!
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
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
Lena Mira por donde se que se ve bien en uno de 12 :D
No tardaré en subirla ;)
gracias! :D esto sirvio de mucho ^^
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.
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.
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.
EdCharrúa Que bien que te funcionó, aunque depende de la plantilla no en todos los casos servirá solo así...
Gracias por compartirlo.
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;
}
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.
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
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.
Hola Rosa, Muchicimas realmente eres una genia en 5 segundos me resolviste algo con lo que me estaba volviendo loco!
Muchas gracias
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.
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.
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.
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.
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
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!
Cece Veo en microplancton que lo conseguiste...
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
Beatriz Marriaga No lo entiendo, la verdad... tu header está perfectamente centrado.
Gracias Por el aporte
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------ *...
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
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...
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.
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
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.
Pancho Genial...:D
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
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...
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
Genial, grácias !!
ERALDO ¡Muchas gracias! :D
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.
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...
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.
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...
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.
:)
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í...
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
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.
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
Forojm En esa plantilla para que se vea el header correctamente en cualquier resolución, ha de ir obligatoriamente donde está, a la izquierda...
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 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
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
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.
Hola Rosa! Gracias por contestarme. Eso es lo que voy hacer. Un beso.
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!!
Kairi03 El código puedes colocarlo antes de ]]></b:skin>
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.
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
Sig: Antes de nada, procura usar una imagen que no hayas tomado de algún lado de forma directa...
APUVeo que lo has conseguido. :D
GRAAAAAACIAS!! :D
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
Lo apliqué a mi blog ^^
Visitadme :$
http://alejatedemiporfavor.blogspot.com/
Ah! Y mil gracias por la ayuda :D
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:)
uis ..kise decir 740 px no 140 jejej
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...
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:)
Muchísimas gracias, ésto lo estuve buscando durante 4 dias continuos hasta que encontré tu post.
Gran ayuda +1000
He encontrado la página por casualidad y me ha resuelto el problema de la cabecera. Muchas gracias.
Gracias por la ayuda..Por fin centre la imagen!!!
Me encanta tu blog.
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.
Paola Burgos P. No entiendo... yo veo todo centrado ahí...
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.
Comentar con el formulario antiguo