7 passos para deixar um template do Blogspot do seu jeito

by Celso Lemes on 20/03/2009

in Webmaster

Este tutorial foi escrito por Luigi Facchinetti do blog Tatiana Malafia Fansite.

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.)

Customizar Template do Blogspot

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

Customizar Template do Blogspot
Clique na imagem para ampliar

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
Customizar do Blogspot

Bottom
Customizar template do Blogspot

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

Top
Customizar template do Blogger

Bottom
Customizar Template do Blogger

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.

Alterar Template do Blogger

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

Código de Templates do Blogger

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.

Visite o site Tatiana Malafaia Fansite e prestigie o autor deste tutorial.

Related Posts with Thumbnails

Mais Artigos que você pode estar interessado


Cursos 24 Horas

{ 22 comments… read them below or add one }

1 Duarte 20/03/2009 às 11:20 am

Eu já nao uso o Blogspot mas ….concordo que sao umas dicas Excelentes!

Responder

2 Luigi 20/03/2009 às 12:59 pm

Celso,

Valeu por publicar este artigo!

Espero que possa ajudar as pessoas!

Um abraço!

Responder

3 Tohn 20/03/2009 às 7:49 pm

Uma boa ajuda para os qe não consegue se virar só.
Antes de aprender CSS eu editava minhas templates, sem nehum segredo.

Responder

4 Tohn 20/03/2009 às 7:56 pm

Celso é você que posta no Criar Blog Blogger? Tá paradão ele .

Responder

5 Celso Lemes 21/03/2009 às 10:26 am

Tohn,
Eu tenho um blog sobre blogs no endereço http://www.criarblog.com, meu irmão tem um blog também mas é http://www.criarblog.info que fala sobre o blogger.
Se você estiver falando do http://www.criarblog.com ele realmente está parado, mas é porque eu estou dando prioridades a um negócio e um E-book que eu estou fazendo, além do fórum que eu vou lançar esse final de semana.

Abraço!

Responder

6 Juliana Furtado 25/03/2009 às 12:59 pm

Gostei das dicas,excelentes,valeu Celso! :smile: :grin: :wink: :cs:

Responder

7 Juliana Furtado 25/03/2009 às 1:20 pm

Celso,gostaria de saber mais sobre esse “negócio” de “Todos os direitos resevados”,como tem no rodapé do seu site,será que você poderia fazer um artigo sobre isto? :?: :neutral:

Abraços!! :smile: :cs:

Responder

8 Celso Lemes 25/03/2009 às 5:15 pm

Juliana,
Eu também não entendo muito para que ele serve, mas vou dar uma estudada sobre o asunto.

Abraço!

Responder

9 gustavo 25/03/2009 às 9:29 pm

olha ta bom mais e melhor faz um saite que tm

saiba por exemplo: @habbo.com.br ou assi

neo pet navegador.com.br :cs:

Responder

10 bidoow.exe' 26/03/2009 às 9:35 pm

massa ! estou começando um no blogspot com template proprio. !

http://www.wareztotal.vai.la/

Responder

11 Claudia 27/03/2009 às 3:26 pm

Estou aprendendo muito com os seus artigos. É uma ótima ajuda, pois ainda estou tomando um laço no blog. rsrs :lol:

Responder

12 Celso Lemes 27/03/2009 às 7:38 pm

Claudia,
No começo todos nós temos dificuldades. É só você não desistir que uma hora você consegue.

Abraço!

Responder

13 Mr. Cobain 30/03/2009 às 12:40 am

Mt bom o post.

Responder

14 gadarf 10/04/2009 às 1:33 pm

É sempre bom mudar a cara padronizada dos blogs.

Responder

15 Clareamento 17/04/2009 às 5:04 pm

Vou tentar fazer esse.
Vlw

Dani

Responder

16 Alan Oliveira 25/05/2009 às 6:57 pm

Excelente dica!
Estou à procura de tutoriais para fazer o meu próprio layout.
Tem algum que seja completo? Tipo… Adicionar “esse” ou “aquele” tipo de aplicação, coluna, barra de ferramentas, e tudo mais?
Eu vi um template para wordpress, com uma “barra de ferramentas”, semelhante à do windows, dentro do próprio blog, onde o leitor tinha acesso aos feeds, posts, comentário, e isso reduzia e muito, o número de gadgets do blog, e carregava mais rápido.
Um abraço!

Responder

17 Marlon 01/07/2009 às 5:35 pm

neccessária Celso, que programa HTML você usou nas imagens?

Responder

18 Celso Lemes 01/07/2009 às 9:55 pm

Olá Marlon,
Eu utilizo o Corel Draw para criar/editar minhas imagens.
Sei que ele não é o programa mais recomendado, mas é o que eu sei usar.

Abraço!

Responder

19 Allan Gomes 03/08/2009 às 9:00 am

eai galera eu tenho esse blog o PsicoGamesDownload
gostaria de saber se tem alguma maneira de mecher no HTML ele dele e deixar ele com cara de site tipow o meu num e http://psicogamesdownload.blogspot.com
quero ver se consigo deixa-lo a sim
http://www.psicogamesdownload.com

se algum solber ou ate vc memso Celson ou o seu
irmão manda pra o meu email ai ou mim add no msn pra gente poder trocar umas ideias se for possivel blz eai galera quem estiver a fim tb eu achou aminha pergunta intereçante pode mim add
meu email de trabalho eo mesmo do blog

psicogamesdownload@hotmail.com

flw um abraço fui..

Responder

20 celsoalemes 03/08/2009 às 10:27 am

Allan,
Para mudar o endereço do seu blog para um domínio próprio é necessário que você compre um domínio diretamente no Blogger ou em um site de registro que possibilite a configuração por Cname. Você pode aprender como fazer isso aqui.

Responder

21 Karla 06/02/2010 às 2:58 pm

Poxa realmente nunca mexir em um blog… e conseguir baixar o macromedia dreamweaver, conseguir até localizar as imagens e salvar, só que vc fala que tem que fazer download, chegou aí não entendir… fazer download como assim? precisa de algum programa especifico?
Poxa me ajuda… Obrigadão…

Responder

22 Celso Lemes 06/02/2010 às 11:06 pm

Karla,
Sua dúvida está muito vaga, não sei a que parte você está se referindo. Tente explicar melhor a sua dúvida.

Abraço!

Responder

Deixe um comentário

Atenção antes de Deixar um Comentário!
- Se o seu comentário for relacionado ao post, tenha certeza de que o leu.
- Todo comentário obsceno, ilegal, ofensivo, anônimo, escrito todo em maiúscula, contendo gírias em excesso ou estritamente publicitários, serão "apagados".
- Somente inclua links no comentário se ajudar a explicar o seu comentário.
- Se precisa de ajuda, procure deixar o máximo de informação possível.
- Não peça para adicionar ao MSN.
- Spam não será tolerado.


Este site lhe foi útil? Então ajude na divulgação clicando aqui.

Previous post:

Next post: