Como fazer layouts (Tutorial)

      <! ------------------
                           C O M O   F A Z E R   L A Y O U T S   •   TUTORIAL

                                                                          ------------------ !>

Muitos querem aprender a fazer lauouts como o do Art Design Encomendas, por isso fiz esse tutorial! Para dar certo, leia-o todo e siga todas as etapas. Não se esqueça de ler os avisos para tirar as dúvidas.

Etapa 1: Crie um blog novo só para testar.

Etapa 2: Vá em Design >> Editar HTML, coloque o código de layouts e salve.

Etapa 3: Primeiro edite o
Nome: Nome do Blog
URL: http://URL-DO-BLOG.blogspot.com/
Código by: Ana Carolina - Art Design Encomendas
NÃO RETIRE OS CRÉDITOS OU VAI PARA A LISTA NEGRA!
e salve.

Etapa 4: Agora edite as cores:
- Para os links: procure por (aperte F3 ou CTRL + F) #FF0066 e substitua pelo código da cor que você quer para os links.
P.s.: substitua todos os #FF0066.

- Para o texto: procure por #000000 e substitua pelo código da cor que você quer para o texto.
P.s.: substitua todos os #000000.

- Para o sidebar/post: procure por #FFBFD9 e substitua pelo código da cor do sidebar/post.
P.s.: substitua todos os #FFBFD9.

- Para o background: procure por #FFFFFF e substitua pelo código da cor  que você quer para o background OU procure por background-color: #FFFFFF; e substitua por background: url(LINK-DA-IMAGEM)
P.s.: substitua todos os #FFFFFF.

Etapa 5: Depois de salvar, edite as imagens:
- Para o "sidebar de cima": procure por http://static.tumblr.com/vnmu0ry/mDglpzhcy/sidebar1.png e substitua pelo link da imagem que você quer. Não esqueça de mudar o 100px para a medida da altura da imagem.

- Para o "post de cima": procure por http://static.tumblr.com/vnmu0ry/XjMlpzhp2/post1.png e substitua pelo link da imagem que você quer. Não esqueça de mudar o 150px para a medida da altura da imagem.

- Para o "post de baixo": procure por http://static.tumblr.com/vnmu0ry/zZXlpzhpt/post2.png e substitua pelo link da imagem que você quer. Não esqueça de mudar o 500px para a medida da altura da imagem.

- Para o "sidebar de baixo": procure por http://static.tumblr.com/vnmu0ry/Ht9lpzhdx/sidebar2.png e substitua pelo link da imagem que você quer. Não esqueça de mudar o 250px para a medida da altura da imagem.

Etapa 7: Depois de salvar as imagens, edite os cabeçalho. Procure por
<div style='text-align:center; width:1100px; margin-left:auto; margin-right:auto;'>. Depois de encontrar mude o código todo, desde o <div style... até o </div> pelo código do cabeçalho, obviamente já mapeado no site http://www.image-maps.com/.

Etapa 8: Finalmente edite os créditos. Procure por <div id='credits'>. Depois de encontrar mude o SEU NOME que está logo abaixo e coloque o seu nome de verdade.

Etapa 9: Agora só copie o código e cole no seu blog. Salve e quando salvar, não esqueça de clicar em "Manter gadgets"

AVISO 1: Antes de salvar clique em "Visualizar" para ver se está tudo certinho.
AVISO 2: Não esqueça de salvar depois de cada etapa para não perder o que você modificou.
AVISO 3: NUNCA retire os meus créditos.
AVISO 4: Não repasse o código para ninguém.
AVISO 5: Como eu pego o código? Enviando um e-mail para mim ([email protected])
AVISO 6: Não se esqueça que as larguras das imagens são:
Cabeçalho: 1100px
Sidebar: 300px
Post: 600px
AVISO 7: Obviamente é necessário que as imagens estejam prontas antes do processo de codificação.
AVISO 8: Qual programa você usa? Photoshop CS5, Photofiltre, Photofiltre Studio X e Photoscape.
AVISO 9: Onde eu hospedo as imagens? Em sites como http://www.tumblr.com/themes/upload_static_file, http://www.tinypic.com/ e http://www.imageshack.us/.
AVISO 10: Posso usar o código nas minhas encomendas? Pode, desde que mantenha os créditos.