Personalizar a área do cabeçalho (header) do novo Blogger

Tudo depende de sua criatividade em arrumar o seu código

 DEMO

Já tratei de como personalizar a área da sidebar (colunas) e a área das postagens. Vamos agora personalizar a área do cabeçalho (header)

Saiba que estas dicas são para o novo Blogger e que, o template usado é o Simple.

Vá até o Modelo de seu blog, clique em Editar modelo

Não se esqueça de antes de começar salvar uma cópia de seu template, caso não dê certo, é só reinstalá-lo. 

Procure por:


.Header h1 {

  font: $(header.font);

  color: $(header.text.color);

  text-shadow: $(header.shadow.offset.left) $(header.shadow.offset.top) $(header.shadow.spread) rgba(0, 0, 0, .2);

}

Troque então por este código abaixo.

.Header h1 {
  font: $(header.font);
  color: $(header.text.color);
  text-shadow: $(header.shadow.offset.left) $(header.shadow.offset.top) $(header.shadow.spread) rgba(0, 0, 0, .2);
margin: 5px;
background: #FFC0FF url(AQUI O ENDEREÇO DE SUA IMAGEM) no-repeat;
padding:120px 22px;
text-align: right;/*troque right por left para o titulo ficar a esquerda*/

moz-box-shadow: 0 0 5px 5px #888;
-webkit-box-shadow: 0 0 5px 5px#888;
box-shadow: 0 0 5px 5px #888;

}

Algumas considerações:

O código em amarelo representa a imagem. Cole aí o endereço de sua imagem.
O código em vermelho representa a cor de fundo do cabeçalho
O código em azul representa onde ficará o título do blog
Para que sua imagem cubra toda a área do cabeçalho, apague o código que está em verde.
Para aumentar ou diminuir o comprimento da header, mude o número que está em roxo
Se não quiser o sombreamento, apague os códigos que estão na cor rosa