Se alguém quiser criar uma imagem para ser usado no blog, clique aqui para ver um manual de como usar o Pixia, um editor de imagem gratuito.

Para baixar o Pixia, clique neste link aqui. Pegue o arquivo "Pixia English Edition Installer" que se instala sozinho.

Abaixo tem uma tabela com os códigos fontes de cada blog. Para salvar o código no seu computador clique no nome do seu blog, use as teclas de atalho "Ctrl + A" (seleciona tudo na página) e "Ctrl + C" (copia o item selecionado). Depois abra o Notepad (bloco de notas) e use "Ctrl + V" para colar tudo o que foi copiado. Agora é só salvar como um texto.

Deixei o código colorido para facilitar a explicação. Tudo o que estiver na cor verde pode ser modificado. O que for preto não mexa. E o que estiver em vermelho tem que ficar exatamente como está, sem pular linha ou qualquer outra modificação.

As primeiras coisas que podem ser modificadas estão no topo do código, entre as palavras <STYLE> e </STYLE>. É neste local que você define o tipo de fonte (font-family), que pode ser Arial, Times, Tahoma, Courier... Ou todas juntas, pois se um computador não tiver uma fonte, usará a próxima.

Você pode definir se a fonte será em negrito (font-weight: bold) ou normal, simplesmente removendo esta declaração. Você pode definir a cor da fonte (font-color:#FFFFFF) e para isso você pode usar esta tabela de cores.

Definimos o tamanho da fonte com font-size:12px, sendo que 12px (píxeis) é bom tamanho. Mas você pode usar desde 8px até 60px. Mude de 2 em 2px para ver o efeito.

Text-decoration é usado principalmente em um link. Se não queremos que apareça aquela linha embaixo do link usamos text-decoration: none, caso contrário podemos remover esse comando.

Na parte BODY você pode mudar a aparência da barra de rolagem, sendo que os principais itens a mudar de cor são Scrollbar-Face-color e Scrollbar-Track-color. Veja a figura do lado esquerdo.

Com Background-Color definimos a cor do fundo da página. É bom definir isso de acordo com a cor da imagem de fundo.

Em Background-Image definimos a imagem que vai ficar no fundo da página. Junto com essa tag podemos definir que ela se repita apenas verticalmente com background-repeat: repeat-y. Se você quiser que a imagem fique "parada" em relação ao texto quando descer com a barra de rolagem você pode colocar background-attachment: fixed.

Quando você quiser inserir qualquer imagem use a tag <img src=".... A imagem do topo tem que ser definida para ficar no topo e de preferência, "atrás" de qualquer texto. Assim:

<img src="imagem.jpg" style="Z-Index: 1; Position: absolute; Left:0; Top: 0">

z-index indica o quanto o objeto deve ficar para "frente" da página. Digo objeto porque style pode ser usado com qualquer outro comando HTML. position: absolute significa que vamos definir a posição em termos absolutos. Não se preocupe muito com o significado disso. Aqui estamos dizendo para o objeto ficar "zero" pixel a esquerda (left: 0px) e "zero" pixel para baixo (top: 0px).

Agora vamos tratar de uma parte bem interessante. Os DIV, que basicamente podem ser entendidos como divisores ou blocos. Eu sempre divido os blogs em 3 blocos distintos: Perfil, Amigos e Mensagens.

Tudo que for colocado entre as tags <DIV> e </DIV> ficará em uma determinada posição. Bem, vocês já aprenderam como colocar numa determinada posição com o position. Agora vocês podem controlar a largura de cada bloco usando width: 400px. Notem que todas essas opções são separadas por ";" (ponto e vírgula) e que sempre tem uma aspas no ínicio e no final de style.

Se faltar essa aspas todo o template ficará numa bagunça total.

A maioria das imagens de fundo tem 800 píxeis de largura (ou deveriam ter, pois é mais ou menos "padrão" nos monitores de 15 polegadas). Bom, geralmente eu defino a largura do bloco das mensagens como 400 a 440 píxeis. Perfil e Amigos eu coloco mais ou menos 170px cada um. Veja abaixo como ficaria cada bloco:

<Div id=post style="Z-Index: 10; Width: 420; Position: absolute; Left:180; Top: 410"></div>
<Div id=amigos style="Z-Index: 10; Width: 170; Position: absolute; Left: 10; Top: 360;"></div>
<Div id=perfil style="Z-INDEX: 10; Width: 170; Position: absolute; Left: 630; Top: 360;"></div>

No bloco dos Amigos insiro apenas os blogs amigos. No Perfil eu insiro o perfil e outras coisas, mas isso vai a gosto de cada um.

Vocês percebem que nestes blocos eu coloco z-index como sendo 10 que é para eles ficarem acima de qualquer imagem de fundo. Pode ser um número qualquer entre 2 e infinito.

Abaixo tem uma tabela comparando as características de cada blog.

À parte significa que ele tem, mas tem que assinar o serviço em outra parte do servidor de blog.

Via código quer dizer editar o código do template para poder inserir ou modificar.

Utilitário quer dizer que o blog tem um utilitário que facilita inserção do código.

O blog do Blogger já não é mais gratuito, mas para quem tem um e quer mudar o template aqui está um tutorial de como fazê-lo.

O blog do UOL tem um monte de "enfeites" como o "Recomende o blog", "Vote no blog" e assim por diante. Seu espaço é pequeno (1 Megabyte) e por isso as pessoas deveriam colocar data no nome das imagens. Assim poderiam ir apagando as mais antigas.

O Weblogger até pouco tempo não estava deixando inserir imagens. Parece que o problema se resolveu.

O Theblog tem um bom espaço, mas seu sistema de comentários não organiza as entradas por ordem de chegada, e nem exibe o endereço do blog dos visitantes. Para ver o endereço de quem comentou só indo editar os comentários. E todos os blogs ficarm com um enorme "quadro" no topo. Pode ser até interessante, pois é onde fica o "Dê sua opinião ao Blog", o teu email, e um "carinha" de perfil. O chato é a enorme propagada do theblog.

Deixei o pior para o final: O blog do Sapo.

Primeiro ele é um pouco confuso para se cadastrar. Segundo, seu sistema de comentário é mais confuso ainda, necessitando de um javascript para abrir em uma janela pequena como nos outros blogs. Também é necessário editar a página do comentário para o campo de mensagem não ultrapassar a janela aberta. E não está sendo possível comentar sem por o endereço de email do visitante. Tem gente que prefere não por.

Para se inserir um link para outra página usamos a tag

A opção target="_blank" faz com que a página seja aberta em outra janela. Se quiser que abra por cima da mesma página é só remover essa opção. Para que os links não fiquem todos na mesma linha coloque a tag <BR> para pular uma linha, ou <P> para pular duas linhas.

Para se inserir um arquivo de música usamos a tag

Pode ser colocado arquivos mid, wav ou mp3. Só não coloque arquivos muito grandes, maiores que 200 Kb ou irá demorar muito para começar a tocar. Width e Height são respectivamente a largura e altura do "player" que irá aparecer em sua página. Autostart="true" faz com que a música começe a tocar assim que entrarem na página. Troque para "False" se não quiser que isso ocorra. Loop="true" faz com que a música toque várias vezes. Você pode trocar "true" pelo número de vezes que você quer que a música repita. Por exemplo: Loop=3 para repetir 3 vezes.

Você também pode "enfeitar" ainda mais suas páginas colocando "bordas" personalizadas nos "blocos". Clique aqui para ver alguns exemplos

Não sabe se seu código HTML está correto? Use o TagCheck para verificar suas páginas. Ele indica os erros no código e possíveis soluções.

Agora você fez dezenas de páginas e quer fazer uma pequena (ou grande) modificação em todas elas. Editar uma por uma é um trabalho cansativo. Felizmente existe o Batch Text Replacer que faz mudanças em todas as suas páginas simultaneamente.