Junte-se a 22.515 pessoas que
decidiram aprender tudo sobre Criação de Blogs Profissionais e Redes Sociais.

Postagens Vanessa S.

Destacar Primeira Letra do Texto no Post

Você já deve ter visto em alguns sites, onde no parágrafo inicial de uma postagem, a primeira letra do texto se apresenta de forma destacada, em tamanho maior que as demais letras e em negrito.

Se você quiser dar um destaque a primeira letra do texto em seus posts, basta acrescentar algumas linhas de código no seu CSS, conforme explicarei abaixo.

1º passo – Acesse o menu “modelo >> Editar HTML >> Expandir modelos de widgets.
Copie o código abaixo e cole-o ACIMA de ]]></b:skin>


p.introduction:first-letter {
font-family: 'Trebuchet MS', Times, Sans-Serif;
font-size : 350%;
font-weight : bold;
float : left;
width : 2em;
padding-right: 5px;
}

 

Salve as modificações!

2º passo – Sempre que for escrever um novo texto, no modo “Editar HTML” da postagem, acrescente a seguinte linha:


<p class="introduction">
ESCREVA SEU TEXTO AQUI
</p>

 

Portanto, sempre que for destacar a primeira letra do texto, deverá escrever seu artigo normalmente entre : <p class=”introduction”> e </p>
Facil não?

[dica]DICA:
1) Se em determinada postagem, você não quiser dar destaque a primeira letra do texto, simplesmente NÃO coloque esta linha na mensagem.

2) Se preferir, você pode modificar o tipo da fonte (font-family), por exemplo:’Monotype Corsiva’, ‘Tahoma’, ‘Verdana’ etc. [/dica]

Sobre o autor | Website

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.

Desculpe, os comentários deste artigo estão encerrados.

6 Comentários

  1. Jo Porfirio disse:

    Clau eu já fiz a personalização da dat em formato de calendário que vi aqui no seu blog e usei essa "talvez div"que vc cita ai em cima se eu colocar esse código em cima de novo na mesma div não vai alterar na data,pq qr que fique c a dta e a 1º letra do poste personalizada,me diz como faço,bjos!!!

  2. ::Clau:: disse:

    @Scarpin:
    Deve ser devido ao script q vc usa, tenta retira-lo.
    Obrigada pelo comentário e volte sempre viu?

  3. Scarpin disse:

    Olha, Adorei! Estou usando no meu blog! Só tem um probleminha… tanto o título das minhas postagens, como a minha letra inicial (que estão com fonte script) não aprecem no Firefox! Aff!

    Pego muitas dicas por aqui!!!!! Parabéns.

  4. Žéß?_?T disse:

    é bom mas eu acho que nao é tao util

  5. ::Clau:: disse:

    @Sidney Crivelari:
    É uma boa dica tb. Valeu Sidney e obrigada por comentar.
    Volte sempre!

  6. Sidney Crivelari disse:

    Maravilha, adorei a dica, eu estava fazendo uma gambiarra para fazer este efeito, mas da sua forma fica mais bonito.
    Dica se quiser trocar o nome p.introduction:
    coloque letrao ou capitular mais facil de lembra na hora de chamar.. class="letrao"….
    Abraços

Por gentileza, se deseja alterar o arquivo do rodapé,
entre em contato com o suporte.