Se você gostar do post abaixo, por favor, clique aqui para se inscrever gratuitamente através do e-mail, assim você terá um post a cada e-mail recebido, podendo baixar nossos ebooks

Css modificando Corpo, fonte, cores das suas postagens





Você está pensando em fazer algumas mudanças a mais no seu blog na parte do layout(Formatos do blog) para melhorar a primeira vista de seus visitantes ou até mesmo aprender mexer nesse assunto tão falado por blogueiros experientes, então não fique de fora faça suas mudanças também.


O layout é muito importante para um blog, e quanto melhor ele for, melhor será o seu blog. Ter um bom layout é um dos passos para ter um bom blog. Editar o layout do blog pode ser um pesadelo para alguns, pois desconhecem de CSS, e, qualquer coisa que fizerem de errado, pode afetar em todo o blog. Por isso, é necessário ter orientações corretas e confiáveis para que se possa editar o seu layout. Por isso, recomendo que você faça um backup de seu layout para que qualquer erro que você cometa possa ser reparado futuramente.


Após ter guardado em uma pasta o backup do template de seu blog, qualquer mudança pode ser feita sem perigo. Mesmo assim, cuide para não cometer erros, pois, a cada erro cometido, você só terá mais trabalho.

Encontrando o código do corpo dos posts em seu código-fonte.

Primeiramente, devemos acessar o código-fonte de seu blog. Para isso, você deve acessar o painel do Blogger e ir em Modelo -> Editar HTML.

Você verá todo o código-fonte que constitui o seu blog. Pressione CTRL + F e procure pela seguinte tag:

.post {

Esta é a tag que define o estilo dos posts de seu blog, e, dentro dela e depois dela, podem ser encontrado códigos CSS que constituem todo o estilo da região do post.


Mudando a cor de fundo dos posts

Se deseja mudar a cor de fundo apenas da região onde fica localizado o post, você deve encontrar a tag que citei acima. Verifique se dentro dela há um comando assim:


background:#cor;

Ou se há apenas o background. Caso haja este elemento dentro da tag, você deverá substituir o código (no caso, haverá um código ao invés de #cor), você deverá entrar nesta paleta de cores CSS e encontrar a cor que deseja adicionar: 
Paleta de Cores.

Caso nesta tag ainda não haja o "background", você deverá adicionar o código nesta tag. Veja como fica o exemplo feito em um blog de testes:


.post {
line-height:1.6em;
text-align:left;
margin:0;
padding:0;
background:#ccc;
}

Como você pode ver, adicionei o background na tag, e a cor foi alterada perfeitamente. Feito isto, salve o seu template e confira os resultados.

Mudando cores e fontes das letras dos posts

Se você mudou o fundo do seu blog, é normal que as letras tenham ficado estranhas com o novo fundo. Para isso, é preciso mudar a cor das letras. Se você quiser, pode também mudar as fontes das letras de seus artigos.

Alterando a cor
No seu template, procure por algo como:


.post h3 {

Esta tag define o estilo das letras de seu texto. Geralmente fica abaixo da tag "post". Nela, haverá um comando semelhante a este:


color:#cor;

Substitua #cor pelo código da cor que você deseja colocar em suas letras. Adquira o código de uma cor com a ajuda desta 
paleta de cores. Salve e veja o resultado final.

Alterando a fonte
Para alterar a fonte das letras dos artigos de seu blog, é necessário procurar a mesma tag que citei acima: .post h3 {. Procure dentro dela o seguinte comando:


font:FONTE;

Substitua FONTE pelo nome da fonte que deseja. Lembrando que, é preciso colocar o nome de uma das fontes disponibilizadas pelo Blogger. Para adicionar mais fontes em seus artigos, pode seguir o seguinte o tutorial:






Se você queria mudar algo no estilo dos posts de seu blog, este tutorial é ideal para você. Lembrando, que há templates que não possuem o mesmo código que citei acima, e por isso, é diferente o modo de alterar. Se tiver dúvidas sobre este artigo, sinta-se a vontade para deixar um comentário, que responderemos.

Gostou? Compartilhe:
Ruan Phablo

Ruan Phablo é blogueiro desde 2009, mas só a partir de 2012 começou a levar a blogosfera a sério. Foi aí que ele criou o Phablo Projetos, um blog que tem por objetivo ajudar outros blogueiros. Você pode encontrá-lo no Facebook, no Twitter e no Google+.

17 comentários:

  1. Olá

    Como faço para alterar a imagem de fundo do blog? sem ser o fundo do post mas do template mesmo!

    ResponderExcluir
  2. Moraes,

    Vou te passar dois passos, o primeiro lhe indico para utilizar o personalizador padrão do painel blogger, nele você pode mudar a imagem de fundo, mas só poderá fazer isso de você usa template blogger.

    O segundo passo é ir no HTML/Edite e procurar por .jpg,.png,.gif(na maioria das vezes é .jpg), com CTRL+F. Encontrará vários trechos que terminem com os formatos de imagens indicados acima. Peço que vá copiando um por um e cole no navegador para visualizar a imagem, se for a do funfo você troca pelo link da imagem que desejar.

    Em casos de dificuldade na procura, procure por background, e veja se do lado dele tem alguma link de imagem como no segundo passo, e faça a mesma coisa de copiar e colar no navegador até encontrar e substituir.

    Abraços

    ResponderExcluir
  3. Caramba, simplesmente pra mudar a cor do texto precisa de todo esse trabalho? Procurar tag, descobrir o código da cor...?
    O blogspot tem editor WYSIWYG. Deveria colocar um botão de cores.

    ResponderExcluir
  4. Anônimo(12 de fevereiro),

    Boa opinião, porém sabemos que o Blogger disponibiliza templates muito fracos, ai quando queremos editar os nossos temos esse problema, logo dificultando a padronização para ser posto um botão destes.

    Abraços

    ResponderExcluir
  5. Visitem : www.FrasesHumildes.Blogspot.Com

    ResponderExcluir
  6. Olá Ruan, eu mudei de layout e agora as imagens nas postagens não centralizam, elas sempre permanecem a esquerda por mais que eu as centralize. Não alterei código nenhum, apenas editei os widgets do layout. Você poderia me ajudar? http://yeshuasalvador.blogspot.com.br/

    ResponderExcluir
  7. Lilian,

    Dei uma passada em seu blog e vi o problema por perto, se realmente as postagens forem escritas por você, esse é um problema a ser bem, visado, porém se não for é causa da copia que fizestes.

    Mas nas duas opções você pode editar a posição da imagem com um código, logo você terá que ir nos posts e na parte HTML do painel de digitação de artigos no Blogger e no código da imagem que possivelmente será o primeiro, coloque este código:

    [div align=”center”] e no final do código da imagem [/div]

    OBS:Peço a você que troque o "[" e "]" por "<" e ">". Para funcionar!

    Abraços

    ResponderExcluir
    Respostas
    1. Olá Ruan, as postagens são feitas por mim sim, e desde sempre ocorre isso que lhe informei, as imagens não centralizam. Eu vou seguir seu conselho e utilizá-lo na próxima postagem. Muito obrigada por responder!

      Excluir
    2. Isso vale para a galeria pois percebi que nas minhas imagens tabem ocorre esse erro se puder dar uma olhada o blog: http://artscomeventosloja.blogspot.com.br/

      Excluir
  8. Será que me pode dar a dica do código das abas laterais que aparece aqui no seu blog? Essas setas de lado que vai aparecendo textos? Obrigado!

    ResponderExcluir
  9. Meu papo é reto, vi algum comentário que chamou minha atenção! Se não quer ter trabalho, não tenha um blog, pois o blog é feito de códigos, se não quer mexer em códigos, contrate um template! Eu adoro mexer em HTML!

    ResponderExcluir
  10. Olá Ruan, estava mexendo no meu blog e depois que terminei percebi que a fonte do rodapé e ddos links de final de postagem estão minusculas e confusas. Você tem alguma dica de como eu possa corrigir esse erro? http://vaitrazendo.blogspot.com Desde já agradeço a atenção!

    ResponderExcluir
    Respostas
    1. Erica,

      Dei uma olhada no seu blog e vi sim sua fonte e seu tamanho, porém percebi que eles estão normal para o estilo do seu template no blog, entretanto se deseja concertar, vou te passar duas dicas e com elas você pratica o que viu no post acima:

      1 - Possivelmente o concerto ideal para o problema é usar o código que se refere ao fim do seu blog(rodapé), você pode consegui-lo baixando mais uma vez o template que usa atualmente e analisar(no bloco de notas) a diferença entre a estilização da classe footer do que usa com o footer que foi baixado, achando alguma diferença copie do que baixou e substitua os códigos. Você pode encontrar este trecho buscando por "#footer"(codificação a ser analisada e substituída se for o problema).

      2 - Ou podemos pegar um pedaço da ideia anterior, do elemento "#footer", onde você procura por ele e começa a fazer mudanças periódicas nos valores de tamanho nas fontes, salvando e visualizando até chegar no estilo de footer(rodapé) que desejar!

      Abraços

      Excluir
  11. Este comentário foi removido pelo autor.

    ResponderExcluir
  12. Oi Ruan. Eu instalei uma template no meu blog, e está perfeita. O único problema que ela tem, é que não permite o negrito nas postagens. Permite o itálico, troca de cores mas não negrita. Vc poderia me dizer qual código devo mexer para que a template reconheça o negrito nas postagens? Muito obrigada e parabéns pelo blog!

    ResponderExcluir
  13. Elise

    Você vai ter que recorrer a modificações no momento que estiver escrevendo um texto, pois editar seu blog para essa funcionalidade, mesmo sendo simples, estariamos mudando algo que se mal feito for pode trazer grandes problemas no blog em si, logo se você não poder mudar o template, recomendo...

    Quando terminar o seu texto, clique na aba HTML, e procure com CTRL+F a frase ou palavra que quer colocar em negrito e no inicio coloque [b] e no final da frase coloque [/b], depois visualize fora da aba HTML.

    OBS: Por favor trocar o simbolo "[" e "]" por "<" e ">".

    Abraços

    ResponderExcluir

Seu Comentário estará enriquecendo o conteúdo acima. Fico grato com sua participação! Qualquer dúvida relacionada a outro assunto use o nosso formulário de contato "Fale Conosco". Obrigado

Por favor me adicione no Google + para eu poder te responder de imediato!

 
Copyright © 2012 - Phablo Projetos - Direitos Reservados | Page Rank Licença Creative Commons
Desenvolvido por Carlos Vínicius | Tecnologia do Blogger | Páginas: Termos de Uso e Licença
    Twitter Facebook Google + YouTube