??Como dividir la cabecera header II?

  • noviembre 17, 2010

Pasos muy faciles para dividir vuestra cabecera o header:

Muchos me hab??is preguntado ya por c??mo poner una cabecera (header-wrapper) doble en el blog. De esta forma la cabecera queda dividida en dos partes, y tal y como lo tengo yo: a la izquierda el logo y a la derecha el buscador. Pues bien, os voy a tratar de explicar c??mo lo hice yo.

Como dividir la cabecera header

Para ello vamos a:

1) Dise??o
2) Edici??n de HTML -Recuerda antes siempre guardar una copia de tu plantilla-
3) Busca #header-wrapper (teclea Ctrl+ F para buscar m??s r??pido). Te encontrar??s con algo as??:

#header-wrapper { background:$headerbgcolor; height:90px; width:980px; padding-top:16px }

Si te fijas el width (ancho de la cabecera) es de 980px y el height (altura) es de 90px. Obviamente en cada plantilla habr?? unos valores diferentes. Si deseas puedes aumentar o reducir el tama??o de tu blog, pero siempre recomiendo no sobrepasar los 980px para que todo el mundo pueda leerte sin problemas. Pero como queremos un header doble (cabecera doble) deberemos dividir por dos ese valor. Es decir, si nuestra cabecera mide 980px deberemos darle un valor ahora de 490px, pero recomiendo siempre darle algo menos de valor, por ejemplo 400px.

4) Una vez modificados los valores ahora debemos cambiar el nombre de #header-wrapper por #header-wrapper-left y le a??adiremos float:left; Es decir, nos debe quedar algo as??:

#header-wrapper-left { background:$headerbgcolor; float: left; height:90px; width:400px; padding-top:16px }

5) Justo debajo pegaremos lo siguiente:

#header-wrapper-right {float:right; width:400px; height:60px; text-align:right }

6) Ahora buscamos <div id=’header-wrapper’> y lo cambiamos por <div id=’header-wrapper-left’> Si te has fijado todos elementos que abrimos con <…> luego los cerramos con </…> por eso deberemos buscar a ver d??nde acaba <div id=’header-wrapper-left’>
Cuando hayamos visto el cierre de <div id=’header-wrapper-left’> es decir, </div> pegaremos a continuaci??n lo siguiente:


<div id=’header-wrapper-right‘>
      <b:section class=’header-right’ id=’header-right’ maxwidgets=’1′ showaddelement=’no’/>
</b:section>
    </div>



7) Ahora clicamos en vista previa y si todo est?? bien guarda tu plantilla. Ahora dir??gete a Dise??o->Elementos de p??gina y comprobar??s que ahora tienes un header doble disponible para poner los gadgets que quieras en tu blog.

Fuente

No Comments Found