Imagem no cabeçalho do blog

Aprenda a colocar imagem no cabeçalho de seu blog.

Outra maneira de modificar é direto no código do template. Para isso, vá em Modelo->EditarHTML-> 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:

Como retirar o cabeçalho

Procure por:




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

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