Dividir o cabeçalho com outro elemento

• Facebook
• WhatsApp
• Twitter
• Pinterest
• LinkedIn

Dando segmento aos tutoriais sobre Cabeçalho do blog, você já conferiu em outro post algumas maneiras de Personalizar o cabeçalho do Blog.

Agora você vai aprender, a colocar outro elemento no topo da página (por exemplo:Feed, banner, lista de links etc).
Para isto, você deverá , antes de mais nada, verificar largura total de #Header-Wrapper, pois a soma dos elementos contidos nele não podem ultrapassar este valor.

Siga alguns passos para poder dividir o cabeçalho com outro elemento:

Vá na edição HTML do seu blog, NÃO marque “Expandir Modelos de Widgets”.

1º passo – modificar o código que define o cabeçalho, procure por:

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='TITULO DO BLOG (Cabeçalho)' type='Header'/>
</b:section>

Altere os seguintes trechos:
Onde está escrito TRUE troque por FALSE.
onde está maxwidgets='1' , troque por maxwidgets='5'; onde está showaddelement='no' , troque por showaddelement='yes';

salve as alterações e volte na edição de HTML, mantenha desmarcada a opção "Expandir Modelos de Widgets".

2º passo - acrescentar uma nova DIV ao Header no corpo do HTML do seu blog, configurando a largura e posicionamento deste novo elemento:
Para isto, procure no corpo do HTML do seu blog por esta tag abaixo:

#Header-Wrapper{
width: 950px;}

#Header{
width: 450px;
float: left; } /*flutua à esquerda dentro de Header-Wrapper*/

#Header2{ /*coloque aqui o nome do elemento que você vai dividir com o cabeçalho*/
width: 450px;
float: right;} /*flutua à direita dentro de Header-Wrapper*/

2º passo - acrescentar no HTML a nova DIV, após a div do Header-Wrapper:

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='5' showaddelement='yes'>
<b:widget id='Header1' locked='false' title='TITULO DO BLOG (Cabeçalho)' type='Header'/>
</b:section>

<div id='header2'><b:section class='header2' id='header2' maxwidgets='1' showaddelement='yes'></div>
<div style='clear:both;'/>
</div>

Se você tiver dado nome ao elemento que está dividindo com o Header, onde está escrito 'header2', coloque o nome do elemento que você deu, não esqueça!

Se você dividiu o Header acrescentando uma lista de links no topo da pagina, veja na figura abaixo como inserir os seus links na Lista de Links (LinkList)

• Facebook
• WhatsApp
• Twitter
• Pinterest
• LinkedIn