Dividir cabecera (header) del blog, cabecera (header) doble

Vamos a "dividir" la cabecera (header) de nuestro blog, eliminando la original y reemplazándola por una doble. Tomamos como referencia la plantilla Minima 1.- Vamos a Edición de HTML: Página principal ► Diseño ► Edición de HTML 2.- Localizamos el código CSS de la cabecera o header: #header-wrapper {   width:660px;   margin:0 auto 10px;   border:1px solid $bordercolor; } 3.- Lo eliminamos y lo reeemplazamos por el siguiente: #header-wrapper-doble {   width:660px;   margin:0 auto 10px;   border:1px solid $bordercolor; } 4.- Para poner en su sitio y de manera simétrica las dos partes de la nueva cabecera pegamos, debajo del código anterior, el siguiente: #columna-izda {   width: 50%;   float: left; } #columna-dcha {   width: 50%;   float: right; } Aplicando el 50% a cada columna lograremos que las dos partes de la cebecera queden iguales. Si las queremos de diferente ancho les cambiamos el porcentaje, sin exceder entre ambas, lógicamente, el 100%. 5.- Más hacia abajo localizamos este código: #header {   margin: 5px;   border: 1px solid $bordercolor;   text-align: center;   color:$pagetitlecolor; } ...lo eliminamos y lo reeemplazamos por éste: #header-doble {   margin: 5px;   border: 1px solid $bordercolor;   text-align: center;   color:$pagetitlecolor; } 6.- Desplazándonos hacia abajo en la plantilla, localizamos el código HTML de la cabecera:     <div id='header-wrapper'>       <b:section class='header' id='header' maxwidgets='1' showaddelement='no'> <b:widget id='Header1' locked='true' title='Título del blog (cabecera)' type='Header'/> </b:section>     </div> Al anterior código le hacemos dos modificaciones: Para habilitar la opción Eliminar en el gadget correspondiente a la cabecera, cambiamos true por false. Para habilitar los dos gadgets que reemplazarán a la cabecera que vamos a eliminar pegamos, antes de la etiqueta </div>, el siguiente código:      <div id='header-wrapper-doble'>        <b:section class='header' id='columna-izda' maxwidgets='1' showaddelement='yes'/>        <b:section class='header' id='columna-dcha' maxwidgets='1' showaddelement='yes'/>      <div style='clear: both;'/>      </div> ...debiendo quedarnos así:     <div id='header-wrapper'>       <b:section class='header' id='header' maxwidgets='1' showaddelement='no'> <b:widget id='Header1' locked='false' title='Título del blog (cabecera)' type='Header'/> </b:section>      <div id='header-wrapper-doble'>        <b:section class='header' id='columna-izda' maxwidgets='1' showaddelement='yes'/>        <b:section class='header' id='columna-dcha' maxwidgets='1' showaddelement='yes'/>      <div style='clear: both;'/>      </div>     </div> Con maxwidgets='1' (únicamente los resaltados en azul) habilitaremos la opción para añadir solamente un gadget (widget) en cada bloque de la nueva cabecera. Si queremos tener la posibilidad de añadir más de un gadget por bloque, lo eliminamos. Posteriormente, cuando agreguemos los gadgets de la nueva cabecera, el anterior código se nos modificará, por defecto. 7.- Vista previa y Guardar plantilla. En la Vista previa veremos la cabecera original del blog porque aún no la hemos eliminado, únicamente hemos habilitado la opción para poder eliminarla. No veremos los dos gadgets que van a reemplazar la cabecera original porque aún no los hemos añadido, únicamente habilitamos la opción para poder hacerlo. 8.- Una vez guardados los cambios vamos a Elementos de página en donde veremos el gadget correspondiente a la cabecera, que vamos a eliminar, y las opciones para añadir los que la van a reemplazar: 9.- Accedemos al gadget de la cabecera, haciendo click en Editar y, como ya habilitamos la opción Eliminar, hacemos click y la eliminamos: 10.- Ahora sí procedemos a añadir los gadgets que reemplazarán la cebecera poniendo, por ejemplo, en el de la izquierda el título del blog y, en el de la derecha, una imagen o lo que la imaginación de cada bloggero le dicte. En el siguiente ejemplo hemos añadido, en el gadget de la izquiereda, un elemento de página tipo Texto, y en el de la derecha uno tipo Imagen. Podemos ponerle color al fondo de la cabecera que acabamos de crear, añadiendo al código del punto 3 la línea resaltada en morado: #header-wrapper-doble {   width:660px;   margin:0 auto 10px;   border:1px solid $bordercolor;   background:#XXXXXX; } ...y reemplazando las XXXXXX por el número del código del color correspondiente. También podemos modificar la longitud de la altura de la cabecera poniendo en el código anterior, antes de }, esta línea: height:XXXpx; en donde XXX es el número de pixeles, teniendo cuidado que la altura sea igual o mayor a la de la imagen o imágenes que pongamos.

---