Header Vanessa S.
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.
Oi Max,
Que bom que conseguiu \o/
Obrigada pelo comentário querido…bjos
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
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.
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.
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.
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.
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.