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.
18 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
Publicar un comentario en la entrada