 |
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.
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”):
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.
Visite o site Tatiana Malafaia Fansite e prestigie o autor deste tutorial.
{ 33 comentários… leia abaixo ou deixe o seu }
Eu já nao uso o Blogspot mas ….concordo que sao umas dicas Excelentes!
Celso,
Valeu por publicar este artigo!
Espero que possa ajudar as pessoas!
Um abraço!
Uma boa ajuda para os qe não consegue se virar só.
Antes de aprender CSS eu editava minhas templates, sem nehum segredo.
Celso é você que posta no Criar Blog Blogger? Tá paradão ele .
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!
Gostei das dicas,excelentes,valeu Celso!
:cs:
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?
Abraços!!
:cs:
Juliana,
Eu também não entendo muito para que ele serve, mas vou dar uma estudada sobre o asunto.
Abraço!
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:
massa ! estou começando um no blogspot com template proprio. !
http://www.wareztotal.vai.la/
Estou aprendendo muito com os seus artigos. É uma ótima ajuda, pois ainda estou tomando um laço no blog. rsrs
Claudia,
No começo todos nós temos dificuldades. É só você não desistir que uma hora você consegue.
Abraço!
Mt bom o post.
É sempre bom mudar a cara padronizada dos blogs.
Vou tentar fazer esse.
Vlw
Dani
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!
neccessária Celso, que programa HTML você usou nas imagens?
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!
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..
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.
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…
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!
É 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!
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??
José,
Você deve estar adicionando o botão no lugar errado do template.
Experimente adicionar como um Gadget no blog.
Abraço!
Eu já fazia desse desse jeito.
É trabalhoso, mas compensa pra ter um template único.
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?
Henrique,
Você pode utilizar um serviço como o CSS Menu Maker.
Abraço!
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.
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.
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!
como deixa meu blog com cara de sete ?
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!