Junte-se a 22.515 pessoas que
decidiram aprender tudo sobre Criação de Blogs Profissionais e Redes Sociais.

Header Vanessa S.

Dividir o cabeçalho com outro elemento

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)


Fundadora do Mundo Blogger. Autodidata que adora internet, que se encantou com blogs, seus códigos e templates, desde 2009, e por conta disso começou a "brincar" com web design nas horas vagas, até que resolveu criar o Mundo Blogger para compartilhar o que aprendeu com você através dos tutoriais publicados aqui.

| Website

Fundadora do Mundo Blogger. Autodidata que adora internet, que se encantou com blogs, seus códigos e templates, desde 2009, e por conta disso começou a "brincar" com web design nas horas vagas, até que resolveu criar o Mundo Blogger para compartilhar o que aprendeu com você através dos tutoriais publicados aqui.

Desculpe, os comentários deste artigo estão encerrados.

2 Comentários

  1. Naruto Fan disse:

    Oi Clau…quando comecei o meu Blog retirei logo o titulo, agora não tem como eu personalizar o cabeçalho colocando links no mesmo. Gostaria de saber se há alguma solução !!!

    Desde já agradeço

  2. Wesley disse:

    Passando apuros ! Tentei com este tutorial e o tutorial da ariane e não consegui colocar a div. Fiz exatamente como é explicado ! =;(
    Mas vou continuar tentando até que eu fique furioso suficiente para deletar o blog ! kk

Por gentileza, se deseja alterar o arquivo do rodapé,
entre em contato com o suporte.