domingo, 30 de enero de 2011

Blogger Cambiar el título por imagen

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

Fuente               

7 comentarios:

Luany dijo...

Muchas gracias por el tutorial, me sirvió mucho mucho.

De todo para los blogger dijo...

Gracias a ti

administrador dijo...

hola... soy muy nuevo en esto, y tengo un problema: deseo que la imagen de la cabecera ocupe todo el espacio, pues queda demasiado pequeña (www.newtonvive.blogspot.com) y me gustaría que ocupara todo el espacio disponible. ¿cómo puedo hacerlo? (e-mail:jcano2009@hotmail.com)

Eneire dijo...

A mi me pasa justo lo contrario..en mi segundo blog metí una foto que fuera en combinacion cn el titulo...y el titulo me a desaparecido...y ahora lo intento una y otra vez y el titulo solo me sale en la vista previa y solo un segundo dura puesto encima de la imaguen,cuando le doy a aceptar y veo el blog sigue sin aparecer !! me puedes ayudar?

De todo para los blogger dijo...

Hola para modificar la imagen de la cabacera lo mejor es reducir la imagen con algún programa como el picnik.
Eneire, dime cual es tu blog

aagustina dijo...

aaaaaaa no entiendo nada me pasa lo mismo que administrador, me queda la imagen muy chica. Mi blog es locuraquemeenvuelve.blogspot.com

SaKu-Chan dijo...

me encantan tus entradas pero te agradeceria en el alma que pudieras poner como queda en alguna fotografia o blog de prueba te lo ruegooo!!!!

Publicar un comentario

DIRECTORIOS

http://www.trucosblogs.com/post
4.57/5 – 42 opiniones
http://www.fabricaturopa.com/post 4.57/5 – 42 opiniones