Coloque imagens rotativas no header do blog rapidamente com gifs animadas

Bem, no post anterior aprendemos como criar uma gif transparente no fireworks, certo?
Hoje vamos colocá-la no Header do blog.

Porque?
Bem, acho que muitos já viram aqueles blogs com imagens rotativas no topo, e ficaram imaginando como são feitos.
Primeiro: a diversas maneiras de criá-las: flash, javascript, css, gifs.
Depois de testar algumas delas, ficou bem claro que o modo mais fácil é criá-las como gifs animadas (como ensinado no post anterior) com cerca de 4 imagens e utilizá-las.

Hospedar a imagem:
Antes do mais nada pegue sua gif animada e hospede-a na internet (recomendo o ImageShack).
Anote o endereço.

Agora vamos utilizá-los:
Acesse o código .xml do seu template (layout - Editar HTML).

Procure:
#header-wrapper {
Adicione:
background-color: #000000;
widht: coloque a largura total do header;
height: coloque a altura total do header;

Background-color indica a cor do fundo de seu header, já que como explicado anteriormente o fundo das imagens são transparentes sendo que, #000000 é a cor preta, utilize uma tabela de cores para escolher a mais apropriada para você.

Procure:
#header {
Adicione:
background-image: url(o endereço da imagem salvo anteriormente);
widht: coloque a largura da imagem;
height: coloque a altura da imagem;
Pronto!

Agora alguns lembretes:

• Faça a imagem do tamanho que desejar contanto que respeite o do header.
• Recomendo que o header-wrapper tenha o mesmo tamanho do outer-wrapper.
• Faça a gif com, no máximo, metade da largura do header-wrapper para poder incluir outros elementos de página depois.
• A altura, se possível, deve ser a mesma.
• Por fim, tente não criar um header muito largo, use uma altura de, no máximo, 300px.

Salve e visualize seu blog.