Personalizar cabeçalho (Header)

Obs: Todos os tutoriais apresentados foram baseados no template Mínima, do Blogger.

Modificar a imagem do topo novo blogger

Existem duas maneiras de modificar a imagem do topo (cabeçalho) do template no novo blogger. A primeira é através do painel do Blogger:

1- Vá em Layout e clique em Editar no espaço que corresponde ao cabeçalho:

2- Na janela que se abre, clique em Arquivo para buscar uma imagem no seu computador e depois escolha se deseja que a imagem apareça por trás do título ou descrição ou se a imagem deve substituir o título.

Note que para que a imagem fique centralizada, ela deve obedecer o espaço destinado ao cabeçalho. No template Mínima, sem modificações, este´espaço é de 660px de largura. Se você usa um template modificado, certifique-se da largura e altura de #header-wrapper, para dimensionar sua imagem.

Outra maneira de modificar é direto no código do template. Para isso, vá em Modelo->Editar HTML-> e procure #header-wrapper:

#header-wrapper {
  width:660px;
  margin:0 auto 10px;
  border:1px solid $bordercolor;
  }

Você pode alterar a  largura (660px) para mais ou para menos e estipular uma altura para o cabeçalho, acrescentando height, desta maneira:

#header-wrapper {
  width:660px;
  height: 120px;
  margin:0 auto 10px;
  border:1px solid $bordercolor;
  }

Hospede sua imagem que deseja colocar no cabeçalho em algum site (ImageShack, Photobucket, TinyPic,etc) e copie o link da imagem.  O link deve ser colocado em background, como abaixo:

#header-wrapper {
  width:660px;
  height: 120px;
  background: url(link da imagem)  no-repeat top center.

  margin:0 auto 10px;
  border:1px solid $bordercolor;
  }


O trecho em verde determina se a imagem se repetirá ou não. O comportamento da imagem pode ser:

no-repeat - a imagem não se repete
repeat - a imagem se repete tanto na horizontal quanto na vertical.
repeat-x - a imagem se repete horizontalmente
repeat-y - a imagem se repete na vertical

O trecho em vermelho determina a posição da imagem no cabeçalho, que pode ser:

top left - a imagem aparece no topo à esquerda
top center - a imagem aparece no topo ao centro
top right - a imagem aparece no topo à direita

bottom left - a imagem aparece na base, à esquerda
bottom center - a imagem aparece na base ao centro
bottom right - a imagem aparece na base à direita.


Se você deseja colocar borda em sua imagem, faça assim:
Borda em toda a imagem:
border: 1 px solid #000000;

Onde  1px é a largura da borda (coloque o valor que quiser), solid é o tipo da borda (no caso, lisa), e #000000 é a cor da borda, no caso preta.

Se deseja borda somente no topo da imagem:
border-top: 1px solid #000000;

Bordar na lateral esquerda da imagem:
border-left: 1px solid #000000;

Borda à direita da imagem:
border-right: 1px solid #000000;

Borda na base da imagem:
border-bottom:1px solid #000000;

Lembrando que, para colocar borda nos quatro cantos da imagem, basta colocar:
border:1 px solid #000000;

Tipos de borda:

dotted-> pontilhada
dashed-> tracejada
solid-> linha
double-> linha dupla
ridge-> cume
inset ->inserido
outset-> outset
none->nenhuma

Supondo que você deseja colocar uma imagem pequena no topo, sobre um fundo de outra cor, coloque
background: #FFFFFF url(link da imagem) no-repeat top left;

onde #FFFFFF é a cor do fundo, e top left é o posicionamento da imagem (à esquerda, no topo).

• Para que o navegador Internet Explore interprete corretamente o código, é preciso sempre dar um bom espaço entre o endereço da imagem e o comando que vem depois:

Background: url(endereço da imagem) __ no-repeat;

O traço representa apenas o espaço necessário entre a url e no-repeat.

Colocar outro elemento no topo da página

Para dividir o cabeçalho com outro elemento (Feed, Banner, etc) é necessário notar a largura total de #Header-Wrapper e a soma dos elementos contidos nele não podem ultrapassar este valor.

Ex:
#header-wrapper{
width: 800px;}

#header{
width: 350px;
float: left; } (flutua à esquerda dentro de Header-Wrapper)

#NovaDiv{
width: 450px;
float: right;} (flutua à direita dentro de Header-Wrapper)

Não se esqueça de acrescentar no HTML a nova DIV, antes do fechamento de header-wrapper, assim:

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

<div id='NovaDiv'><b:section class='novadiv' id='novaid' maxwidgets='1' showaddelement='yes'></div>
</div>

Como retirar o cabeçalho

Procure por:
<b:widget id='Header1' locked='true' title='Novo Templates (Cabeçalho)' type='Header'/>
</b:section>
</div>

Troque true por false e será possível retirar o cabeçalho da página no painel de controle.

Para inserir Elementos de Página no cabeçalho

Procure por
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

Onde está 1, troque pelo números de widgets que deseja inserir no cabeçalho e onde está no, substitua por yes.



Este post foi alterado em julho/2008
Este post foi alterado em set/2008