layout Camila Fiori

Trocando o template do blog – Parte 2

Gerenciando Layout Esta é a segunda parte da série de artigos iniciada com o Trocando o template do blog – Parte 1. É importante que você leia aquele artigo antes, porque continuarei agora do ponto em que terminei aquele. Neste artigo, você aprenderá a fazer pequenas alterações em seu template antes de aplicá-lo em seu blog oficial.

 

 

4. Alterando os links das imagens

Este passo é chato de ser feito, mas ele se justifica. Quando você baixa um template da internet, ele vem com referências para as figuras originais que o autor do template utilizou. Essas figuras estão hospedadas em um local único da internet, seja em um servidor do próprio autor ou em um serviço de armazenagem de arquivos. O problema é que, se o template é realmente bom, é bem provável que outras milhares de pessoas logo utilizarão o mesmo template que você, apontando para as mesmas figuras. Isso pode causar problemas de excesso de banda no servidor onde elas estão hospedadas, fazendo com que as figuras fiquem indisponíveis e simplesmente desapareçam do seu blog. Isso aconteceu com o template do TD Séries. Para evitar isso, minha recomendação é que você hospede suas imagens em um local de onde somente você vá utilizá-las. Com isso, o consumo de banda será muito menor e você não correrá o risco. Além disso, isso possibilita que você customize seu template (que é o próximo passo). Este processo é feito da seguinte forma:

1. Abra o novo template do seu blog em um editor de texto. Eu uso o Notepad++ (http://notepad-plus.sourceforge.net/br/site.htm). 2. Obtenha as imagens originais. Isso pode ser feito procurando pelo texto “http://” no template do blog. Você encontrará referências às imagens, como http://jackbook4.googlepages.com/summerfruit_header.gif. Você deve abrir esses links em seu navegador e salvar as imagens em seu disco.
3. Hospede essas imagens em um site da internet. Existem diversas opções para isso. Pessoalmente, gosto do Google Sites (http://sites.google.com). Basta você criar um novo site e anexar as imagens a ele.
4. Em seu template original, substitua as referências que você encontrou no item 1 pela nova localização das imagens. Por exemplo: no TD Séries, a imagem que eu citei no item 1 ficou sendo http://sites.google.com/site/tdseries/Home/tdseriesheader.gif. Para você testar o link das suas imagens, basta colá-los em seu navegador. 5. Salve o template com as alterações. Esse será o template que você utilizará a partir de agora. 6. Para testar se você fez tudo correto, aplique esse template em seu blog de testes. Todas as imagens devem ser exibidas corretamente.

Se você achou complicado, não se desespere. Você pode utilizar as imagens da forma como elas vieram em seu template. O ruim disso é que você pode enfrentar um dia os problemas que citei acima.  

5. Customizando o template

Esta fase não é obrigatória, mas é interessante para você diferenciar o seu blog dos outros que já utilizam ou utilizarão o mesmo template. No caso do novo template Gerenciando Blog, por exemplo, decidi trocar a cor dos componentes originais, que eram azuis, por outros vermelhos. Esse trabalho foi feito de forma manual, porque esses componentes eram imagens fixas que o template referenciava. Abaixo estão algumas sugestões de alterações que não são tão complicadas, mas geram um resultado interessante. Uma dica importante: antes de começar a realizar as alterações, grave uma cópia de segurança de seu template, para poder voltá-la em caso de problemas. Lembre-se de que você está ainda trabalhando em seu blog de testes, para evitar problemas em seu blog oficial.

1. Se você executou o passo 4, pode modificar as imagens antes de hospedá-las no serviço que você escolheu. Para isso, basta alterar as imagens em um editor e postá-las novamente onde você as está hospedando. Exemplo de mudanças que dão um bom resultado: alterar cores, adicionar seu logotipo ou foto etc. 2. Caso não esteja de seu agrado, você pode alterar a largura das colunas do template. Para aumentar as colunas, basta alterar o valor do "width" nas seções #outer-wrapper (que é a largura total do seu blog), #main-wrapper (que é a área de postagem) e das #sidebar (que são as colunas laterais). Tome cuidado para que a soma da área de postagem e das colunas nunca ultrapasse a largura total. 3. Todos os elementos que aparecem em sua postagem são realmente necessários? Por exemplo: no template que escolhi para o Gerenciando Blog, era exibido o horário da postagem. Eu removi esse horário, procurando no template onde isso era feito e removendo o código que fazia isso.

A melhor maneira de testar esses ajustes é aplicar esse template em seu blog e ir acompanhado o resultado. Particularmente, faço uma alteração de cada vez, coloco o novo template no blog e visualizo o resultado. Caso não fique de acordo com o que eu esperava, volto ao ponto em que estava antes. Outros ajustes mais simples podem ser feitos dentro do próprio Blogger, acessando a opção “Layout” / “Fontes e Cores”. Veja que existem diversos elementos da tela que você pode alterar, para deixar seu blog diferente dos outros.   Com isso, fecho mais um artigo desta série. Ao terminar mais estes dois passos, você terá seu template já customizado, com as alterações que você considera importante para diferenciá-lo dos outros blogs. No próximo artigo, ensinarei a finalmente colocá-lo em seu blog oficial, tomando os cuidados necessários para evitar quaisquer problemas. Artigo anterior: Trocando o template do blog – Parte 1
Próximo artigo: Trocando o template do blog – Parte 3

Classifique este post

| Website

Apaixonada por comunicação. Formada em Jornalismo e blogueira por Hobbie. Atual responsável por este e vários outros blogs de Internet Marketing.

Para enviar seu comentário, preencha os campos abaixo:

Deixe uma resposta

*

25 Comentários

  1. HAZEL disse:

    Eu tenho uma pergunta sobre a customização de templates.

    Como posso separar o cabeçalho do corpo?
    Consigo afastá-lo, esticando o espaço, mas separar mesmo, não sei como fazer.

    O mesmo se aplica à sidebar. Como separá-la?

    O objectivo da separação desses elementos seria ver-se o background no intervalo entre eles.

    Beijos!

  2. Adelson Smania disse:

    Olá, Hazel.

    Agora você fez um pergunta muito difícil! risos

    Entendi o que você quer. Algo parecido com o blog da Letícia (http://filhosadotivos.blogspot.com), correto?

    Confesso que não sei como fazer a separação. Pesquisei na web e também não encontrei. Em todo caso, vou continuar tentando e a aviso caso descubra a solução.

    Sinto não poder ajudá-la desta vez!

    Um abraço!

  3. HAZEL disse:

    Adelson,

    Exactamente como esse blog, sim.

    Acho que é mais simples trocar de template do que tentar alterar a existente, não é mesmo?

    Obrigada de qualquer das formas.

    Um abraço!

  4. Na$k© disse:

    Ola rapaziada!

    Primeira fez por aqui … quer dizer primeira fez postando. Ja li alguns artigos e recomendo a leitura do blog.

    Bom HAZEL, como Adelson mesmo disse: "Agora você fez um pergunta muito difícil!" mas pode ser revertido sabendo o basico de CSS.

    Sabendo a DIV CORRETA (aqui esta o segredo) é so você aplica o atributo PADDING. Onde o mesmo dara um espaço desejado.

    Você tambem pode usar outro atibuto CSS -> MARGIN. É tudo uma questão de teste. Faça os teste e ver qual melhor encaixa na sua condição. Recomendo o uso do PADDING.

    Agora se não sabe nada, muito pouco ou quase nada hehehe de CSS recomendo fazer um estudo primeiro para não passar muita raiva!

    Se tiver alguma duvida acesse um dos meus blogs pelo meu perfil e deixe um recado que agente tenta ajudar.

    Abraços!

  5. Adelson Smania disse:

    Olá, Na$k©!

    Obrigado por sua visita e por ter respondido à dúvida da Hazel! Essa eu tinha mesmo ficado devendo a ela.

    Um abraço e apareça sempre por aqui!

  6. Sandra Info-Macross disse:

    Olá Adelson!
    Meu blog é em wordpress, mas me pediram ajuda em um blogger e é justamente o contrário, não quero separar o cabeçalho e sim colocar uma barra de publicidade da uol dentro dele, será que dá? Tentei mexer no css mas não funciona, com os anúncios do adsense é possível fazer, mas esse outro, coloquei como um widget html/javascript e adicionei bem abaixo do cabeçalho, mas ele fica separado, ah, sei lá…
    Se você souber de alguma coisa agradeço…
    Obrigada
    Sandra

  7. Adelson Smania disse:

    Olá, Sandra!

    Possível é. Para eu poder ajudá-la, envie para meu e-mail o template e o código da publicidade. Dou uma olhada e lhe respondo em seguida.

    Um abraço!

  8. Sandra Info-Macross disse:

    Mandei pro seu e-mail!
    Muito obrigada!
    Não tenha pressa em responder!
    Obrigada!!!

  9. Letícia disse:

    eithaaaa meu bloguinho esta até servindo como modelo, tô chique demaisssss heheheh.
    Migo eu de novo, acho q já tenho comentários em quase todos as suas postagens rssss. Brevemente terá em todas mesmo, pq sempre q tenho um tempinho corro aqui para ler suas dicas, e sempre tenho algo para perguntar rssss.
    Acho os sidebar do meu blog muito fininhos, aí tentei aumenta-los mas o da esquerda sumiuuuuu.
    Queria aumentar o tamanho do cabeçalho tb, já tentei outras vezes, mas ele foi para trás das unas rsssss. Estou com medo de mexer e fazer a maior meleca, o que vc acha?
    Aaahhhhhh queria tirar a hora tb, mas não achei de jeito nenhum no código
    abraços

  10. Adelson Smania disse:

    @Sandra: Recebi seu e-mail. Assim que conseguir analisar, dou um retorno a você!

    @Letícia: já citei mesmo seu blog como exemplo! Você está mesmo muito chique! risos Quanto à sua dúvida, o problema da sidebar sumir deve estar acontecendo porque a soma das sidebars e da main-wrapper está ultrapassando a largura da outer-wrapper, que é a largura total do blog. Assim, se aumentar a sidebar, precisa aumentar também a outer-wrapper.
    Quanto à hora, se você quer removê-la das suas postagens, basta procurar em seu template por “Postado por”. Você verá logo em seguida o código que exibe a hora de postagem.

    Um abraço a vocês!

  11. Letícia disse:

    Amigo aí seria facinho,né? rssssssss o problema é que no meu HTML não tem a palavrinha mágica "Postado por". rsssss
    O meu é todo em CSS, por isso fica tudo mais complicado de mexer.
    E eu continuo aqui quebrando a cabeça rssssss

  12. Adelson Smania disse:

    Olá, Letícia! Você andava sumida daqui! risos

    É, seria fácil demais se o “Postado por” estivesse por lá, né? Você pode procurar também por “post-timestamp” ou “timestamp-link” que é onde seu template coloca a hora da postagem. Se ainda não conseguir, me envie seu template por e-mail que dou uma olhada nele.

    Um abraço!

  13. Letícia disse:

    Não acreditoooooo!!!! Vc consegue sentir a minha falta com todo trabalho que eu te dou????????? rsssss
    Adivinhaaa, estou mandando o template pro teu e-mail hehehehhe, num tem nenhum times lá, tb já havia olhado isso heheheh.
    abraços

  14. Adelson Smania disse:

    Olá, Letícia!

    Você é uma das comentaristas mais freqüentes aqui! E gosto mesmo disso, porque você sempre levanta alguma questão interessante para discussão. Ou seja: será sempre bem vinda aqui!

    Responderei seu e-mail assim que encontrar a solução.

    Um abraço!

  15. Normal, mas nem tanto... disse:

    Ai ai.. To achando isso tudo tão difícil…

    Não consigo mesmo.. Rs

  16. Adelson Smania disse:

    Oi, Sara!

    Você consegue sim! risos

    Muito do que eu disse neste artigo são pequenos detalhes que podem ser feitos para, digamos, aprimorar o template. Mas, esses passos não são obrigatórios.

    O mais importante que cito neste artigo é você ter o seu blog de testes e aplicar o template nele antes de fazer isso em seu blog oficial. Isso evita surpresas desagradáveis.

    Não desista, não!

    Um abraço!

  17. Normal, mas nem tanto... disse:

    São esses códigos que me confundem. Rssss
    Tenho que parar e ler e reler com calma mesmo..

    Tem post novo lá no Blog, olha lá!

    Abraço! =)

  18. Elise disse:

    Fiquei com uma dúvida meio noob agora. Eu costumo hospedar arquivos no webs; se eu hospedar no Google Sites vai dar no mesmo?

  19. Adelson Smania disse:

    Oi, Elise!

    Eu também hospedo meus arquivos no Webs. Antes, eu os hospedava no Google Sites, mas lá existiam algumas limitações nos tipos de arquivo. Os GIFs animados, por exemplo, não eram exibidos corretamente.

    Mas, acredito que a diferença de velocidade entre um e outro deve ser muito pequena. Então, acredito que no final dará na mesma.

    O que você pode fazer para confirmar isso é testar o tempo com um e com outro para ver se haverá diferença significativa.

    Um abraço!

  20. Brilho e Imagem Produções disse:

    coloquei o templates no meu blog, só que ele ficou muito encima, tem como colocá-lo mas em baixo. email: [email protected]

  21. Adelson Smania disse:

    Olá, Silvia!

    Visitei o seu blog, mas não entendi a sua dúvida. Se preferir, me escreva no [email protected] e me dê mais detalhes.

    Um abraço!

  22. Water disse:

    Tentei aumentar a coluna de um blog (modelo Josh Peterson.) e diz que não existe a linha #outer-wrapper procurei também por #main-wrapper e diz que não existe.

    Como posso alterar uma coisa se dentro do html não existe?

    Dá uma luz ai Adelson, por favor!

  23. Adelson Smania disse:

    Olá, Water!

    Nos novos modelos do Blogger, você pode alterar a largura da coluna sem precisar alterá-la diretamente no HTML. Você pode fazer isso entrando no Designer de Modelo, na opção Layout / Ajustar largura. É bem mais simples assim.

    Não se esqueça de gravar um backup antes para o caso de precisar voltar.

    Um abraço!

  24. Water disse:

    Oi Adelson, eu fiz isso mas mesmo assim o site fica no meio sobrando muito espaço dos dois lados. O que eu queria mesmo é expandir todo o site para ficar , por ex. como o seu que cabe duas colunas de cada lado e ainda sobra espaço maior para as postagens. Entendeu agora?

  25. Adelson Smania disse:

    Olá, Water!

    O que você pode fazer é aumentar a largura total para 1000. Depois, você divide esse espaço entre as colunas.

    Mesmo em meu caso, ainda é exibido espaço em branco nas laterais quando a largura do monitor é muito alta.

    Um abraço!

Por gentileza, se deseja alterar o arquivo do rodapé,
entre em contato com o suporte.