Rincón de Bits

El servicio de blog de google ha sacado ya hace un tiempo una version completa de su servicio, y a diferencia del Blogger beta, ha hecho algunas modificaciones. Tal es asi que para poner una imagen personalizada el proceso que debemos seguir es un tanto diferente a lo que habia que hacer en Blogger beta. Vamos a poner nuestra propia imagen en el titulo de nuestro blog.

Para esto debemos tener una imagen alojada en un servidor web, hay muchos pero personalmente uso yahoo: http://es.geocities.yahoo.com/ ; y si la imagen ya está en internet basta con que le den click derecho en la imagen , ir a propiedades y copiar la ruta de ésta.

Perfecto, ahora que ya tenemos la url de la imagen abrimos nuestra cuenta en el blog y nos vamos a la platilla y clikeamos en edicion de HTML (Os recomiendo que guarden la plantilla antes de proseguir), ahora ubiquemos este codigo:

#header-wrapper {
background: #476 url("http://www.blogblog.com/rounders4/corners_cap_top.gif") no-repeat left top;
margin:22px 0 0 0;
padding:8px 0 0 0;
color:$titleTextColor; }

#header {
background:url("http://www.blogblog.com/rounders4/bg_hdr_bot.jpg") no-repeat left bottom;
padding:0 15px 8px; }

#header h1 {
margin:0;
padding:10px 30px 5px;
line-height:1.2em;
font: $pageTitleFont; }

Una vez ubicado reemplazaremos esta linea (http://www.blogblog.com/rounders4/bg_hdr_bot.jpg), por la direccion de la imagen que habeis subido y deberia quedarnos algo asi:(http://direcciondelaimagen.jpg).

Ahora una vez hecho esto se darán cuanta que aun falta quitar el titulo del blog y la descripcion si es que tiene. Seleccionemos donde dice "expandir plantillas de artilugios"y ubiquemos el siguiente código:

<div id="header-wrapper">
<b:section class="header" id="header" maxwidgets="1">
<b:widget id="Header1" locked="true" title="Valsrock (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" shape="rect">
<data:title />
</a>
</b:if>
</h1>
</div>
<div class="descriptionwrapper">
<p class="description">
<span>
<data:description />
</span>
</p>
</div>
</b:includable>
</b:widget>
</b:section>
</div>

Para evitar q el titulo y al descripcion aparezcan debemos borrar lo que hay dentro de la cabecera de <hi1 tambien debemos quitar el parrafo <p ;veamos como queda ahora:

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1'>
<b:widget id='Header1' locked='true' title='Valsrock (cabecera)' type='Header'>
<b:includable id='main'>
<div class='titlewrapper'>
<h1 class='title'>
</h1>
</div>
<div class='descriptionwrapper'>
</div>
</b:includable>
</b:widget>
</b:section>
</div>

Si tienen problemas con el tamaño de la imagen jueguen con los valores del "padding" que se encuentra debajo de donde ingresaron la url de la imagen.