Faça seu prórpio template!

Esse tutorial ensinará a configurar o html de um layout (ou template) para o UOL Blog.

Programas necessários: Paint e Bloco de notas

1. Copie cole o código abaixo no Bloco de Notas (ou o editor de texto de sua preferência).
Para copiar, tecle Ctrl + C


2. Localize essa parte do código:

Em COLOQUE AQUI SEU BACKGROUND cole a URL do seu background (aquela segunda imagem que fizemos, só com as colunas), em COLOQUE AQUI SEU LAY cole a URL do seu template (a imagem do template, com o desenho e uma parte das colunas, certo?!). Em width deixe 780 mesmo.

3. Agora abra a imagem de seu lay/template no Paint, clique em Imagem - Atributos e anote a Altura. Volte no seu código e coloque esse número no Height.


4. Localize essa parte do código:


5. Para saber o tamanho do Top vá lá no Paint onde está aberta a imagem de seu lay. Selecione a parte de baixo do título até o topo da página [isso mesmo, de baixo para cima] como mostra a figura. Sem soltar o botão do mouse, pegue o 2º número que aparece ali embaixo.


6. Para saber o tamanho do Left meça da coluna até a borda esquerda da página, como mostra a figura. Sem soltar o botão do mouse, pegue o 1º número que aparece lá embaixo.


7. Agora meça o width, a largura da coluna, conforme a figura, ainda com o botão do mouse pressionado pegue o 1º número que aparece ali embaixo.


8. O height não precisa alterar o valor que está lá, porque a página não terá uma altura definida já que aumentrá conforme você colocar o conteúdo. Agora localize a Coluna 2 e repita os passos 5, 6 e 7 para encontrar o valor do Top, do Left e do Width.


Quando configurar o html do seu template sempre comece pela coluna do perfil, mesmo que ela não seja a primeira na sua imagem é a primeira no html e isso ajudará a não se confundir.

Ir para a Parte 3 - Configurando o CSS



Espero que esse tutorial tenha ajudado, se ajudou, credite-me , se não ajudou me mande um comentário para me ajudar a melhorá-lo.