Como dividir o cabeçalho do Blogger

Para dividir o cabeçalho do Blogger, vá até o HTML de seu blog e procure pelo seguinte trecho:

Não se esqueça de antes de começar salvar uma cópia de seu template, caso não dê certo, é só reinstalá-lo.

#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}

#header-inner {
background-position: center;
margin-left: auto;
margin-right: auto;
}

#header {
margin: 5px;
border: 1px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;
}

#header h1 {
margin:5px 5px 0;
padding:15px 20px .25em;
line-height:1.2em;
text-transform:uppercase;
letter-spacing:.2em;
font: $pagetitlefont;
}

#header a {
color:$pagetitlecolor;
text-decoration:none;
}

#header a:hover {
color:$pagetitlecolor;
}

#header .description {
margin:0 5px 5px;
padding:0 20px 15px;
max-width:700px;
text-transform:uppercase;
letter-spacing:.2em;
line-height: 1.4em;
font: $descriptionfont;
color: $descriptioncolor;
}

#header img {
margin-$startSide: auto;
margin-$endSide: auto;
}


Substitua por este código abaixo.

/* Header
-----------------------------------------------
*/

#header-wrapper {
width:980px;
height: 300px;
margin:0 auto 10px;
}
#header {

height: 300px;
margin: 35px 0 0 0;
text-align: left;
float:left;
width:56%;
color:#E2DBD4;
}
#header-right{
margin: 10px 0 0 0;
padding: 30px 0 0 10px;
text-align: left;
float:right;
width:40%;
color:$pagetitlecolor;
}
#header-inner {
background-position: center;
margin-left: auto;
margin-right: auto;
}

#header h1 {
font-size: 35px;
margin:55px 0 5px 0;
padding:45px 0 0 20px;
line-height:1.2em;
letter-spacing:.2em;
font: #907095;
color: #907095;
}

#header a {
color:$pagetitlecolor;
text-decoration:none;
}

#header a:hover {
color:$pagetitlecolor;
}

#header .description {
margin:0 5px 5px;
padding:0 20px 15px;
max-width:700px;
letter-spacing:.2em;
line-height: 1.4em;
font-size: 25px;
font-family:'Tangerine', arial, serif;
text-shadow: 0px 2px 2px #000;
color: #E2DBD4;
}

#header img {
margin-$startSide: auto;
margin-$endSide: auto;
}

Código em azul representa o tamanho total de seu cabeçalho

código em laranja,  largura


 Agora procure pelo seguinte código:

 <div id='header-wrapper'>
      <b:section class='header' id='header' maxwidgets='5' showaddelement='no'>
<b:widget id='Header1' locked='true' title='AQUI DEVERÁ ESTAR O NOME DE SEU BLOG(Cabeçalho)' type='Header'/>
</b:section>
    </div>



 E substitua por este:

<div id='header-wrapper'>

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='NOME DO SEU BLOG (Cabeçalho)' type='Header'/>
</b:section>
<b:section class='header-right' id='header-right' maxwidgets='1' showaddelement='yes'>
<b:widget id='CustomSearch1' locked='false' title='' type='CustomSearch'/>
</b:section>
</div>

Pronto, veja como ficou:

Provavelmente seu teplate deverá ficar torto, conserte isso trocando as medidas do seu blog em "outer-wrapper" que deverá ter a mesma medida de seu "header" (código em azul). Depois troque os demais códigos.

Verde-------largura dos post

Rosa--------largura da sidebar


#outer-wrapper {
width: 960px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}

#main-wrapper {
width: 620px;
float: $startSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

#sidebar-wrapper {
width: 330px;
float: $endSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

Aprenda aqui a dividir a header do Blogger