COMO PERSONALIZAR O TÍTULO DAS POSTAGENS NO BLOGGER

Personalizar título post BloggerNa maioria dos templates do Blogger, mesmo os modificados, o título do post está representado por esta tag: h3.post-title

Todos os estilos que você quiser aplicar aos títulos deverão ser incluidos dentro destes trechos. Em alguns templates modificados, ou baixados da internet, talvez você  não ache no html do template a tag h3.post-title.
Ela existe, mas pode estar um pouco modificada.Não se preocupe. Dá para fazer a personalização diretamente no CSS. No final deste artigo eu mostro como fazer.

Mudar o tamanho da fonte:

Geralmente o tamanho da fonte está em pixel (px) mas também pode estar representada em porcentagem (%).
Para alterar o tamanho, basta substituir a % pelo valor correspondente ao tamanho da fonte que você deseja, ou pode mudar o valor em pixel.

Exemplo:
font-size:28px;
ou
font-size: 120%;

Mudar a cor da fonte:

A maioria das modificações podem ser feitas diretamente no Painel ‘Designer de modelo’ do Blogger.

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: #c31717;

Alinhar o 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.

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: ‘Verdana’, Arial, Serif;

Mudar 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;

Pode também 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:

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.

Aumentar ou diminuir o 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.

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: #cccccc;

Para adicionar CSS

Entrar no Blogger .
Selecione o blog para atualizar.
No menu à esquerda, clique em ‘Modelo’ .
Sob o modelo no blog, clique em ‘Personalizar’ .
Em ‘Designer de modelo’, no menu à esquerda, selecione Avançado> Adicionar CSS .
Adicione seu código.
No canto superior direito, clique em Aplicar ao blog .

3 comments
  1. Cara, eu consegui fazer todas as modificações que queria, mas quando clico na postagem que vai pra aquela página individual da própria o texto não fica com o mesmo alinhamento, ele se desloca um pouco para a esquerda e sai do posicionamento correto. Saberia me dizer onde eu consigo editar a página individual dos posts ?

  2. Só com sua explicação consegui modificar o título do post e mexer um pouco no template sem medo. Valeu.

Comments are closed.

Previous Post

PROPRIEDADE IMAGE_URL

Next Post

VENDER PUBLICIDADE SEM SER PENALIZADO PELO GOOGLE