sábado, octubre 09, 2010

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

0 comentarios:

Publicar un comentario