Últimamente recibo más preguntas de como cambiar la cabecera por una imagen en la versión beta de Blogger, dado que empieza a ser utilizado por más gente. El proceso es muy parecido al del Blogger clásico, pero como existen dudas paso a explicarlo.
Para empezar debemos hacer lo mismo que en el anterior sistema, alojar nuestra imagen en algún sitio, existen servicios como Photobucket, Imageshack o incluso si queréis en el mismo blogger haciendo lo siguiente:
- Crea una nueva entrada o post.
- Sube una imagen al editor.
- Publica la entrada.
Una vez que hayas hecho esto, visita tu blog y copia la ruta de la imagen, ya que, la necesitaremos luego al editar la plantilla. La entrada que has creado puedes modificarla de nuevo y guardarla como borrador o eliminarla, ya que, la imagen quedará alojada. Recuerda que el tamaño de la imagen deberás calcularlo para que sea más o menos el mismo que blogger establece aunque sea modificable.
Existen diferentes casos para el cambio dado que hay plantillas que no incluyen imagen en la cabecera y otras que sí. Veremos como hacerlo en esos dos casos y aunque no la plantilla que utilicemos no sea la misma que estés usando tu, puede servirte como guía.
Plantilla sin imagen en la cabecera.
Hay dos formas de incluir la imagen, por CSS o editando directamente la plantilla HTML.
La plantilla que vamos a utilizar ahora de ejemplo es la Minima.
Editando a través de las hojas de estilo (CSS)
Supongamos que ya has alojado tu imagen en algún sitio y tienes su ruta. Dentro del panel de control de blogger pinchas en la pestaña “Plantilla” y una vez allí en “Edición HTML” del menú horizontal.
Dentro del recuadro “Editar Plantilla” busca el siguiente código:
#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}
#header {
margin: 5px;
border: 1px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;
}
Lo que tienes que hacer es añadir ahora la url de la imagen para que aparezca como fondo, eso lo haces dentro del bloque “header”, si quieres eliminar los bordes, puedes hacerlo borrando la línea “border”.
En este caso si tu imagen mide 660px de ancho perfecto, sino puedes establecer otro ancho, si lo que te falla es la altura puedes añadir el valor height, especificando la altura. Veamos como quedaría:
#header-wrapper {
width:660px;
margin:0 auto 10px;
}
#header {
margin: 5px;
height:100px;
background-image: url(http://urldelaimagen/fondoheader.png);
text-align: center;
color:$pagetitlecolor;
}
Ahora tenemos que solucionar otro asunto, porque la imagen aparecerá pero sobre ella el título del blog y la descripción si tienes. Si quieres que aparezcan perfecto, sino debes hacer lo siguiente:
Debes localizar el siguiente bloque de código con “Expandir plantillas de artilugios” marcado:
<div id=’header-wrapper’>
<b:section class=’header’ id=’header’ maxwidgets=’1′ showaddelement=’no’>
<b:widget id=’Header1′ locked=’true’ title=’Consejos para blogs… (cabecera)’ type=’Header’>
<b:includable id=’main’>
<div class=’titlewrapper’>
<h1 class=’title’>
<b:if cond=’data:blog.url == data:blog.homepageUrl’>
<data:title/>
<b:else/>
<a expr:href=’data:blog.homepageUrl’><data:title/></a>
</b:if>
</h1>
</div>
</div>
<div class=’descriptionwrapper’>
<p class=’description’><span><data:description/></span></p>
</div>
</b:includable>
</b:widget>
</b:section>
</div>
Una vez encontrado debes eliminar todo lo que se encuentra dentro de la etiqueta “header-wrapper”, salvo la etiqueta “section” que es la que muestra la imagen. Es decir, debería quedar así:
<div id=’header-wrapper’>
<b:section class=’header’ id=’header’ maxwidgets=’1′ showaddelement=’no’>
</b:section>
</div>
Una vez realizado esto, ya puedes ver la imagen, sin el título y la descripción sobre impresionadas, si la imagen no se ajusta recuerda que debes jugar con los atributos “width” y “height”, o hacer una imagen a medida.
Editando el HTML directamente.
Este caso es más sencillo, debes localizar el mismo bloque que antes, el que se situaba entre la etiqueta de “header-wrapper”. Sólo que esta vez eliminamos también la parte de “section” sustituyéndola por la ruta de la imagen, es decir, quedaría así:
<div id=’header-wrapper’>
<img src=”http://urldelaimagen/header.png” alt=”descripcion” />
</div>
Haciendo ésto además puedes hacer que la imagen sea un link al inicio de tu blog, para eso sólo tienes que hacer lo siguiente:
<div id=’header-wrapper’>
<a href=”http://tublog.blogspot.com”><img src=”http://urldelaimagen/header.png” alt=”descripcion” /></a>
</div>
Si quieres eliminar el borde, recuerda que debes editar el CSS como hemos explicado antes y eliminar el atributo “border” de #header-wrapper”.
Cuando la plantilla incorpora en su cabecera una imagen el proceso cambia un poco, pero lo explicaré en otro artículo.
90 Comentarios
Siempre tan utiles y oportunos tus aportes. Gracias!
Muy bueno y práctico. Gracias.
gracias me sirvio de mucho =)
Gracias, llevaba tiempo intentandolo y por fin lo he conseguido. Muy buen tutorial
Alguien puede decirme como **!!&%@!!! poner imagenes y links de videos de youtube en mi blogger beta?? Pueden responder aqui o mandarme un mail a javiercab22@gmail.com..estoy desesperado mas busco y mas me vuelvo loco..Desde ya muchas gracias!!
Bueh salio cualquier cosa mi mail es javiercab22@gmail.com. Espero que alguien de buen corazon me conteste
Gracias!, a la perfeccion…
Deseo cambiar la cabecera de la plantilla po un jpg que he elaborado pero cuando intento de acuerso a las intsruccion me dice: “No se ha podido analizar su plantilla, porque no está bien formada. Asegúrese de que todos los elementos XML se han cerrado correctamente.
Mensaje de error de XML: Attribute name “img” associated with an element type “center” must be followed by the ‘ = ‘ character.” O saca advertencia
Gracias por tus instrucciones. Me ha funcionado a la perfección
Hola sabes k lo he intentado mil veces, pero no me resulta…tengo todo bien, pero no me resulta
http://www.marcoasn.blogspot.com
quizas es la url que me arroja cuando subo la foto en mi mismo blg… la url donde se aloja es: http://bp1.blogger.com/_J35nk1-WAug/RYM2xTaba-I/AAAAAAAAAA0/xADUG...
nose si esto es correcto, pero esta la tomo y la pongo en el codigo q has dicho, pero no me resulta… nose…
me das un consejo?
Woooa! gracias… no sabes la de vueltas que le estaba dando a la plantilla para conseguirlo!!
Estupendo tu tutorial: muchísimas gracias.
son mi salvacion !
mil gracias =D
Murielyn!
Lo intente y nada, mi plantilla solo dice:
#header-wrapper {
non display
como saber si moi blo es de los tienen banner de entrada?
no se que esta mal, ojala puedas darme algun consejo, de antemano gracias por la ayuda..
tambien una buena forma que uso mucho a la hora de diseñar y darle un toque distinto a mi blogger es utilizar Macromedia Dreamweaver, para lo que es diseño…
la verad que es una herramienta barbara..que deberian provar !!!!..a la hora de diseñar los blog en blogger..y hacerlos un poco mas personaliados, distinto al resto…
desde ya muy buena la web…me agrada haberla encontrado…
Muchas gracias!! me ha salido perfecto!!
hola, mi problema es k la imagen me keda descuadrada , miralo si puedes http://www.el-rincon-del-futbol.blogspot.com, por favor si lo sabeis mandadme un mensaje a lucaspalanca@hotmail.com,gracias.
Me costo un poco pero lo logre jajaa.. che graciass!!! totalessss!!!!
no encuentro la forma de añadir el link a la imagen, cada vez que lo intento se me sale la imagen y queda todo en blanco!!! que estoy haciendo mal no se!!! ayuda!!!!!!
me olvide de decirles que no tengo el beta si no la version final…
Me estaba volviendo loca. GRAAACIIIIAAAAAS!!!!
Y para los que tenemos una imagen en la plantilla del titulo de blog, ¿como se hace?
Hola; estoy intentando tunear un poco mi blog, pero hay cosas que quiero hacer que se escapan de las manos. Me pregunto si SE PUEDEN INTRODUCIR NUEVAS FUENTES DE ESCRITURA diferentes a las que vienen por defecto en blogger (por ejemplo, ¿qué tendría que hacer para sustituir la fuente de todos los títulos de mis entradas por una que no tiene blogger?), y también si alguien sabe CÓMO SE PUEDE PONER UNA IMAGEN COMO TÍTULO DE UNA ENTRADA O DE UN ELEMNTO DE PÁGINA (las columnas de la derecha de la plantilla). Muchas gracias de antemano.
Hola estado intentando toda la mañana tus trucos y no hay manera no sale de ninguna de las 2 maneras,uso la (Minima lefty modificada)como plantilla auque lo tienes muy bien explicado y he seguido los pasos solo consigo poner la imagen en una plantilla no modificada,no se donde cometo el error pues solo me sale este error :
# Se ha encontrado más de un artilugio con el ID: HTML2. Los ID de artilugio deben ser exclusivos.
Sé lo muy basico de HTML,CSS,me pierdo!podeis iluminarme,que debo corregir!.
muchas gracias por el articulo.
Un saludo y felicidades por el trabajo realizado.
muchas gracias por el articulo, aprendí la mitad pude poner la imagen en el encabezado lo que no pude hacer fue quitar el titulo porque blogger me generaba errores asi que opté por reducir el monton de palabras del titulo y lo puse en blanco mientras encuentro la forma de quitarlo.
att: pacho y gracias
¡ Muchas gracias ! Estaba a punto de dejar mi título tal cual hasta recalar en este foro. Al final lo logré, pero no con una imagen alojada en el propio blogger, tuve que encontrar un host alternativo para que me funcionase. Lo digo porqué antes he leído que alguien se preguntaba por la URL que le asignaba el blogger a su archivo, que sospechaba que no fuera buena … pues se ve que al igual no.
PORQUERIA DE CONSEJO
No se ha podido analizar su plantilla, porque no está bien formada. Asegúrese de que todos los elementos XML se han cerrado correctamente.
Mensaje de error de XML: Open quote is expected for attribute “src” associated with an element type “img”.
div id=’header-wrapper’>
gracias me estaba volviendo loca segui todo al pie de la letra y me salioooo muchisimas gracias! =)
Muchas gracias por este maravilloso blog todo un descubrimiento. Esto es aportar a los demás, de veras, cai aquí por Google y me ha dado muchas alegrias este blog.
Saludos
¿Y como se hace que la imagen sea link de inicio editango con css?
Hola!
No puedes hacer que una imagen sea un link con CSS
Gracias! Has sido de una ayuda inconmensurable!
Estás invitado a darte una vuelta por mi blog.
hola…leí atentamente los pasos a seguir para poner una imagen personal en la cabecera del blog…probé d las dos maneras q explicas…..pero me sale un error parecido al q le aparece a distintas personas..
>> No se ha podido analizar su plantilla, porque no está bien formada. Asegúrese de que todos los elementos XML se han cerrado correctamente…
Hace muy poco tiempo me estoy interesando por crear un blog e ignoro mxas cosas
Agradeceria la explicación
Saludos*
Hola!
Ese error suele aparecer cuando eliminamos alguna etiqueta que no debemos y entonces da el error.
Es dificil dar una respuesta general para cada caso, pero lo mas probable es que esteis eliminando algo que no se debe.
Fijaros que cada etiqueta de este estilo <b:includable> tiene su correspondiente final </b:includable>
Espero q sirva,
Saludos!
=D
yo de nuevo…
Primero gracias por responder a la duda….Por fin pude colocar la imagen q yo keria en el encabezamiento del blog…(se ve muy bien segun yo)…No sé si tiene algo q ver..pero seguí exactamente los mismos pasos d denante solo q esta vez alojé mi imagen en una hosting gratuito..a diferencia d la oportunidad anterior en la q la había subido como entrada d blog….
Bueno…como sea ya me funcionó..asi q mxas gracias!
hola verdaderamente creo que tengo la version beta ,ya que tengo una cuenta en google,pero el fuckin truco no me funciona y me vuelve loco!!necesitaria una mano si pueden..
http://soyunoyninguno.blogspot.com
Hi.
El cambiar el título por una imagen no es tan complicado. He publicado sobre esto en mi blog pero de otra manera, creo que un poco más sencillo. Es muy diferente a lo que esta aquí.
Asi que el que quiere puede visitarme. Ojala poder ayudarlos.
Bye.
Logre cambiar la cabecera por la imagen que yo queria, pero la imagen sale muy pequeña y en una esquina de la barra. como hago para que ocupe todo el espacio de la barra, responde porfa soy nuevo en esto y me interesa mucho, si quieres visita mi blog. alcanzatusmetas.blogspot.com
Hola, ya puse una imagen de título. Pero lo que me interesaría ahora es poder pinchar en la imagen e ir al inicio, osea un vinculo al propio blog.
Si pudieses contestarme via mail te lo agradecería, muchas gracias.
Ahh,despues de 2 horas de darle vueltas a los url’s,me sirvieron los tutoriales,mil gracias!!!
Gracias, me sirvió de mucho, ya estaba a punto de darme por vencida. Pude hacerlo y eso que yo creía que las computadoras me odiaban x q cada vez q intentaba algo, la makina esta se colgaba. Bueno, si no es mucho abuso, podrías decirme cómo poner como imagen los links?? . Te lo agradecería.
Hola a tod@s:
Ando como loco porque he pasado mis antiguas plantillas al nuevo blogger y el problema que tengo es que la imágen de cabecera ya no me vale,no ocupa el mismo espacio.
Es curioso porque las imágenes que ya tenía alojadas quedan bien,pero si ahora subo la misma imágen desde el pc,o cualquier otra con las mismas dimensiones,queda muy pequeña en el nuevo blogger.
No sé si me he explicado bien,espero haberlo hecho,NO HE MIGRADO AL NUEVO BLOGGER,me obligaron a actualizarlas porque ya no daban mas opción
Mi blog aparece en búsqueda de google escribiendo:”medianiasdearucas”
SALUDOS
He comprobado que la imágen que utilizo es de 767 x 127 pixeles,y al alojarla en blogger se reduce a 400×70 ¿es esto normal?
SALUDOS
Hola:
Estoy tratando de poner un formulario como este en el blog pero no soy capaz. ¿Dónde puedo encontrar información (si es posible en castellano) para lograrlo?
Gracias de antemano
Un saludo
Raúl
Tengo la plantilla Thisaway (Rose)y NO me resultó.
hola…che mirá…yo probe lo que dijiste pero de ninguna de las dos me salió ._. no apareció nunca la imagen…lo unico que saltaba era un cuadro con una cruz -_-| … y luego ni eso..y para completarle la máquina me salto con un cuadro que decia “file error!” o algo asi…y se cerro todo
-_-||| no hay otra forma aún más fácil y sin usar tanto html y eso??
Me quedó muy bien en encabezado. Por otro lado me gustaría saber dos cosas. Como puedo subir archivos de diferentes formatos y cómo agrego un buscador a mi blog. Disculpa las molestias jejejeje.
MUCHAS GRACIAAAAASS !!! me haces sentir grande con los consejos que das y que me resultan, gracias por compartir esta información que mucha gente no entrega porque no tiene tiempo de hacerlo, gracias nuevamente por ponerte en nuestro lugar…
un abrazo
hola! te felicito por este grandioso sitio que tienes con noticias y ayudas para todos!… yo tengo una pregunta… como puedo hacer que el titulo de mi blog en blogger sea el enlace al index de mi blog?… yo tengo activada la opción de que cada entrada tenga su propia pagina! pero cuando estas en la pagina de la entrada y quieres volver al index o inicio los enlaces están abajo de ultimo y me gustaría que estuviese en el titulo del blog…
Cecilia para añadir un buscador: http://www.blogmundi.com/2006/11/23/anadir-un-recuadro-de-busqued...
Juan Manuel para hacer q sea un enlace lo tienes explicado en el artículo
Saludos!!
Hola, gracias por el consejo, pero quisiera que me aclararas mas sobre hacer que la nueva imagen colocada en el titulo me redireccione a la pagina de inicio. la plantilla que uso es “scribe”
Gracias.
Hola, mi nombre es ana y soy nueva en todo esto de acondicionar un blog, ponerle banner, contador, esas cosas.
hace mas de dos horas que estoy intentando cambiar el banner por uno que hice yo y mas alla de que sigo las instrucciones, no se me cambia, me da error la plantilla.
no entiendo que estoy haciendo mal.
espero que puedas ayudarme.
saludos
exelente muchas gracias
suerte
Hola, me salvaste!, aunque tenia un problema y no lo podia ver, me faltaba la “/” antes del “>” al final de la linea del link de la imagen a mostrar… por si alguien tiene el mismo problema…
de lujo, muchas gracias por esta exelente explicacion
Hola!!!! gracias, muchas gracias en verdad este tutorial es simple y muy completo aqui les dejo lo que he modificado todo gracias a uds. Sigan adelante muy buen trabajo.
caminante_x
Hola!!!! gracias, muchas gracias en verdad este tutorial es simple y muy completo aqui les dejo lo que he modificado http://capuchinohit.3a2.com/ todo gracias a uds. Sigan adelante muy buen trabajo.
caminante_x
Hola.. hize todo lo que explicabas.. pero no me resulto poner la imagen en el titulo del blog.. solo pude cambiar el tamaño de los bordes..
tb me salia error .. algo asi como src en tipo img
como algunos han comentado, espero puedas ayudarme
Hola
después de muchas vueltas por fin encontré tu web y he logrado poner la imagen, lo explicas muy bien la verdad porque ya lo intenté con otros y nada. El unico problema q tengo ahora es q no puedo cambiar el tamaño, vamos lo cambio pero no lo cambia… Help!
Hola, muchísimas gracias por la información.He conseguido poner la imagen que quería pero ahora no pudo hacer que salga como vínculo, he hecho exactamente lo que dices y no me sale, me da los mismos errores que a la gente, que pasa?? por qué salen esos errores??
Gracias!!
Saludos!!
Gente…..como va?
Necesito que alguien me diga como poner una imagen de fondo de un formato mayor(no solo reemplazando el título) Tenkiu.
gracias por la información, solo tengo un problemilla, en Firefox se ve de bien pero en explorer me desplaza la imagen un poco hacia abajo, a ver si me puedes ayudar.
Saludos y gracias de antemano por tu ayuda.
empece quitando la cabecera y despues de seguir tus instrucciones y las de otros blogs ya no se si tengo una web o una ensalada… la imagen no aparece haga lo que haga…. te ruego que me eches una mano!
a pues vamos a ver que tal me queda, muy completa la informacion.
gracias!!!
por fin pude hacerlo!!!!
ya llevaba mucho tiempo intentando diferentes “recetas” pero ninguna me funcionaba.
Muchas gracias
Hola, estoy aquí a vueltas con mi cabecera. Subo la imagen pero no se me adapta al formato de la cabecera, se repite hasta rellenarla, como si fuera un motivo.
Muchas gracias
Perdón, que puse mal el link
http://pirusca.blogspot.com/
Sigo todos los pasos y no me resulta
ya no se hacer
Es necesario q sea una imagen PNG o cualquier formato sirve???
enhorabuena por la información, aunque no he podido subir la cabecera y eso que lo he intentado unas mil veces y unas cuantas noches sin dormir… espero que alguien me pueda ayudar, aqui os dejo mi página;
http://project-es-cultura.blogspot.com/
y mi e-mail;
nafersil@gmail.com
Hola, consigo poner la imagen y todo bien. El caso es que quiero que el título me quede en una línea. pero se corta en varias y no se por qué. ¿Alguna idea?
Gracias.
pues bueno io hice eso pero no me salio, no se ve la imagen =S y keria ke kedara la deskripcion y segun io trate de dejar el kodigo de ella pero no salio xD si fueras tan amable de explikarme lo agradeceria mas… igual gracias x)
Muchas gracias ¡súper útil!
Gracias, compadre me fue muy util este post!!
Ya no es necesario hacer nada de esto. Blogger acaba de añadir una utilidad que lo hace automáticamente. Si editais el header desde elementos de página lo veréis.
Gran aporte pepino, muchas gracias.
http://www.nuestraredonda.blogspot.com
Yo me vuelvo loco intentando poner una imagen en el titulo de mi blog y no se como hacerlo
No se si mi blog es beta o no
Me gustaria ayuda para ponerlo
Un saludo
Sambanorte
Mi blog es
htpp:/balmasedatxoko.blospot.com
htpp:/balmasedatxoko.blogspot.com
Muy agradecido por el truco, si ke lo eh intentado de muchas formas y nada.. y ahora ehhh!!! ke me saliooo… bueno gracias oiee y una peticion si sabes como hacer para añadir una imagen pero esta vez al final del blog.. osea como una tipo firma.. me es un tanto urgente perdona, es que es para una fecha en especial y solo eso me hace falta… espero que me eches una mano.. gracias…
Hola!!!! gracias pero no me aparece nada de eso en la plantilla–> edicion de html…
no encuentro esa opción en la plantilla…que triste…yo uso la template de moto son http://www.blogblog.com/moto_son/topper.gif
no enteindo nada y soy super inculta…
solo que me digas si esa opción está aproximadamente en la mitad el principio o el final…es que no lo encuentro!!!
muchas gracias
Excelente contirbucion , me funciono de maravilla gracias hermano
Nada, ni flores. Llevo un montón de tiempo intentándolo y no hay manera. No me aparece error ni nada, pero tampoco la imagen. Me voy a volver loca!
ESTOY INTENTANDO PONER imagenes en mi blooger de google pero no lo consigo hablo de ponerlas no en el titulo ninada solo en el blog como imagen cuando la intetno poner doy al icono d ela imagen y no sale nada me gustaria saber qe puedo ahcer en ese caso suongo qe es algun problemad e m iordenador porqeu los videos si qe puedo ponerlos lo h eprobado y si qe puedo poner videos de youtube y demas me gustari que mi dejeseis que es lo que ocurre y que hago en el caso de que no se pueda poner directamente dando al simbolito d dl aimgen gracias espero que podais ayudarme gracias maria!
Hola no he podido cargar la imagen hice todos los cambios que me sugeriste pero solo logre borrar el titulo. espero tu ayuda gracias d antemano
demasiado bueno!!!! super gracias!!!! esta super indicado en verdad!!!!
Gracias por la info…
Tengo el templet Elegant de Dimas Romero y me gustaria poner
una imagen en la cabezera, pero se me complica. No se exactamente en
donde tengo que hacer el cambio.
No se si pueden ayudarme.
Saludos,
1 Trackback
[...] Un artículo muy practico de BlogMundi, que trata sobre como cambiar la cabecera por una imagen en la versión beta de Blogger, si estás interesado con el tema no te pierdas su lectura: leer el artículo completo. [...]