Fazendo meu layout - Parte 3

Hoje vamos aprender a colocar uma imagem como o cabeçalho do blog, ou seja, a imagem com o nome do blog.

Você pode usar o HTML ou não. Você escolhe.

Antes de qualquer coisa você precisa criar sua imagem usando um programa como PhotoShop, PhotoFiltre, PhotoScape ou outro de sua preferência. 

Você pode criar uma imagem da largura do blog, como eu uso, ou da largura total que aparece na tela quando o seu blog é acessado, como o Go Imagine.

Imagem na largura do blog sem HTML

No painel do blog, vá em "Layout" clique em "Editar" no gadget "Cabeçalho".

Vai abrir a janela abaixo. Procure a imagem do seu cabeçalho e marque as opções como na imagem.

Feito isso, salve as modificações. 

Imagem na largura do blog usando HTML

No seu HTML, procure por:

.content-inner {

Logo abaixo dele vai estar assim:

background: url (URL DA IMAGEM) no-repeat;
  background-position: ;
  background-color: ;
} 

Coloque o url da imagem e visualize. Sua imagem ficou meio desalinhada não é? Para arrumar isso procure por:

.header-inner .Header .titlewrapper

e logo abaixo, antes de fechar a chace } cole isso:

margin-top: 10px;

Você vai acrescentando ou diminuindo esse valor até alinhar sua imagem ao resto do seu blog. Lembre-se que existe números negativos e positivos. 

Imagem com largura total que aparece na tela quando o seu blog é acessado

Esse é um pouquinho mais complicado. Antes de tudo a imagem do cabeçalho precisa ser grande. Na hora de fazer use as medidas 1343 px por 617 px. 

Na verdade a imagem do cabeçalho vai ser usada como um dos planos de fundo do blog. Será necessário dois planos de fundo.

Não esqueça de hospedar sua imagem!

No HTML do seu blog, procure por:

body {

Substitua todo o código que está antes da chave } por isso:

body {
font: 12px arial,verdana,sans-serif;
padding:0px;
margin:0px;
background: url("URL DO CABEÇALHO") repeat; }
html {
background: url("URL DO PLANO DE FUNDO") repeat; }

Visualize e salve.

Gente, por hoje é só. Beijos!