7 passos para deixar um template do Blogspot do seu jeito

por Celso Lemes em 20/03/2009

na categoria 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



{ 33 comentários… leia abaixo ou deixe o seu }

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

23 Robertinha 20/05/2010 às 5:51 pm

É exatamente nessa parte que eu tb travo Celso, a explicação não foi o suficiente pra dizer o q fazer após localizar e substituir as imagens. Fica complicado pra quem começa agora!
Após localizar as imagens eu substituo pelas q editei certo? mas depois de postar e ter a url? é isso??? afff deculpa!

Responder

24 José Pinho 16/04/2010 às 4:03 pm

Boa tarde a todos,

Estou a criar um blog onde quero adiconar o botão de donativos que depois vai dar á minha conta PP. No entanto quando coloco no editor do blog dá-me um erro:
“We were unable to preview your template
Please correct the error below, and submit your template again.
Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
XML error message: The element type “img” must be terminated by the matching end-tag “”. – mas não consigo resolver
Será que tenho de colar o code gerado pelo PP noutro sito do code do blog?? se sim onde?? É preciso fazer mais alguma alteração??

Responder

25 Celso Lemes 17/04/2010 às 10:41 am

José,
Você deve estar adicionando o botão no lugar errado do template.
Experimente adicionar como um Gadget no blog.

Abraço!

Responder

26 joao bobo 13/05/2010 às 11:04 pm

Eu já fazia desse desse jeito.
É trabalhoso, mas compensa pra ter um template único.

Responder

27 Henrique Weiland 26/05/2010 às 4:22 pm

Suas dicas são ótimas, principalmente para quem está começando agora, como eu. Mas estou enfrentando uma dúvida. Eu quero trocar a barra lateral do template que baixei. Como fazer isso eu sei, mas onde posso encontrar imagens que sirvam para a barra lateral?

Responder

28 Celso Lemes 27/05/2010 às 12:03 pm

Henrique,
Você pode utilizar um serviço como o CSS Menu Maker.

Abraço!

Responder

29 Henrique Weiland 28/05/2010 às 11:53 am

Hi, Celso, acho que tu não me entedeu. Eu estou precisando apenas saber onde encontro imagens que sirvam para mim colocar como fundo da barra lateral do meu blog, não sei se tem um nome específico, mas é a barra onde ficam os seguidores do blog e os gadgets. Se puder me ajudar, agradeço.

Responder

30 Rogerio Oliveira dos Santos 25/07/2010 às 12:29 am

Olá, Gostaria de saber um pouco mais sobre o Blogspot, eu posso criar um template para vender Sapatos, Minha Mulher vende e gostaria de montar um site especifico, mais afinal, o blogspot é gratuito, desculpem a minha ignorancia, se alguem puder me ajudar ou mesmo indicar templates já relacionados eu seria bem grato.

Responder

31 Celso Lemes 25/07/2010 às 11:08 pm

Rogerio,
Você pode criar o template sim, mas isso exige um pouco de conhecimento sobre HTML e CSS. Recomendo que apenas troque por um template pronto.
O Blogger é completamente grátis. Você só paga alguma coisa se quiser ter um domínio do tipo seusite.com

Abraço!

Responder

32 Lucas Bazarello 06/08/2010 às 12:33 pm

como deixa meu blog com cara de sete ?

Responder

33 Celso Lemes 07/08/2010 às 7:14 pm

Lucas,
Seria necessário que você entendesse um pouco sobre como o Blogger funciona e também sobre HTML e CSS para fazer modificações no template.
Recomendo que crie um site mesmo. Utilize o Webnode.

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.

Post Anterior:

Próximo Post