Imagen en la cabecera del blog
Hola algunos visitantes me han preguntado en estos días, cómo se hace para colocar una imagen que la haga de "logo" en la cabecera principal de un blog en Blogger.
No sé si existirán otras formas, pero la que utilizo yo es retocando un poco el apartado CSS (hojas de estilos en español, se trata de códigos que permiten personalizar el diseño de cualquier página web y si bien se pueden integrar con html y xhtml la forma en que se escriben no son iguales, no son el mismo lenguaje; las CSS definen diseño, no contenido.) del código HTMl de Blogger.
Es muy sencillo, ingresá a "Plantilla" > "Edición de HTML" y busca lo siguiente en el código de Blogger:
#header {
width: 760px;
margin: 0 auto;
background-color: $headerBgColor;
Luego, debajo de la última línea, insertá esto:
background: url(http://loquesea.com/imagen.jpg) center;
El código quedará así (señalo con negrita el cambio que hicimos):
#header {
width: 760px;
margin: 0 auto;
background-color: $headerBgColor;
background: url(http://loquesea.com/imagen.jpg) center;
border: 1px solid $headerBgColor;
color: $headerTextColor;
padding: 0;
font: $headerFont;
}
Su usas la plantilla Denim como yo, el mejor tamaño de imagen es de 760 pixeles de ancho por 130 de alto. El archivo puedes alojarlo en hospedajes gratuitos de imágenes (ej: Photobucket).
PD: Si lees esto baby, me equivoqué en el dato que te pasé la otra vez en los comentarios, ya que el código que necesitamos va abajo de $headerBgColor; y no al lado, jeje.
Actualización: Blogger tiene soporte nativo para agregar banner, logos o fondos en las cabeceras en el diseño. ¿Cómo? lo respondí aquí debajo.
28 comentarios:
Pues muchas gracias por la PD, jeje, aver si saco tiempo un dia de estos y me pongo con ello de lleno, que últimamente ando como para postear lo que puedo y justo justo! (y si te digo la verdad, todavia tengo por elegir que imagen meter ·_·U) Gracias de nuevo por ser tan atento :) y un saludo.
Muy interesante el MINItutorial para poner una imagen en el HEADER.
Oye por cierto, estoy mirando que se bajo tu SIDEBAR, ojala puedas arreglarla pronto.
SALUDOS!
Hola José:
No me había dado cuenta lo de la sidebar, ya que uso Firefox y allí se ve correctamente, pero en Explorer sucede lo que vos decís. Vamos a ver como solucionar esto. Muchas gracias por avisar.
Saludos.
Hola,muy buenas
Intentando colocar una imagen en la cabecera de mi blog he llegado hasta el tuyo, y a esta entrada donde lo explicas
Lo único que pasa es que no sé como hacer que el tamaño de mi imagen se ajuste al tamaño que indicas como ideal (porque utilizo la misma plantilla)
Si pudieras ayudarme te lo agradecería
un abrazo
Hola José:
Entré a tu blog Discursiones y veo la imagen perfectamente bien tanto con Mozilla Firefox como con Internet Explorer. Posiblemente lo que ocurre es que al agrandar o achicar la fuente del título, la imagen se repite porque aumenta el alto de la cabecera, y por eso aparezca mal posicionada. Intenta disminuir un poco el tamaño de la fuente del título y la imagen no se repetirá.
Igualmente estoy viendo que para CSS hay un atributo llamado "no repeat" que sirve para que la imagen no se repita (voy a probar en la semana a ver qué consigo). Mientras tanto, con lo que te dije arriba servirá. Y repito: yo veo bien la cabecera de tu blog.
Saludos.
Hola Mario, perdona por contestarte con retraso, pero he tenido unos días liados y casi se me había olvidado que te había hecho la pregunta.
Lo que pasó es que después de escribirte empecé a manipular la foto que quería poner para llegar al tamaño que indicabas, y me salió bien, con lo cuál la coloqué y eso es lo que viste cuando entraste
De todas formas gracias, y sobre todo gracias por las instrucciones
Un abrazo
Intento agrandar la imagen de cabecera de mi blog pero no lo consigo,la imagen se granda pero hacia la dcha. :(
Hola sasha, disculpa la demora en contestar. Que raro, yo veo bien centrada la imagen de tu blog tanto en Firefox como en Internet Explorer.
Mil gracias!
El post me ha sido de gran ayuda! Encontre una manera más rápida de añadir la foto.
Creas una foto de 760 pixeles de ancho por 130 de alto. Luego vas a plantilla > editar header y añades la foto. :-)))
Sabés? Hace poco que descubro esa función. Pero parece que no sirve para todas las plantillas, es decir, funciona mejor con las que vienen predeterminadas con Blogger, como la que usás en tu blog. Un saludo y gracias por avisar! Por cierto, muy interesante tu blog.
hola,tengo un problema;segui todas tus indicaciones y efectivamente aparece la imagen en la cabecera de m i blog pero lo que sucede es que cuando reinicio mi blog automaticamente la imagen desaparece y luego repetir otra vez el mismo procedimiento para que la imagen vuelva a parecer que debo hacer para que la imagen de mi blog no desaparezca cuando reinicio mi blog?,gracias,hey men,me puedes ayudar?te lo agradezco con todo el alma ya que no se que hacer!!!
Hola ubbalho, yo veo bien la imagen (una grna bola de fuego, no?) en la cabecera de tu blog. Te fijaste si es un asunto de tu navegador: borrale el cache y reiniciá el navegador. Luego ingresa a tu blog como siempre y listo. A propósito, probaste la forma oficial de blogger? Volvé a la plantilla original, luego andá a "diseño" > "elementos de página" y hacé click en la opción "editar de tu título". Luego en "desde tu equipo" hacé click en "examinar" y elegí la imagen que querés para el header desde tu computadora. Previamente en "Ubicación" elegí una de éstas opciones "Detrás del título y la descripción" (que mantiene el título del blog) o "En lugar del título y la descripción" (que lo borra y solo se ve la imagen).
Nota: No hagas click en "Reducir hasta ajustar" porque sino no te tomará el ancho de la imagen. Por eso antes de subir la imagen tenés que asegurarte que mida el mismo acho que te sugiere la leyenda "La imagen se reducirá hasta los xxx píxeles de ancho." Guardá todos los cambios y verás tu imagen funcionando
gracias,mario,tu aporte es muy valioso,espero que me enlaces a tu blog asi como yo te tengo en el mio,todavia me falta por aprender mas y por meterle mas cosas a mi blog,espero que te sigas comunicando conmigo,hasta la proxima mario,chaooo...
HOLA SOY MASSIEL DE SANTO DOMINGO TENGO UN BLOG ANTES PODIA COLOCARLEE LOS BANNES OH ENCABEZADOS QUE YOO QUERIA PEROO AHORA NO SE QUE PASO QUE NO PUEDO PONERLE BANNER SOLO ME SALEE ESCRITO EL NOMBRE DE MI BLOG EN EL ENCABEZADOO........................POR FAVOR ALGUIN QUE ME AYUDEEEE MI MSN EH TU_MAMI_CHULA11@HOTMAIL.COM
Muy bueno che te felicito me sirvio y de mucho!
suerte segi asi voy a estar sigiendo de cerca el blog
Estimado Mario
Por favor necesito tu Email.-
el mio mnppepe@gmail.com
gracias
saludos hermano.me podras ayudar.donde puedo bajar esta misma plantilla
y si alguien me pudiera ayudar necesito quitar la imagen por defecto de mi plantilla y centrar la imegen demi cabecera
hola a todos, entrar en mi blog http://bomberosdesantander.blogspot.com/ y mirar como tengo la imagen del titulo, que tengo que hacer para que me salga completa la imagen ???
Bomberos y tierra:
actualmente Blogger tiene una manera de subir y encuadrar las imágenes de cabecera, ya no es necesario éste tutorial (salvo que queramos hacerlo desde el código). En la sección de diseño de tu blog, estará la cabecera arriba de todo. Hagan click en el botón "editar", y dentro de las opciones podrán acceder a una para colocar una imagen de fondo en la cabecera. El mismo Blogger les dirá de qué dimensiones debe ser la imagen. Entonces antes de hacer anda con el photoshop, el gimp, o hasta el paint hay que editar nuestra imagen para que quede a la altura que pide. Luego, podrán subir la imagen con una especie de botón "Examinar" que provee la opción en Blogger. Hasta se puede elegir si quitar el título del blog o no (solo indicado si la imagen incluye un logo con título y todo). Aceptamos los cambios y listo. Disculpen las prisas, y no poder ser más específico, pero investiguen y verán que podrán hacerlo.
esa opcion fue la primera que probe, pero obseva como se me queda la imagen, esta descuadrada el sitio, y yo quiero que se me ajuste y que no se vea el color de fondo http://bomberosdesantander.blogspot.com/
Bomberos: Yo veo el logo perfectamente centrado en su blog. Al menos lo veo así desde Firefox y Opera. Por IE no probé. Para mi les ha quedado muy bien. Será cuestión de ir probando hasta dar con la plantilla indicada que se pueda ver bien en la mayoría de los navegadores.
Hola amigo, pues tengo un problemilla en mi plantilla la
"Stretch Denim" pongo la imágen tal i como tu lodices en este post pero pasa que la imagen sale bien, pero el problema biene cuando mi blog lo veo en distintas resoluciones, la imagen de la cabecera se achica y se pierde un poco de texto en una resolución de 800*600 y se repite la imagen en una resulución de 1152*864. Para que puedas ver de que te hablo puedes verlo en está página donde ago las prubas de resolución http://viewlike.us/
Bueno espero me puedas ayudar.
Un saludo.
Eduardo: Decime cuál opción usaste: si por código, o por el soporte nativo de blogger para agregar logos (lo agregué este ultimo hace unos días). Lo que ocurre es que tenés que editar la imagen para que te quede igual en altura y ancho de pixeles para, en tu caso, Denim Strecht. La solución nativa generalmente te dice cuál debe ser el ancho (anotala así la aplicás a tu imagen), pero no la altura. Para la altura probá que quede con 130 pixeles de alto, o andá probando hasta que quede. La solución por código, en cambio, no te dice que ancho o altura debe tener, por eso tenés que navegar el código hasta dar con los valores del cabezal y dar justo con el ancho y alto. Suerte.
Hola amigo gracias por tu respuesta, pues lo ice por código le he añadido la imagen debajo del color del fondo así:
#header {
margin: 0 2%;
background-color: $headerBgColor;
background: url(http://img215.imageshack.us/img215/2097/022x.png) center;
color: $headerTextColor;
padding: 0;
font: $headerFont;
position: relative;
poero no queda bien, y si la añado la imagen por medio del widget de blogger que tiene para subir la imagen a la cabecera, queda en resolución de 800*600 la el cuerpo de la pantilla se achica y la cabecera sobre sale y en una resolucion más 1152*864 la imagen queda pequeña te adjunto las imagenes para que veas de que hablo:
http://www.fileden.com/files/2009/7/2/2496611/ima01.JPG
http://www.fileden.com/files/2009/7/2/2496611/ima02.JPG
gracias por tu respuesta espero tu ayuda, gracis y un saludo.
Eduardo, lo que está mal es el ancho de la imagen, por eso se repite o no cuadra bien. Probá con un ancho de 1204 o 1205 pixeles (ahora tiene 960 la que usás). Vas a tener que seguir probando hasta que te quede bien. No importa el método que uses: nativo o por código, si la imagen no respeta las dimensiones de la plantilla Denim stretch, te va a quedar mal igual. después me contás.
Hola, pues he probado con las dimensiones que dices pero me sale igual. Bueno, te agradesco por tu ayuda creo que el problema es por la plantilla o que cerá pero gracia por tu respuesta me han servido de mucho y me han sacado de dudas.
Saludo y gracias.
He intentado todas las indicaciones que salen en las explicaciones de diferentes páginas y no tengo manera de cambiarlo, esto ya me supone un reto personal, pues llevo más de 2 meses con el tema y a ratitos voy intentándolo. Para empezar a mi no me aparece el Header famoso. Si copio lo que me aparece en HTLM alguien me puede ayudar?
Publicar un comentario