7 passos para deixar um template do Blogspot do seu jeito

Alterar um template do Blogger é um processo simples. Consiste em pegar um template pronto com a estrutura que você deseja e editar suas imagens e cores do layout. Recomendo que crie um blog de testes, para que não haja nenhum acidente com seu blog.

Vamos ao passo a passo (vou deixar disponíveis os arquivos que utilizei para seguir o passo a passo):

1. Baixe o template para o seu computador, “clique aqui“.

2. Clique com o botão direito no arquivo e selecione “editar”. Irá abrir um bloco de notas com todo o código. Copie o código e cole em um editor HTML (Dreamweaver, FrontPage, NVU etc.)

3. Após colar o código em um editor HTML, mande localizar os seguintes termos: jpg, gif, png.

4. Efetue o download de todas as imagens que você encontrar com os termos procurados. Salve todas na mesma pasta, e tenha o cuidado de preservar o nome original.

5. O próximo passo é editar as imagens. Para ilustrar este tutorial eu escolhi a imagem do topo e da base da postagem (denominadas “top” e “bottom”):

Top

Bottom

Agora as imagens com alguns ajustes, para deixar do meu jeito:

Top

Bottom

Você pode deixar as imagens do jeito que você quiser, apenas respeite as delimitações, como por exemplo o espaço em branco na imagem acima onde ficará o conteúdo da postagem. Respeite também o tamanho original das imagens, para que o blog não fique deformado.

Depois de editadas todas as imagens, faça upload para um hoster de imagens (ex.: imageshack). O motivo por eu ter falado para preservar os nomes originais das imagens, é que agora fica muito mais fácil para substituir no código. Localize novamente cada imagem e vai substituindo os links; isso irá trocar as imagens originais para as imagens editadas.

6. Agora as imagens estão editadas. Chegou a hora de adaptar as cores do layout (as partes que não são imagens).

1 – Defina quais cores você vai querer para Background (fundo da página), cor da Fonte, etc. Utilize o photoshop para pegar o ID das imagens (ex.: #3c67c8 – um dos azuis utilizados na minha edição da imagem). Lembre-se de utilizar cores que combinem com as que você usou para editar as imagens.

2 – Para alterar as cores, vá novamente no código e altere os valores em “Variable Definitions”:

7. Pronto, depois de todos estes ajustes, seu blog está com a sua cara! Só não esqueça de não retirar os créditos do criador do template e de usar um blog para testes durante as mudanças, e só passar o layout para seu blog original somente depois de tudo pronto e funcionando.

Este é um guest post escrito por Luigi que administra o Adealz.