Muitas vezes, começamos a aprender como utilizar uma ferramenta e automaticamente passamos a acreditar que todos possuem tal conhecimento (acho que eu já disse isso), o que na verdade, acaba prejudicando quem está aprendendo, pois se torna cada vez mais difícil encontrar informações básicas sobre o seu blog.

Uma das coisas que me surpreendeu, foi ver nas estatísticas do blog o número de pessoas que chegam até aqui procurando informações de como encontrar o tamanho certo da imagem que usa ou quer usar no header (cabeçalho) do blog. Não é difícil entender, pois basta procurar um pouco, para encontrar vários blogs novos com a imagem torta ou "diferente" do normal.

Então, se você é um desses que chegou até aqui procurando por isso, aí vai:

Descobrindo o Tamanho da Imagem

Vá até a parte de edição de html do seu blog (lembre-se de salvar uma cópia do seu template sempre que for modificar algo), procure pelo trecho abaixo:

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

Esse é o trecho que indica a largura do header do seu blog. (retirado do modelo mínima, se você usa um outro modelo, procure por um trecho parecido, o importante aqui é identificar o #header-wrapper). Onde:

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

Para colocar uma imagem no header, basta que sua imagem tenha a mesma largura indicada aqui.

O modelo mínima não vem com indicação da altura do header, mas você pode acrescentar esse trecho, caso esteja tendo algum problema com a imagem. Supondo que sua imagem tenha 180 pixels de altura, basta acrescentar height:180px; (não se esqueça do ponto-e-vírgula no final). No nosso exemplo ficaria assim:

#header-wrapper {
width:660px; -----------------------------------> Largura do Header
height:180px;
margin:0 auto 10px;
border:1px solid $bordercolor; ----------> Borda do Header
}

Se você quiser, pode retirar a borda que está marcada aqui, basta modificar o código assim:

border:0;

Adicionando Uma Imagem

Conseguindo descobrir a largura e sabendo a altura do header, fica fácil adicionar uma imagem ao mesmo. Coisa que pode ser feita de duas formas:

01 - Direto no código:

Para usar uma imagem direto no código, você vai precisar hospedá-la em algum lugar. Você pode usar o próprio Blogger para isso, como eu já escrevi nesse texto:

Blogger: Onde Hospedar Imagens com Segurança

Com o endereço da imagem em mãos, basta inserir o trecho que está em negrito no código:

#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
background: url(ENDEREÇO DA IMAGEM) bottom center;
}

Se quiser alinhar a imagem de outra forma, troque o bottom center! Alinhar a esquerda: bottom left ou a direita bottom right.

02 - Através do campo "Layout" do blog:

Na sua conta do blogger, clique em "Layout" no blog que você quer adicionar a imagem e na página "Elementos de página" clique em "Editar" (na parte relativa ao header), clique em "Procurar" e encontre a imagem no seu computador. Se a imagem conta com o nome do seu blog nela, marque a opção "Em vez de título e descrição", caso contrário, com a opção "Por trás de título e descrição" (ideal) marcada, clique em "SALVAR ALTERAÇÕES".

Confira o resultado, estando tudo como você queria é só clicar em "SALVAR" e pronto!