Dividir el Header o Cabecera del Blog

Estimados amigos bloggers. Luego de buscar, buscar y buscar, destruir plantillas con raros tutoriales y sufrir mucho (así es la vida de un novato, lo se) por fin encontré la manera de dividir el header o cabecera del blog sin morir en el intento.

Este es un espacio que queda desperdiciado cuando nuestro logo es pequeño o no usa el total de la cabecera. Luego de este tutorial ustedes dispondrán de ese "hueco" para poner un menú, una imagen, botones de redes sociales, un simple texto, un bloque de anuncios o lo que ustedes deseen.

Para logra esto debemos seguir apenas un par de pasos que os dejare a continuación.



Antes de mete mano como unos desaforados en nuestro querido blog vamos a respaldar la plantilla entera. Para los que no saben o no recuerdan como hacerlo vean esta entrada.


¡Ahora si, manos a la obra!


Si estamos usando firefox o chrome con ctrl + f buscamos lo siguiente:


<header>


Debemos borrar desde <header> hasta </header>, el cual se encuentra unas lineas mas abajo.

En su lugar pegamos el siguiente código:


<header>

    <div class='header-outer'>

    <div class='header-cap-top cap-top'>

    <div class='cap-left'/>

      <div class='cap-right'/>

    </div>

      <div class='fauxborder-left header-fauxborder-left' style='float:left; width: 45%;'>

    <div class='region-inner header-inner'>

      <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

        <b:widget id='Header1' locked='true' title='Cosas Pa Blogger (Cabecera)' type='Header'></b:widget>

      </b:section>

    </div>

    </div>

      <div class='fauxborder-right header-fauxborder-right' style='float:right; width: 53%;'>

<b:section class='banner' id='banner' maxwidgets='1' showaddelement='no'>

  <b:widget id='HTML188' locked='false' title='' type='HTML'></b:widget>

</b:section>

</div>

    <div class='header-cap-bottom cap-bottom'>

      <div class='cap-left'/>

      <div class='cap-right'/>

    </div>

    </div>

    </header>

<div style='clear: both'/>

    <div class='cosaspablogger' style='width: 98%; margin: 10px 3px;'>

      <b:section class='banner2' id='banner2' maxwidgets='1' showaddelement='no'>

        <b:widget id='HTML189' locked='false' title='' type='HTML'></b:widget>

      </b:section>

    </div>

    <div style='clear: both'/>


NOTA: No se preocupen por el nombre de la cabecera, este se cambiara solo.


Ahora agregaremos el estilo.
Para ello buscaremos lo siguiente: ]]></b:skin> y justo antes pegaremos este codigo:


/* css Header dividido */

.header-inner{

float: left; width: 50%;

margin: 6px;

}



.header-fauxborder-right{

float: right;

width: 46%; height: auto;

margin: 6px 6px;

}



.cosaspablogger{

margin: 10px 3px 5px 3px;

}

/* FIN css Header dividido */


Guardamos y vamos a "Diseño" en nuestro escritorio blogger y comprobamos que en lugar del header que ocupaba todo el ancho de la plantilla hay un espacio para agregar otro gadget.

Para ajustar el ancho de el header y del otro widget debemos tener en cuenta lo siguiente:

<div class='fauxborder-left header-fauxborder-left' style='float:left; width: 45%;'>


<div class='fauxborder-right header-fauxborder-right' style='float:right; width: 53%;'>



Los valores en rojo corresponden al ancho de los espacios que generamos. Tengan en cuenta mantenerlos en menos de 97% o 98% en la suma total para no superponerlos.

Ahora ya sabemos como dividir en 2 la cabecera de nuestro blog.
Espero les sirva como me sirvio a mi.
Gracias por pasar.