Ola visitantes do Ninjas Designer nesta aula aprenderemos a como Dividir o Header em 3 Colunas
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.
Tutorial feito por Mundo Blogger.
Se gostou comente
Se gostou comente
0 comentários:
Postar um comentário