Sin categoría

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

Ya que he recibido preguntas al respecto, voy a indicar como cambiar el tí­tulo de blogger por una imagen cualquiera. Blogger no redimensiona automáticamente la imagen que utilices, por lo que, calcula el tamaño que debe tener. Para alojar la imagen puedes usar sistemas como Photobucket, Imageshack. En cambio, si quieres que sea blogger quien la albergue debes de hacer 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 nueva y guardarla como borrador o eliminarla, ya que, la imagen quedará alojada.

Lo siguiente que debemos hacer es edita la plantilla que tengas seleccionada para tu blog. Para ello, entras en la administración de tu blog y pinchas en la pestaña “Plantilla”
Ahora debes de buscar el bloque de texto que se encuentra entre <div id=”header”> y termina con </div> y localizar el siguiente bloque de código:

<div id=”header”>
<h1 >
<img src=”http://photos1.blogger.com/b…colo.gif”>
</h1>
<p id=”description”>Un blog sobre mí­….</p>
</div>

Reemplaza “http://photos1.blogger.com….colo.gif” con la URL de la foto y la descripción con la descripción que quieras. Puede que tu blog no disponga de una imagen con lo que a lo mejor no encuentres esta lí­nea, lo único que tienes que hacer es añadirla con la URL de tu imagen.

Si quieres que aparezca la imagen junto con el texto del tí­tulo, haz esto:

<div id=”header”>
<h1>
<ItemPage><a href=”<$BlogURL$>”></ItemPage>
<img src=”http://urldelaimagen.jpg”><$BlogTitle$>
<ItemPage></a></ItemPage>
</h1>
<p id=”description”><$BlogDescription$></p>
</div>

Reemplaza la URL http://urldelaimagen.jpg con la URL actual.

Otra manera es modificando la hoja de estilos:

Sólo tienes que localizar este bloque:

#blog-header {
margin: 0;
padding: 0;
font-family: “Lucida Grande”, “Trebuchet MS”;
background: #e0e0e0 url(http://www.blogblog.com/tictac_blue/top_div_blue.gif) no-repeat top left;
}
#blog-header h1 {
margin: 0;
padding: 45px 60px 50px 160px;
font-size: 200%;
color: #fff;
text-shadow: #4F73B6 2px 2px 2px;
background: url(http://www.blogblog.com/tictac_blue/top_h1_blue.gif) no-repeat bottom left;
}

Basta que sustituyas las dos URL´s en background por la URL de tu imagen. Esta modificación hará que la imagen aparezca como fondo en la cabecera, manteniéndose la descripción y el tí­tulo del blog.

Actualización: si estás usando Blogger Beta lee mejor este artí­culo: Cambiar el tí­tulo por una imagen en Blogger Beta

About the author

Dimas

View all posts

33 Comments

  • Uso Firefox y veo las dos primeras cajas de tu entrada mal. Se entiende, pero no se si alguien que vaya bastante perdido lo podrá seguir.

    Gracias por tus explicaciones.

  • Hola Olga!
    yo también uso Firefox y lo veo bien. ¿Puedes especificarme qué no ves bien? a ver si puedo arreglarlo, gracias.

    Salu2!

  • síp, está solucionado…. por lo menos yo puedo verlo bien en IE… no sé que ha pasado con la imagen!!! ahora no sé ve y cuando la subí no me dió ningún problema y se veía perfectamente… pero bueno ya está solucionado.

    Salu2

  • Pingback: SigT
  • hola he seguido tus indicasiones pero no me resulta, donde deberia estar la imagen, solo me aparece una cuadardito blanco con una x roja…ques estare haciendo mal

    gracias

  • Hola Aldo!
    Perdona que te conteste un pelin tarde. Es probable, por lo que describes, que la imagen no se muestre porque el enlace hacia ella sea incorrecto, por eso te aparece ese recuadro con la cruz.
    En el codigo pone que debe haber una imagen pero el explorador no la encuentra.

    Comprueba si el enlace hacia la imagen es correcto.

    Salu2

  • Hola,

    Mi problema es mayor, resulta que ni siquiera me aparece un recuadro rojo donde debiera estar la imagen que cargo desde el disco duro.

    Porfa, alguien me puede que hay que hacer.
    Gracias

  • hace rato he tratado de poner una imagen como título pero no lo consigo, simplemente en mi plantilla no aparece el texto que tu propones cambiar, sabes a qué se debe??
    abrazos preguntones desde mi cheqa…

  • ¿Hay alguna manera de quitar el título y que sea la imagen la que actúe como enlace a la página principal? Es decir, en la plantilla de blogger, era el propio título el que se convertía en un link cuando te ibas moviendo por el blog para regresar a la página principal. Yo quiero eso, pero siendo la imagen que he puesto como cabecera la que se convierta en el enlace. Espero haberme explicado y obtener respuesta.

  • ya lo intenté pero la imagen me sale o demasiado grande o demasiado chica y ya lo intenté como 10 veces y nada.. asiq ue quedo chica nomas, un bajon..besos

  • Yo hice lo siguiente para poner una imagen en el espacio superior destinado al título del blog:

    1º.- Subir la imagen a Imageshack u otra web de alojamiento, o bien publicarla en una nueva entrada de tu blog,(luego la borras o eliminas la entrada)

    2º.- Entra en las propiedades de la imagen y copia la url.

    3º.- Pica sobre el icono de blogger como si fueras a editar una nueva entrada y entra donde pone “Cambiar valores”

    4º.- En la ventanita donde pone el nombre de tu blog, borra el nombre y tienes que pegar la url de la imagen. Pero primero debes escribir:
    Por ejemplo:

    Tendrás que ir probando el tamaño de la imagen. Yo la puse aproximadamente con 650 x 200 px.

    El único problema es que cuando abres el blog, en la barra de tareas no pone el nombre de tu blog sino que sale escrito la url de la imagen, pero yo no supe hacerlo de otra manera.

    Espero que os haya podido ayudar.
    Un saludo.

  • Veo que no sale el ejemplo que os pongo. Lo escribo con todas las letras a ver si logro explicarme bien:

    Abrir con el signo ese que parece una uve inclinada, luego escribes img,haces un espacio y escribes src, y sin espacio pones el signo de “igual” y a continuación sin espacio, la url de la imagen.
    Acordaros de cerrar la url con la uve inclinada (tecla a la derecha de la “Z”

    Lo pongo entre comillas aver si sale:
    “”

  • Estoy en las mismas y no consigo avanzar.
    El html no es mi fuerte.
    No sé porque no consigo cambiar el titulo por la imagen que tengo posteada en la primera y unica entrada.

    En vez de encontrarme con head solamente me encuentro con #header-wrapper { No sé si es esto lo que tengo que sustituir.
    He probado diferenbtes cambios pero no me dejan ver la vista previa del blog por errores en el html.

    Estoy muy despisatdo. ¿alguna sugerencia?
    Muchisimas gracias.

  • Con los invalorables consejos de Tío Sam logré colocar la imagen en el título de mi blog, construyendo previamente una imagen en la que también inserté el título del blog.
    La verdad que ahora ha quedado mucho mejor.
    Muy agradecido, y a los que no han podido vamos que se puede. Hay que lucharla un poquito, sobre todo con el tamaño de la imagen, la mía en particular la hice de 600×120.
    Muchas gracias!

  • NO lo logro. he probado con todos los URL y siempre me sale la foto muy chica, (está de 600×120 px siguiendo la exitosa experiencia de enrique)pero la idea es que sea del porte de todo el header.
    GRACIAS!!

  • Lo he logrado gracias al Tio Sam
    aunque no en su totalidad.
    Por que yo tengo la cabecera desde
    otro codigo, por que mi plantilla ya
    tiene una imagen, solo le cambie el URL.

    En vez de eso coloque un pixel transparente
    para que no pese nada y no se vea.

    Ahora solo falta ponerle el titulo para
    que aparezca en la barra…
    Recuerdo que habia un blog que tenia eso
    en movimiento… asi que de que se puede
    cambiar, se puede.

    Gracias Tio Sam!

  • Tà alucinante,probe a poner una imagen y me salio mal pero meti mano ,no se que hice y lo arregle.Te agradezco un monton si no fuera por tu ayuda seria un nabo

  • Me gustaria saber si me podeis ayudar aponer una imágen en el título de mi blog, por mas que lo intento no me sale.
    Un saludo
    Josemi

  • Saludos…

    A mi tambien me sucede aquellos de que solo aparece UN CUADRO NEGRO CON LA X ROJA, ya comprobe la direccion de la imagen y es la correcta. ¿Que puedo hacer?

  • A mi me pasa lo mismo que a gallas, no me sale en ningún lugar de la plantilla algo q diga , solo me sale , y no se si es eso lo que tengo q cambiar, lo he intentado con eso y tampoco me ha funcionado… ¿que debo hacer?
    Desde ya muchas gracias…
    SalU2…

  • Ups, parece q no salío…A mi me pasa lo mismo que a gallas, no me sale en ningún lugar de la plantilla algo q diga div id=”header” , solo me sale div id=’header-wrapper”
    , y no se si es eso lo que tengo q cambiar, lo he intentado con eso y tampoco me ha funcionado… ¿que debo hacer?
    Desde ya muchas gracias…
    SalU2…

  • hola, quiesiera que esaimagen en el tìtulo vaya cambiando enblogger, supongamos 10 imagenes diferentes, cada vez que actualizoo entroalaweb me encuentre con unadiferente, còmo puedo hacerlo?

  • Pffff…man, no se que carajos le pasa a mi Blog pero no tiene las opciones que tu indicas en su planilla!!! :( debe ser otro clase de Blog, es decir, es BLOGGER pero no aparecen tus indicaciones!!!! :(
    Si puedes ayudarme…pues nada mil gracias :
    joeyfilth@hotmail.com
    Saludos!