Tweet

 

Personalizar os Titulos dos Posts

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.

Nos templates padrões, o titulo do post está representado pelas variáveis:

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

Na parte CSS dos templates padrões, as variáveis para os titulos das postagens estão da seguinte maneira:

.post h3 {
margin:.25em 0 0;
padding:0 0 4px;
font-size:140%;
font-weight:normal;
line-height:1.4em;
color:$titlecolor;
}

.post h3 a, .post h3 a:visited, .post h3 strong {
display:block;
text-decoration:none;
color:$titlecolor;
font-weight:normal;
}

.post h3 strong, .post h3 a:hover {
color:$textcolor;
}

Personalizar o tamanho da fonte:

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.
Exemplo:
font-size:22px;

Personalizar cor da fonte:

Note que no código de exemplo postado acima, a cor do título do post está definido no Variable Definitions, que são valores que podem 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".
Mas você pode aplicar uma cor diretamente no trecho CSS, basta substituir $titlecolor pelo valor correspondente 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;

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;

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

Todos os estilos que você aplicar em .post h3, você deverá aplicá-los também em:
.post h3 a, .post h3 a:visited, .post h3 strong

Tutoriais