Sin categoría

Cambiar el tí­tulo por una imagen en Blogger Beta

íš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.

About the author

Dimas

View all posts

95 Comments

  • 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…

  • 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

  • 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…

  • 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.. 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!

  • 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

  • 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)

  • 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.

  • 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

  • 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 :)

  • 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!

  • 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,

  • AYUDA!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

    no se xq no me sale :( miren el error que me aparece:

    Open quote is expected for attribute “{1}” associated with an element type “src”.

    xfavor q alguien me diga q hacer…:(

  • Muchísimas gracias por la guía, llevaba rato tratando de cambiar el texto de la cabecera por una imagen y lo había podido hacer, pero me quedaba el título y la descripción encima; con esta explicación pude por fin realizarlo, gracias por tu tiempo.

  • Me salvaron de quedar loco…pase casi dos dias para borrar el bendito titulo de una plantilla nueva para mi blog….gracias a Dios encontre este post…me suscribo de inmediato….Saludos….

  • Gracias!!! después de tanto buscar por la web lo pude solucionar.
    En mi caso solo agregue la linea width con su respectivo valor y me salió