Header multiple 1

Tweet

Normalmente cuando empezamos con un blog, nos habituamos a la clásica disposición de plantilla de Blogger.

Es decir una imagen de fondo en la cabecera, las entradas a un lado o al centro y una o dos sidebar. Cualquier elemento que deseamos añadir lo incluimos en esas sidebar, ahí ponemos la posibilidad de suscribirnos, el buscador, etc.

Hoy en día la tendencia es que eso elementos importantes ocupen una parte en nuestro header, pero para los principiantes eso supone una dificultad. Con la configuración primigenia de Blogger solo podemos incluir el titulo de nuestro blog, su descripción y como "regalo" una imagen de fondo.

Conforme avanza nuestra experiencia empezamos a usar imágenes independientes para estas cosas pero eso no es lo ideal. Tantas imágenes ralentizan la carga del blog, lo ideal, para la cabecera, es usar una sola imagen e incluir bloques en el header.

La cabecera que podéis ver en mi blog es una sola imagen y sin embargo tengo incluido en ella, la suscripción de feeds, el buscador, Twitter y si pulsas sobre el titulo vuelves a la página principal. Realmente es así como debemos configurarla para evitar cargarla demasiado. Esta es la imagen de fondo.



Como podéis ver es una sola imagen, en la cual están todos los elementos decorativos.

Ahora queda modificar el header de nuestra plantilla para incluir los diferentes bloques y que cada uno se posicione en el lugar que deseamos.

Como pretendo que entendáis el concepto y supongo que cada uno querrá hacer su cabecera de diferente forma a la mía, los códigos que voy a incluir a continuación solo os servirán como orientación. La mayor dificultad que os encontrareis a la hora de realizarlo es posicionar los bloques según os convenga. Pero es cuestión de paciencia y usar un par de trucos.

Por defecto si editáis vuestra plantilla y miráis en la parte de HTML una de las primeras cosas que os encontrareis es el bloque del header

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='TITULO DEL BLOG' type='Header'/>
</b:section>
</div>

Esto es lo que vemos en la pestaña de Elementos de la página



Esta es la parte que modificaremos para incluir mas bloques y añadiendo un poco de CSS le daremos forma y los posicionaremos.

Lo primero que tengo que hacer es incluir los bloques(div) en mi HTML, tantos como elementos quiero incluir. En el caso que nos ocupan tenemos:

• Suscripción al feed


• Suscripción al feed por mail


• Contador de suscriptores


• Buscador


• Titulo del blog


• Twitter


• Menu

Es decir siete bloques que añadimos, en este caso he añadido cinco bloques y uno de ellos, el de suscripciones, le incluyo tres secciones.

<div id='header-wrapper'>

<div id='busqueda'>
<form action='/search' method='get'>
<input class='texto' name='q' onblur='if (this.value == &quot;&quot;) this.value = &quot;Buscar...&quot;;' onfocus='if (this.value == &quot;Buscar...&quot;) this.value = &quot;&quot;;' type='text' value='Buscar...'/>
</form>
</div>

<div id='suscribe'>
<b:section id='rss' maxwidgets='1' showaddelement='yes'/>
<b:section id='rssmail' maxwidgets='1' showaddelement='yes'/>
<b:section id='rsscount' maxwidgets='1' showaddelement='yes'/>
</div>

<div id='title'>
<b:section id='title' maxwidgets='1' showaddelement='yes'/>
</div>

<div id='twitter'>
<b:section id='twitter' maxwidgets='1' showaddelement='yes'/>
</div>

<div id='menu'>
<b:section id='menu1' maxwidgets='1' showaddelement='yes'/>
</div>

</div> <!-- end header-wrapper -->

En cada bloque incluyo las secciones que voy a usar en cada caso, toda esta parte la podriamos hacer de otra forma pero añadiendo secciones podemos ir a la pagina de añadir elementos e incluir en ellos lo que queramos, por lo tanto es mas fácil de usar.

Hasta aquí el HTML... nos queda el CSS...

Te recomendamos también

+ Artículos relacionados de Tutorial