Dominio: mundoblogger.com.br
Chave: 6750f38d68212cb9ffc85aee2a0ef61d0ebf4f04
Hora do cache: 1495697232
Vida do cache: 1495740432
Status: 1
Mensagem: Centive nao respondeu
Chave do Pedido: 11808bbc6205bade68f0b70c302eaa74d4305945
Chave do Produto: PROKEY
Scroll Top

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

Hospedagem - 728 x 90

Header

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)




De um play no vídeo abaixo e aprenda a Criar blogs Profissionais




Gostou deste artigo? Ajude nosso projeto.
Compartilhe em suas redes sociais nos botões abaixo:

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.

Sobre o autor | 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.

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

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

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