Vamos continuar com nossa seria de como fazer um template para Blogger. Para ler todas as postagens da serie clique aqui
 
Parte 2 – Criando um topo para seu blog usando uma imagem.

Não tenho dúvidas que é muito melhor um blog com um topo desenhado, trabalhado, ou com um simples logotipo que identifique o blog. Isso faz seu blog ficar bem mais profissional do que usando um simples escrito com o nome do seu blog no topo (header). Então vamos aprender a substituir esse escrito por uma imagem.

1º – Entre em “Layout” -> “Editar HTML”.

2º – Procure (Ctrl + f):

<b:section class=\'header\' id=\'header\' maxwidgets=\'1\' showaddelement=\'no\'>
<b:widget id=\'Header1\' locked=\'true\' title=\'Só testes! (Cabeçalho)\' type=\'Header\'/>
</b:section>

Apague tudo!

Depois encontre:

#header {
width: 760px;
margin: 0 auto;
background-color: $headerBgColor;
border: 1px solid $headerBgColor;
color: $headerTextColor;
padding: 0;
font: $headerFont;
}

h1.title {
padding-top: 38px;
margin: 0 14px .1em;
line-height: 1.2em;
font-size: 100%;
}

h1.title a, h1.title a:visited {
color: $headerTextColor;
text-decoration: none;
}

#header .description {
display: block;
margin: 0 14px;
padding: 0 0 40px;
line-height: 1.4em;
font-size: 50%;
}

E apague tudo também. Teste, se topo saiu completamente e está mais ou menos igual a imagem abaixo, salve.

Assim, acabamos de deletar o antigo topo e suas configurações.

3º – Precisamos criar o topo do blog, para isso vamos editar a div “header-wrapper”, então encontre:

#header-wrapper {

Apague:

background-color: $headerCornersColor;
text-align: $startSide;
margin:0;

Onde background era a cor do fundo, text-align era o tipo de alinhamento do texto e margin é a margem da div.

Agora vamos criar nossas próprias configurações. Use: widght para definir a largura, height para definir a altura e margin para definir a distância do topo das laterais. Caso queira adicionar outros efeitos, procure na web algo mais, porém isso não é necessário.

Vou usar no exemplo:

width: 980px; 
background: url(http://codigosblog.net/blogs/serie/header.jpg) no-repeat;
height: 180px;

Onde background: url(...) no-repeat vai a imagem do topo (usando uma imagem já hospedada), colocamos também 180px de altura (height) e 980px de largura (width).

Teste e salve.
Seu template deve estar parecido com esse:

Seja criativo, crie uma imagem moderna, evite letras grandes de mais e muitos paparicos.

Espero que essa seria ajude muito a todos. Aguardem mais postagens.
Até mais.