Dominio: mundoblogger.com.br
Chave: 6750f38d68212cb9ffc85aee2a0ef61d0ebf4f04
Hora do cache: 1500800081
Vida do cache: 1500843281
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 Header em 3 colunas

Em outros posts, você já viu algumas maneiras de Personalizar o cabeçalho do Blog. Viu também como dividir o cabeçalho com outro elemento.
Neste tutorial veremos como dividir o Header com 2 colunas laterais e 1 coluna abaixo.

A primeira coisa a fazer, é um backup do seu template para evitar transtornos, caso algo saia errado.

Antes de iniciar as alterações, se no seu template estiver configurado o Titulo no cabeçalho, você deverá deslocá-lo para outro lugar, como a sidebar ou o footer, por exemplo, para que possamos trabalhar na inclusão das colunas.

Entre na edição HTML do seu template, sem clicar em “Expandir modelos de widgets” e procure pelo seguinte código:(você pode usar ctrl+f colando a 1ª linha do código para facilitar sua busca):


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

Onde está escrito true – troque por false.
onde está maxwidgets=’1′– troque por maxwidgets=’5′.
onde está showaddelement=’no’ – troque por showaddelement=’yes’.

Acho que não preciso dizer mas, em todo caso: É óbvio que você não vai conseguir localizar esta parte: “title=’TITULO-DO-SEU-BLOG (Cabeçalho)”, porque onde está escrito “TITULO-DO-SEU-BLOG” é o título do seu blog, portanto, procure pela 1º e 2º linha.

Salve as alterações e volte na edição de HTML.
Mantenha desmarcada a opção “Expandir Modelos de Widgets” e localize novamente todo o código postado acima,só que agora você irá SUBSTITUI-LO pelo seguinte código:


<!-- Início do Header-->
<div id='header-wrapper'>
<div id='header-column-container'>
<div id='header-left' style='width:50%; float: left; margin:0; '>
<b:section class='header-column' id='header-column-left' preferred='yes' style='float:left;'/>
</div>

<div id='header-right' style='width:50%; float: right; margin:0; '>
<b:section class='header-column' id='header-column-right' preferred='yes' style='float:right;'/>
</div>

<div style='clear:both;'/>

<div id='header-bottom' style='padding: 10px; '>
<b:section class='header' id='header-column-bottom' preferred='yes'/>
</div>
<div style='clear:both;'/>
</div></div>
<!-- Fim área do Header -->

Ajuste as larguras desejadas ns campos destacados em negrito.
Visualize, e se estiver tudo certo, salve!

Aplicando estilos ás colunas:

Continue na edição HTML do seu template, pois agora iremos aplicar estilos as colunas do Header.
Procure por:


/* Header
--------------------------------------------*/
#header-wrapper {

e SUBSTITUA tudo que estiver contido dentro dos estilos de Header(o código completo até o final),pelo código abaixo,ajustando os valores destacados de acordo com as medidas de seu template:


/* Header
--------------------------------------------*/
#header-wrapper {
margin: 0 auto 10px;
width:990px; /* ajuste a largura */
border: 1px solid #fff; /* escolha a cor da borda */
padding: 5px; /* ajuste as medidas */
}

#header-column-container {
margin: 0;
clear: both;
border: 1px solid #fff; /* escolha a cor da borda */
padding: 10px;/* ajuste as medidas */
}

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

.header-column {
padding: 0 10px;
}

#header-column-left { /* coluna a esquerda */
margin: auto;
padding: auto;
float: left;
clear: both;
}

#header-column-right { /* coluna a direita */
margin: auto;
padding: auto;
float: right;
clear:both;
}

.header {
margin: 5px;
text-align: center;
color: #fff; /* escolha a cor da fonte */
}

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

.header a {
color: #fff; /* escolha a cor do link */
text-decoration: none;
}

.header a:hover {
color: #fff; /* escolha a cor do link quando passa mouse em cima */
}

.header .description { /* texto de descrição do blog */
margin: auto;
padding: auto;
text-transform: uppercase;
text-align: center;
letter-spacing: .2em;
line-height: 1.4em;
font: /* escolha a fonte */;
color: #xxx; /* escolha a cor */
}

.header img {
margin-left: auto;
margin-right: auto;
}

Não esqueça que você deve ajustar todos os valores contidos no código acima de acordo com os elementos que você adicionar às colunas (feed, caixa de busca, menu, banner, etc).
No exemplo acima eu apliquei estilos básicos, mas você pode aplicar os estilos de acordo com sua preferência.



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.

7 Comentários

  1. .:: Clau ::. disse:

    Oi Max,
    Que bom que conseguiu \o/
    Obrigada pelo comentário querido…bjos

  2. Max Martins disse:

    Oi, Moça!

    Apliquei esse tutorial para dividir o Footer. Porém, consegui apenas dividi-lo em duas colunas.

    Obrigado por compartilhar mais essa dica.

    Abraços ;D

  3. .:: Clau ::. disse:

    Wave
    Tente refazer, vc deve ter cometido algum erro. Não tenho como ajudar pq não há como eu saber o q aconteceu no seu template.

  4. » Wav? disse:

    No meu dá aquele velho erro quando substituo o primeiro código.

    Não foi possível analisar o seu modelo, pois sua formatação é inadequada. Certifique-se de que todos os elementos XML estão fechados adequadamente.
    Mensagem de erro em XML: The element type "div" must be terminated by the matching end-tag "
    ".

    Já tentei arrumar as 'div's' mas não consigo!
    Ajuda ae!
    Valeu.

  5. Bauru disse:

    Não, Clau. O que dá pra dividir é o footer e a sidebar. O header não oferece a opção de dividir. Eu consegui fazer isso (dividir o header), mas adaptei o seu tutorial e exclui parte do código original. Não sei ainda se o que eu exclui fará falta em algum momento. Até mais.

  6. .:: Clau ::. disse:

    Bauru
    Não! Pq nos templates designer de modelo, para dividir os elementos em colunas, (como header, footer, sidebar)o procedimento é feito diretamnente pelo painel do blogger.
    Dá uma olhada na aba designer.

  7. Bauru disse:

    Clau, um problema. Este tutorial não se aplica aos novos modelos, não é? Haverá uma atualização no post? Vou tentar fuçar, assim que passar a época de fechamento de bimestre nas escolas. Beijo e bom fim de semana.

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

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