Personalizar os Titulos dos Posts no Blogger

Neste tutorial, trataremos apenas sobre as formas de personalizar os títulos 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. 

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;

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. 

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.

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;

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.

[alerta]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.