Os tutoriais e templates aqui apresentados são voltados para os Modelos de layout (lançados em 2006). A eficácia das dicas aqui apresentadas não foram testadas nos novos modelos de templates do Blogger (2010).

16 julho 2008

Destacando a primeira letra do texto

Para destacar a primeira letra de um texto como você vê aqui, acrescente no CSS do código do seu template (acima de ]]></b:skin>)

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

Salve a alteração. Quando escrever um novo texto, no modo HTML da postagem, acrescente:
<p class="introduction">texto aqui</p>

Você pode modificar livremente o tipo da fonte (font-family) não esquecendo apenas de escolher fontes que sejam comuns à todos os browsers. Você pode escolher quantos tipos de fontes quiser, contanto que separe os nomes por vírgula (o browser escolherá o primeiro que reconhecer da lista), nomes compostos entre aspas e finalize com um nome genérico, como Sans-Serif.

Artigos Relacionados

22 comentários:

Eliana Lima disse...

Adorei a dica, Ariane. Obrigada.
Vou tentar.
bjooo
Eliana

Cidão disse...

Legal, eu estava procurando por algo assim. Mas a fonte monotype não foi reconhecida. :o(

Ariane disse...

Eliana, que bom que gostou!

Cidão, como não? se eu não me engano, esta fonte é reconhecida em 100% dos navegadores. Vc colocou o nome completo da fonte e entre aspas?

milton c disse...

Estou usando essa dica que você deu e ficou legal. Valeu pela dica.
Milton C

Lá... Em algum lugar disse...

Oi Ariane!!
Fiz do jeito que vc indicou... Mas, não aparece a letra "destacada". =`(
Help-me!!

Valéria disse...

Estou visitando alguns blogs para desejar um feliz dia do amigo....não poderia deixar de passar aqui...afinal quase tudo em meu blog agradeço a sua dedicação para com todos os blogueiros.
Obrigada
Felicidades.

laemalgumlugar disse...

Ariane... Pq eu não consegui descatar a primeira letra na postagem? Eu fiz do jeito que vc indicou... Mas, não aparece.
Por favor... Aguardo um retorno.
Obrigada!!

Ewerton Claudino Martins disse...

Eu também não consegui !

Viviart disse...

Não consegui também........snifff....
Acho q não entendi, colei o cód [acima de] onde vc mandou mas não foi, aparece um sinal ")" solto no início da página. Então tenho certeza q estou colando no lugar errado ou está faltando um caracter... me ajuda please!!!

BiA disse...

Óh eu aqui de novo te elogiando.
Fica muito legal, obrigado pela dica.

Bjão tudo de bom.

Uma nova mulher disse...

Olá, td bem?
Nossa seu BLog é mt show mesmo viu!
Eu consegui fazer isso, mas toda vida que for postar tem que colocar o script? N tem um jeitinho de ficar fazendo automatizado não?

Bjos e parabéns!

Ah, peguei um template livre seu, que vc diz que é sem crédito e tal..mas mesmo assim colocarei um link pro seu blog no meu viu, pode deixar, vc merece!

DOWNLOAD'S YURI !!BAIXE TUDO GRÁTIS !!! disse...

oi fiz do jeito que vc falpu mas não funciona quando puder me ajuda...

parabens pelo blog.
muito obrigado

Flávia disse...

Utilizei pela primeira vez a dica.
Adorei.
Brigada.

Lidia Silva disse...

Olá Ariane,tudo bem?
Sempre qdo posso adoro visitar seu blog.Com ele aprendo muito,a sua explicação não deixa dúvidas.Não sei pq as outras pessoas não consegue.Eu naõ tenho curso nenhum de informática e com suas dicas eu faço sem problemas.Estou até pensando em fazer um curso.
Deus te abençõe !Bj!

Claudinha disse...

Olá! Obrigada por sempre me ajudar!
Eu consegui postar a letra, só que ela aparece na segunda linha que escrevo... Não consegui encontrar o erro!
Beijos!

Samuel disse...

nao seria mais fácil eu mesmo aumentar o tamanho dessa letra e colocá-la em negrito ?

Ariane disse...

Samuel, é mais fácil mas não se obtém o mesmo efeito.

May disse...

oioi... adorei a dica... mas só uma coisinha. A letra fica muito afastada do texto, tem como aproximar mais?

Fernanda Prates disse...

Você SALVOU MINHA VIDA.

Ariane disse...

My, o que vejo no Firefox é a letra grudada no texto.

(¯`·._.·[***Celina***]·._.·´¯) disse...

Oiii Ariane, adorei sua dica, ficou ótimo no meu blog, gostei bastante. valeu!
Bjobjo e boas festas;)

רפאל Madeira disse...

ah no meu nem deu buaa =/ rs

Postar um comentário

Os comentários são moderados.