El elemento Header (3)

Por defecto, el Header de Blogger no admite demasiadas posibilidades, podemos definir una imagen de fondo, un banner, un texto, no mucho más. En cuanto queremos intentar algo diferente, nos vemos en dificultades así que, para evitar lidiar con los códigos, lo mejor es elimiinar ese widget y empezar desde cero.

Normalmente, sin expandir la plantilla, veremos esto:

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='nombre sitio (cabecera)' type='Header'/>
</b:section>
</div>

Vamos a cambiarlo así:

<div id='header-wrapper'>
<b:section class='header' id='header' />
</div>

De esta forma, eliminamos el gadget que, llegado el caso, podemos agregar en cualquier otro momento, y tenemos la misma sección que teníamos antes, el mismo rectángulo en la parte superior del blog. Ahora, bastaría ir agregando elementos HTML o cualquier otro, tal mo hacemos en la sidebar.

Por ejemplo, vamos a colocar allí un banner de Flash; en este caso, usando las facilidades de una herramienta online como FlashVortex.

Los archivos de Flash son archivos de extensión SWF y como no es posible alojarlos en Blogger mismo, deberemos subirlos a otro servidor, por ejemplo, a Google Sites. Tendremos entonces una URL como esta:

http://sites.google.com/site/misitio/mibanner.swf

Ahora, en Diseño, agregamos un elemento HTML y allí pondremos el código:

<object id="bannerSWF" data="http://sites.google.com/site/misitio/mibanner.swf" width="valor" height="valor" type="application/x-shockwave-flash">
<param value="http://sites.google.com/site/misitio/mibanner.swf" name="movie"/>
<param value="transparent" name="wmode"/>
<param value="always" name="allowScriptAccess"/>
</object>

donde la URL la colocamos dos veces, en el atributo data y en el atributo movie para que se vea en cualquier navegador y reemplazamos los atributos width y height por los valores del ancho y alto de la animación.

Eso es todo.

Si hablamos de una plantilla mínima, no hace falta modificar el CSS. En todo caso, las definiciones elementales son las siguientes:

#header-wrapper {
  margin: 0 auto;
  width: valorpx; /* el valor del ancho de nuestro sitio */
}
#header { 
  text-align: center;
}

Aquí hay un ejemplo online con dos SWFs en el mismo elemento.

MASI INFORMACIÓN: Tratando de entender el Header [1] [2] [3]