Personalizar os Titulos dos Posts no Blogger

Neste tutorial, trataremos apenas sobre as formas de personalizar os titulos dos posts.
Veremos como alterar tamanho e cor da fonte, como alinhar o texto do titulo, como configurar o tipo da fonte e como inserir bordas.
Para entender sobre a área dos títulos do post, requer que você já esteja familiarizado com os códigos referente ás postagens no seu blog e saiba sobre a personalização de fonte e texto. Se ainda não está, aconselho que leia estes tutoriais:
Personalizando a área do Post – (Parte1)
A propriedade CCS ‘Text’
Variáveis do Tipo Fonte

No corpo do HTML dos templates minima e na maioria dos templates modificados, o titulo do post está representado por estas tags abaixo:

.post h3
.post h3 a - (link ativo)
.post h3 a:visited - (Link já visitado)
.post h3 a:hover - (Mouse em cima)

Já nos templates Designer de Modelo, o titulo do post está representado por estas tags abaixo:

h3.post-title 

Todos os estilos que você quiser aplicar aos títulos deverão ser incluidos dentro destes trechos.

Personalizar o tamanho da fonte:

Nos templates minima, por padrão, o tamanho da fonte para os títulos, está configurado em 140%.
Mas você pode alterar o tamanho, basta substituir 140% pelo valor correspondente ao tamanho da fonte que você deseja.
Se quiser, pode incluir o valor correspondente ao tamanho da fonte.
Exemplo:
font-size:22px;

Personalizar cor da fonte:

Note que se no seu template, a cor do título do post estiver definido no Variable Definitions, seus valores devem ser modificados diretamente no Painel “Fontes e Cores” do Blogger.
A maioria dos templates existentes, como os padrões do Blogger (mínima) usam estas pré definições para o CSS, facilitando a alteração destas cores, através do painel , em “designer de modelo”.
Se não houver a possibilidade de alterar a cor através do painel , você pode aplicar uma cor diretamente no trecho CSS, basta incluir a variavel referente a cor que você deseja que o título do post tenha.
Exemplo:
color: #FFFFFF;

Se quiser, consulte a tabela de cores html.

Alinhamento do texto do título:

text-align:left -> titulo alinhado à esquerda.
text-align:right -> titulo alinhado à direita.
text-align:center -> titulo alinhado o centro.
text-align: justify -> titulo com alinhamento justificado (faz com que o texto contido em uma linha se estenda tocando as margens esquerda e direita).

Definir tipo de fonte para o título:

Você pode definir o tipo de fonte para o título diretamente no trecho CSS, basta incluir a definição da fonte que você deseja , defina sua fonte preferida, seguindo-se de algumas alternativas para ela, e encerre a listagem das fontes com uma fonte genérica, assim se o navegador do usuário não encontrar na memória do computador a primeira fonte, usará a segunda e assim por diante.
Exemplo:
font-family: ‘Trebuchet MS’, Arial, Serif;

O Google API disponibiliza algumas fontes diferentes que podem ser usadas no Blogger. Talvez você se interesse em conhecer mais sobre o assunto, em:
Fontes Diferentes para usar no Blogger

Definir estilo da fonte:

Estilo da fonte: normal e italic.
Se você deseja que a fonte do título se apresente em itálico, devemos incluir no CSS a variável para o estilo da fonte.
Exemplo:
font-style: italic;
A fonte pode ser definida para se apresentar em negrito(bold).
Exemplo:
font-weight:bold;

Você também pode aplicar efeito sombra na fonte do título.
Exemplo:
text-shadow: 1px 2px 3px #000;

Definir Tranformação da fonte:

Você pode definir transformações da fonte do título do post no formato caixa-alta ou caixa-baixa.
Para definir a propriedade de transformação de textos, você pode atribuir as seguintes variaveis:
text-transform: none; -> sem efeito.
text-transform: capitalize; -> Primeira Letra Das Palavras Maiúsculas.
text-transform: uppercase; -> TODAS AS LETRAS MAIÚSCULAS.
text-transform: lowercase; -> todas letras minúsculas.
font-variant: small-caps -> transforma letras em maiúsculas de menor altura.
font-variant: normal -> sem efeito variante.

Definir decoração da fonte:

Para a decoração do fonte do título você pode atribuir as seguintes variáveis:

text-decoration: underline; -> título sublinhado.
text-decoration: line-through; ->título com linha em cima.
text-decoration: overline; -> título sobrelinhado.
text-decoration:none; -> sem efeito.

Definir espaço entre as letras do título:

Você pode definir o espaço entre os caracteres, ou seja, o espaço que existe entre as letras do título.
Exemplo:
letter-spacing:1px;

Inserir borda no título:

Se quiser acrescentar borda ao título, basta incluir no CSS a variável para borda.
Exemplos:
border: 1px solid #000000 -> borda em toda área do título.
border-bottom:1px solid #000000 -> borda apenas abaixo do título.
border-top: 1px solid #000000 -> borda apenas acima do titulo.

Veja mais sobre tipos de bordas em:
Personalizar Bordas
Criar Bordas Arredondadas
Você também pode incluir um efeito sombreado na borda.

Exemplos:

border:1px solid #000000;
box-shadow: 5px 4px 10px #ccc;
-moz-box-shadow: 5px 4px 10px #ccc;
-webkit-box-shadow: 5px 4px 10px #ccc;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;

No exemplo acima, as bordas estão arredondadas e possuem efeito sombreado.

 

Definir cor para plano de fundo do título:

Se quiser incluir uma cor como plano de fundo do título, basta acrescentar a linha “background” e aplicar os estilos a ela.
Exemplo:
background: #CFCFCF;

Se quiser você também poderá aplicar um efeito gradiente ao background do título.

Se quiser colocar uma imagem no título do post, veja neste tutorial como colocar imagem no titulo do post.

Agora que você entendeu as maneiras que pode personalizar o título das postagens, veremos um exemplo com código completo a seguir (Template Minima):


.post h3 {
margin:.25em 0 0;
font-family: 'Trebuchet MS', Arial, Serif; /*--tipo da fonte--*/
padding:15x;
font-size:22px; /*--tamanho da fonte--*/
font-weight:bold; /*--fonte em negrito--*/
text-align: justify; /*--alinhamento justificado--*/
text-decoration:none; /*--sem decoração da fonte--*/
text-transform: uppercase; /*--tudo em letra maiúscula--*/
letter-spacing:1px; /*--espaçamento entre letras--*/
text-shadow: 1px 2px 3px #000; /*--efeito sombra na fonte--*/
font-style: normal; /*--estilo da fonte normal--*/
line-height:1.4em; /*--espaçamento entre linhas--*/
color: #FFFFFF; /*--cor da fonte--*/
border:1px solid #000000; /*--borda em volta do titulo--*/
/*efeito sombreado na borda*/
box-shadow: 5px 4px 10px #ccc;
-moz-box-shadow: 5px 4px 10px #ccc;
-webkit-box-shadow: 5px 4px 10px #ccc;
/*borda arredondada*/
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
background:#DADADA; /*--cor de fundo--*/
}
.post h3 a, .post h3 a:visited, .post h3 strong {
display:block;
text-decoration:none; /*--sem decoração da fonte--*/
text-transform: uppercase; /*--tudo em letra maiúscula--*/
letter-spacing:1px; /*--espaçamento entre letras--*/
text-shadow: 1px 2px 3px #000; /*--efeito sombra na fonte--*/
font-style: normal; /*--estilo da fonte normal--*/
line-height:1.4em; /*--espaçamento entre linhas--*/
color: #FFFFFF; /*--cor da fonte--*/
border:1px solid #000000; /*--borda em volta do titulo--*/
/*efeito sombreado na borda*/
box-shadow: 5px 4px 10px #ccc;
-moz-box-shadow: 5px 4px 10px #ccc;
-webkit-box-shadow: 5px 4px 10px #ccc;
/*borda arredondada*/
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
background:#DADADA; /*--cor de fundo--*/
}
.post h3 strong, .post h3 a:hover {
color: #000000;
}

Lembre-se, o código acima é apenas um exemplo, personalize o título do post de acordo com seu gosto e cores que combinem com seu template.

ATENÇÃO:
Os códigos da área do título das postagens, publicados neste tutorial, foram retirados do Template Minima. Se o seu template já sofreu muitas modificações na área de post, provavelmente esta parte deve se apresentar de outra maneira.

Fundadora do Mundo Blogger. Autodidata que adora internet, que se encantou com blogs, seus códigos e templates, desde 2009, e por conta disso começou a "brincar" com web design nas horas vagas, até que resolveu criar o Mundo Blogger para compartilhar o que aprendeu com você através dos tutoriais publicados aqui.

Comentários
    • Vanessa
  1. Edi
    • Vanessa
  2. Lety Escobar
    • Vanessa
  3. Jefferson Castro
  4. Eliza
  5. André Rocha
    • Vanessa
  6. Giovanna Dal Bom
  7. Rafa-Kun
  8. Di web
  9. Davi Farias
  10. Rafaela Vieira
    • Vanessa
  11. Esther
    • Vanessa
  12. Maristela
  13. Pedro Niajar
    • Vanessa
  14. Natan
  15. coelho
  16. Rosane
  17. Laura Vegan
  18. itapiúna informa
  19. Alexandre Colli
  20. nahty
  21. Tiago
  22. Fábio Martins
  23. .:: Clau ::.
  24. mauro rocha
  25. pqdt85
  26. .:: Clau ::.
  27. pqdt85
  28. Rosangela
  29. ana costa
  30. Video Galeria X
  31. .:: Clau ::.
  32. Ana, Jornalista Virtual
  33. Kagome-chan
  34. .:: Clau ::.
  35. Márlon Silva
  36. Pentaflops
  37. .:: Clau ::.
  38. Lorena Gonçalves
  39. Lukas
  40. .:: Clau ::.
  41. Jorge Wayne
  42. Jorge Wayne
  43. Franklin
  44. .:: Clau ::.
  45. mundodadanca1
  46. Rickzinhocps
  47. comandoblogger
  48. Lukas