Post sobre |Dicas blog, Pc

Estilo das postagens do BlogSpot com Css

Mostrarei como mudar o tamanho e cores da fonte e, o plano de fundo dos posts do BlogSpot, usando Css no Html do blogger.
Essas alterações mudam todas as postagens de uma vez.
Entender a área das postagens
Nem sempre você percebe, mas, como muitas páginas Html o blogger é feito de quadros(retângulos), são as DIVs, geralmente uma DIV tem outras dentro delas. Essas DIVs tem nomes ou apelidos(ID ou class) e, são através desses nomes que cria-se, para a DIV, um estilo no Css do Html.
Duas DIVs no blogger; uma usa ID main e outra class post, a DIV #main inicia bem acima da postagem e geralmente vai até o final dos comentários, já .post inicia pouco antes do título da postagem e vai até o final dos marcadores, antes do início dos comentários, e para cada uma delas você pode colocar um estilo, isso depende de ou até onde você quer que esse estilo permaneça.

Além disso, pode haver alguns conflitos com o estilo que você decidir usar nelas, por exemplo, se colocar color:red para deixar a cor da fonte de #main vermelha, e, a cor da fonte de .post é azul, a cor da fonte vai ser azul dentro da postagem e vermelha fora dela.

Essas imagens abaixo mostram um pouco onde é .post e #main, deixei a cor de fundo de ambas amarela, isso foi feito nesse blog, claro que pode ser diferente de seu blog, mas da para distinguir onde começam essas duas áreas de um BlogSpot e ver qual o mais apropriado para a mudança que você quer.

Clique nas imagens para ver melhor
.post
background apenas na postagem
#main
background no local de todas as postagens

Entender os códigos Css do blogger para modificar

Depois de entender um pouco as mudanças que terá que fazer, a primeira coisa é encontrar um desse código abaixo dentro do Html do blogger:

.post {


Ou


#main {


Se não existir um código igual esse acima você poderá adicionar, mas terá que trabalhar(entender) eles.

E entender que, .post se refere a postagem do BlogSpot e #main se refere a área das postagens do BlogSpot e, o que estiver { entre as chaves, são propriedades, qualidades ou estilos }

.post {propriedades, qualidades ou estilos }

#main {propriedades, qualidades ou estilos }


Creio que o melhor para fazer alterações é .post, mas isso depende de suas intenções. No blogger existem as opções fontes e cores, que é possível fazer alterações sem código, e se no Css do Html existir esse caracter $ para uma propriedade, isso indica que para mudar ela é possível usar fontes e cores do blogger.

Veja o exemplo:

.post {color:green;
border-bottom:1px dotted $bordercolor;
font-size:90%;
}


Esse código acima indica que a postagem terá:

color:green;Cor da fonte verde
border-bottom:1px dotted $bordercolor; Borda embaixo de estilo dotted e essa palavra com $ indica que a cor dela pode ser alterada em Fontes e cores do blogger, e, você poderia substituir por qualquer cor escrita em inglês ou usando um código (hexadecimal html) como esse #000000 mas perderia a opção de mudar isso em fontes e cores no blogger.
font-size:90%; Tamanho da fonte um pouco menor que o estabelecido...

Deu para perceber que quando houver esse caracter $ no Css do blogger é algo não deveria ser alterado.Veja outro exemplo:


.post {color:$mainTextColor;
border-bottom:2px solid blue;
font-size:110%;
background:#cccccc;
}

color Indica cor de fonte
color:$mainTextColor; Se houvesse um código como esse para a cor da fonte indicaria que era possível mudar em fontes e cores do blogger, claro que isso é raro acontecer para a área do post, mas é só um exemplo.
border-bottom:2px solid blue; Borda embaixo de 2 pixeis e estilo solida e azul
font-size:110%; Tamanho da fonte um pouco maior que...
background:#cccccc; Cor de fundo, o código hexadecimal #cccccc significa cinza em Html e Css

Se você comparar esses códigos de exemplos acima, pode perceber a semelhança e, ver que no segundo foi mudado e adicionado algumas coisas como a propriedade background que é para a cor de fundo, e cinza #cccccc em Css ou Html, observe os códigos, veja semelhanças e "padrões" que eles tem. Isso mostra que você pode estilizar, com um pouco de atenção e empenho.

    Mudar o estilo do post ou área das postagens com Css

  1. Acesse o blogger.com
  2. Clique em Layout(Design)
  3. Clique em Editar HTML
  4. Faça um backup de seu modelo, por segurança
  5. Você deverá localizar esse código:
    ]]></b:skin>
  6. Acima/antes desse código ]]></b:skin> mude e/ou adicione os códigos para:
    • Personalizar o post:
      .post {color:#000000;
      border-bottom:1px dotted #000000;
      font-size:110%;
      bacckground:#ffffff;
      }
    • Ou personalizar a área da postagem:
      #main {color:#000000;
      border-bottom:1px dotted #000000;
      font-size:110%;
      background:#ffffff;
      }
    • Substituir os códigos
      A primeira coisa a se fazer é procurar no Css de seu blogger se já existe .post { ou se preferir #main { e se já existir pode adicionar ou mudar as propriedades que estão entre-chaves, você não precisa usar essas propriedades acima e pode adicionar novas, porém elas não devem repetir.

      Os códigos em vermelho podem ser substituídos:
      color:#000000; É a cor da fonte, e #000000 é um código de cor preta

      background:#ffffff; É a cor de fundo, e #ffffff é cor código da cor branca, Você pode ver mais cores aqui

      border-bottom:1px dotted #000000; É borda de baixo, ela tem 1px de espessura, estilo dotted que é pontilhado e cor preta(#000000)

      font-size:110%; É o tamanho da fonte, o normal seria 100% mas se é para deixar no tamanho normal, não é necessário adicionar, para deixar menor você poderia usar 90% ou qualquer valor menor de 1oo ou qualquer valor maior para aumentar. Você também pode adicionar/mudar o tipo de fonte para Css blog.
  7. Após ter feito as alterações clique em VISUALIZAR para ver como ficou seu BlogSpot ou/e se gostou clique em SALVAR MODELO

6 comentários:

Estilo das postagens do BlogSpot com Css2009-11-09T02:43:00-02:00
  1. Nossa.
    Eu Procurava Mudar A Cor Das Letras Do Post.
    Esse Tuto É O Melhor Nota 100 De 1 Em 10.
    Vlw.
    Ajudou Muito.

    Responder
  2. tuto bem explicado! Até quem não entende de html, CSS e outras linguagens de programação ficou facil fazer!(:

    Parabéns

    Responder
  3. Porque as letras deste blog são tão pequenas?

    Responder
  4. Dayse Fashion

    Um dia vou escrever o motivo em um post, mas, as pessoas tem a opção de usar as teclas de atalho Ctrl + e se as pessoas acharem outros sites também com fonte pequena pode tentar aumentar a fonte do navegador

    Responder
  5. otimo post cara diminuii o tamanho da fonte mais nao dos comentarios se alguem souber aai
    mais msm assim muito obrigado me ajudou muito

    Responder
  6. Marcelo

    Você utilizou #main ?

    Se você alterou o Css para a id main e mesmo assim não funcionou, pode tentar localizar no Css #comments e ver se tem uma especificação para o tamanho de fonte para essa id e diminuir o valor.

    Se não procure por:

    #main #comments {

    e se existir tente mudar o valor de font-size ou adicione mais ou menos assim:

    #main #comments{font-size:90%}

    Responder

→Dê sua opinião. Faça comentário relacionado ao post.
Comentário com e-mail será excluído
Antes de perguntar leia o texto até comentários e pesquise, a resposta virá no comentário, para ser avisado use uma conta e o link: Subscribe by email(abaixo)
Será excluído comentário não relacionado ou com Url de blog/site(Divulgar? Clique)

Comentário reflete a opinião do comentarista. Desde já, Obrigado!