Destacar a primeira letra do post

|
267896_217827954922204_191850820853251_560791_4832284_n_large_large
Olá! Hoje vou ensinar para vocês um truquezinho que vem sendo pedido há muito tempo, mas eu nunca lembrei de fazer. Vamos aprender como deixar a primeira letra do seu post maior e com uma cor diferente, igual aqui no  blog. Veja o print:


É mais ou menos assim que vai ficar. É muito simples de fazer. 
Vá no modelo do seu blog > Editar HTML
Aperte Ctrl+F e procure por ]]></b:skin>
Antes do código que você procurou, cole isto:

big {font-size:50px; /*tamanho da fonte*/
font-style:bold;
color: #ff1b72; /*Cor da letra*/
line-height:30px; /* altura da linha*/
float:left;}

Altere o tamanho e a cor da fonte de acordo com seu blog. A altura da linha, é melhor ajeitar depois que tiver aplicado o estilo no post. Salve as alterações.

Para aparecer a letra destacada, você tem colocar a primeira letra entre as tags <big></big>, no modo editar HTML do post. Veja um exemplo:

<big>O</big>lá! Hoje vamos falar sobre livros.

Depois que você publicar o post, se tiver ficado fora do lugar, você volta no HTML do seu blog e altera a altura da linha até ficar certinho.

Bem simples não é? Espero que tenham gostado! E mais uma vez, desculpe por não estar respondendo os comentários. É que são muitos e eu estou dedicando meu tempo em fazer um novo layout, que vocês verão em fevereiro. Espero que isso compense ;D. Kissus!

Divulgando: Sorteio de um kit suuuuper fofo para a volta ás aulas lá no Gravidade Artificial!

67 comentários

  1. Muito obrigada liah , vou fazer isto agora, bjokas XOXO Bye ! Sigo seu blog há muito tempo, retribui??

    http://sweetdreamsoficial.blogspot.com/ 

    ResponderExcluir
  2. Obrigada! Era o que eu tava precisando!
    http://korea-tech.blogspot.com 

    ResponderExcluir
  3. Yo!
    Meu deus! Eu estava procurando por este tudo justamente neste dias atrás >.<
    Adorei o tuto \õ\

    Sayoonara! x)

    ResponderExcluir
  4. Alana Stankiewicz de Souza25 de janeiro de 2012 às 12:46

    Sempre quis saber como fazia isso, mas sou muito esquecida, não vou lembrar de colocar as tags no post :/ Mas ótimo o tuto, como sempre né dona Liah? haha

    goimagines.blogspot.com

    ResponderExcluir
  5. Que ótima dica. Fico super lindo a letra destacada desse jeito.
    Layout e post novinho lá no Refúgio Teen, já viu?Beijos ;*refugio-teen.blogspot.comrascunhos-dos-sentimentos.tumblr.com

    ResponderExcluir
  6. elisa bastos martins de olivei25 de janeiro de 2012 às 13:07

    Ótima dica! Eu estou bolando o próximo design para o meu blog e vou usar isso!
    Mas Liah, se puder por favor faça um tuto ensinando a fazer esse menu vertical perfeito seu, porfavor!
    Beijos,

    voandolalonge.blogspot.com

    ResponderExcluir
  7. adorei!!! ficca bem chamativoo!! bjs
    http://avidademalu.blogspot.com/ http://designdesenhos.blogspot.com/http://ohmygood-omg.blogspot.com/ 

    ResponderExcluir
  8. não consegui =/


    blogdavic2012.blogspot.com

    ResponderExcluir
  9. Que tutorial demais! Apliquei no meu blog e ficou lindo! Obrigada!

    Bjs

    daimaginacaoaescrita.blogspot.com

    ResponderExcluir
  10. Ja tentei fazer isso no meu blog mas nao deu certo.
    Vou ver se com esse tuto consigo!

    Bjs
    http://blogportalteen.blogspot.com

    ResponderExcluir
  11. Ótima dica, vou ver se tento depois!!
    Será que você podia votar no Rascunho-errado nesse site: garotoonerd.blogspot.com Já é a 2 etapa.. Obrigada desde já!! Beijos, (=
    rascunho-errado.blogspot.com

    ResponderExcluir
  12. Ahh legaal, tava doidinha pra aprender a fazer esse tutoriaal! Acho muito legal essa letra maior, dá um toque diferente no post haha'

    Bjos ;*

    fofoquinhainocente.blogspot.com

    ResponderExcluir
  13. Eu sempre quis saber como se fazia isso!!rsrs :D
    http://meumundomudando.blogspot.com/ 

    ResponderExcluir
  14. Ótimo tutorial, eu sempre quis saber como se faz isso! Tô ansiosa pelo novo lay :D

    ResponderExcluir
  15. Anw, estou louca pra ver o novo layout Liah. Deve estar lindo, haha *-*
    Eu adoro este tuto, fica lindo no post! :D

    http://world-cutest.blogspot.com/ 

    ResponderExcluir
  16. Ótimo tutorial, aposto que o novo layout vai ficar lindo!
    Não sei se você gosta de selinhos/memes, mas eu indiquei o Cherry Bomb lá no blog
    http://www.bookpetit.com/2012/01/selinho.html

    Beijitos

    ResponderExcluir
  17. Hey Liah !!
    Esses dias eu estou postando muito sobre tutoriais no meu blog,só que não tinha quasi na de novidade e então resolvi explicar no meu blog "Como personalizar o post-footer" e deixa igual ao seu com esse fundo preto e o pontilhado rosa,dei os créditos paro seu blog,ok ?
     
    http://blog-sweetthings.blogspot.com

    ResponderExcluir
  18. Oww liah, já estou usando \o
    estou ansiosa para ver o no lay *-*
    http://diariodeuma-retardada.blogspot.com/

    ResponderExcluir
  19. Já conhecia esse tutorial, mas fica super bonito né? Bem melhor do que ter que fazer manualmente
    Te espero lá, bjbjhttp://cabidemoderno.blogspot.com/

    ResponderExcluir
  20. Liah, espero qque vc leia, tem um blog que plagiou o seu leia mais e um post seu e sem créditos, só pra você saber!

    ResponderExcluir
  21. Oi Liah! Sou iniciante no mundo dos blogs, e os seus tutoriais ajudam muito. Obrigada! Gostaria de saber se tem um espacinho nos afiliados, ou se está lotado. Eu ainda não tenho seguidores, mas chego lá!

    Beijão!
    clichetutoriais.blogspot.com

    ResponderExcluir
  22. Que tutorial legal, vou fazer no meu  blog! Beijo

    www.leerosy.blogspot.com

    ResponderExcluir
  23. Ah eu acho bem legal quando a primeira letra do post é maior que as outras. Acho que vou usar esse seu tutorial no próximo layout. haha' Adorei. *-*

    Beijos, Nathy.

    http://naahthaliaa.blogspot.com/ 

    ResponderExcluir
  24. Um efeito que fica lindo, mais é do tipo que não usaria na estação keionbu. 

    http://keionbuotaku.blogspot.com/

    ResponderExcluir
  25. Nossa o tutorial é bem simples mesmo achei que era tão difícil rs


    Go Belezando

    ResponderExcluir
  26. Que blog foi? Deixa o link pra eu poder denunciar =s

    ResponderExcluir
  27. WOW LIAH, belo tutorial *-*

    Ah, deixa eu te falar uma coisa: Tem espaço nos afiliados? HGFJKGHFKJBjonas e fique com Deus <3Camilla Martins - http://sugar-dance.org

    ResponderExcluir
  28. Liah é super facil!!! eu pensavaa que era super dificil!!! (:
    bjoons!
    kayla
    http://kaylacristina.blogspot.com/

    ResponderExcluir
  29. è  mto bonitinho o meu tem isso ...*o*
    Liah da uma passadinha lá que eu coloquei voce nos blogs que indico ve lá bjs

    www.dicasluh.blogspot.com

    ResponderExcluir
  30. Achei super fácil! Acho que vou fazer quando trocar o layout!

    Beijos!
    http://curiosanews.blogspot.com

    ResponderExcluir
  31. Muito bom!Gostei!

    Lufashionteen.blogspot.com

    ResponderExcluir
  32. Adorei o tuto, estou usando no meu blog e deixei os créditos no final do post *-*
    Louca pra ver o novo lay haha

    Beijão
    Ana
    meninasantenadas.tk

    ResponderExcluir
  33. Oi Liah! Eu gostei do tutorial. Você participou de um jogo no meu blog e foi uma das ganhadoras. Eu posso mandar os prêmios para o e-mail do Cherry Bomb?

    Layla

    ResponderExcluir
  34. Liah, você é uma das pessoas que mais sabem sobre blogs...Então me explica uma coisa que eu tenho MUITA DÚVIDA:Qual é a diferença ente concursos, promoções e sorteios!

    Se você me responder ficarei muitíssimo grato.

    Cozinhando com o Minduim

    ResponderExcluir
  35. Que legaal liah muuuitissimo obrigada vou aplicar esse tuto no meu próximo layout. Posso pedir ajuda?É que eu queria ganhar *-* vota no Tudo Sobre Photoscape? http://conspirantes.blogspot.com/2012/01/votacoes-abertas.html Obrigadaa :3


    http://eduardaatayna.blogspot.com/

    ResponderExcluir
  36. Boa dica!
    http://blogmuitofofodaaline.blogspot.com/ 

    ResponderExcluir
  37. Olá queridas,
    A.M.E.I o blog de vocês esta muito lindos meus Parabens rs'
    Estou seguindo e babando no design riaria
    Se poder fazer o mesmo seguindo meu blog
    Beijos com sabor de mel
    chuvaadenovembro.blogspot.com

    ResponderExcluir
  38. Liah, você é uma das pessoas que mais sabem sobre blogs...Então me explica uma coisa que eu tenho MUITA DÚVIDA:Qual é a diferença ente concursos, promoções e sorteios!

    Se você me responder ficarei muitíssimo grato.

    Cozinhando com o Minduim

    ResponderExcluir
  39. Nossa, no meu próximo layout vou usar *---*
    http://docevenenoblog.blogspot.com/

    ResponderExcluir
  40. Adorei, estou usando! #anciosa para o novo lay!!!!

    http://queloucura-blog.blogspot.com

    ResponderExcluir
  41. ótima dica amr. com certeza vou usar nos meus posts . 
    http://innocenceteen.blogspot.com/ 

    ResponderExcluir
  42. Olá gostei do seu blog e estou seguindo!
    Eu sou nova ,comecei a escrever uma história,se interessar lei e comente ficarei muito feliz
    :D
    http://mydesaire.blogspot.com/ 

    ResponderExcluir
  43. Adorei o Tutorial ... já tou a usar. ^^
    lunardays.blogspot.com

    ResponderExcluir
  44. Juliana Rodrigues dos Santos29 de janeiro de 2012 às 13:11

    Liiiah ! Seu blog é tudo ! Parabéns linda !

    ResponderExcluir
  45. como faz pra deixar a letra centralizada, e n alinhada a esquerda? bjs


    cherry-miint.blogspot.com

    ResponderExcluir
  46. é muito lindo e fácil de fazer!
    Adorei!

    placeforgirlsblog.blogspot.com

    ResponderExcluir
  47. O pseudo-elemento first-letter é usado para obter um efeito especial na primeira letra de um texto.
    ex:
    p {
    font-size: 12pt
    }
    p:first-letter {
    font-size:300%;
    }
    edite a vontade com seu conhecimentos de css.
    Não si se vai funcionar no blogger, mas num site puro HTML + CSS funciona perfeitamente!

    ResponderExcluir
  48. amei muito booommmm CONSEGUI FAZER *-*

    ResponderExcluir
  49. Oie! Ameii o tuto! Já estou seguindo o blog! Parabéns!
    Vou usar este tuto para por no meu blog =D
    Beijoss!!!
    >>http://blogoficialfriendsforever.blogspot.com.br/<<

    ResponderExcluir
  50. eu fiz tudo mas não eu certo você sabe me dizer o pq?

    ResponderExcluir
  51. Obrigada! ótima dica, Liah!
    >> super-kawaii-fofura.blogspot.com

    ResponderExcluir
  52. Ficou legal,Seus tutos vem me ajudando sempre

    ResponderExcluir
  53. Olá, Liah! Adorei o tutorial, porem não funcionou em meu blog. Poderia me ajudar?

    www.cake-bunny.blogspot.com.br

    ResponderExcluir
  54. Ops, passei só pra editar. Funcionou (tinha esquecido de colocar em HTML), porém "cortou" um pouco da letra, o que faço? Desculpe o incômodo.

    Pedro, webmaster do blog www.cake-bunny.blogspot.com

    ResponderExcluir
  55. Adorei, bem fácil e fica bonito ^^ Só estou com uma dúvida, o modelo base que eu estou usando é aquele viagem que vocês sugerem. Porém na página inicial mostra só uma lista pequena com os posts, tem como mudar isso? Mostrar o post inteiro, 2 por pagina por exemplo?

    Espero resposta (:

    ResponderExcluir
  56. Uhuuuuuuu!!! Consegui colocar no meu blog! Adorei o tutorial Lia! Estou sempre por aqui! Adoro seu blog e seu jeito de escrever! bjss

    Deixei os créditos no final desse post! Obrigada.

    http://www.rosanautas.com/2012/10/3-sorteio-de-aniversario-caixinha-blush.html

    ResponderExcluir
  57. Ajudou muitoo obrigada
    http://fashionaddicttion.blogspot.com.br/

    ResponderExcluir
  58. Oi Liah, queria saber onde é o HTML do post na nova interface, obrigada!

    ResponderExcluir
  59. amoo esse tutorial já usei ele fica lindo!!

    Adolescente nerd

    ResponderExcluir
  60. Ah muito lindo vou usar em breve no meu blog no meu layout de 4 meses!!
    Fica muito lindo um detalhe que ajuda a deixar o blog mais bonito e simplesmente fácil de fazer!!
    Beijos Liah

    ResponderExcluir
  61. Perfect. obrigadaaaaaaaaaa
    resultado:
    http://kawaiiitutoriais.blogspot.com.br/

    BJS..........Thami

    ResponderExcluir
  62. Visita e segue, voceis vão gostar;;
    http://ddiariodeumagarotas2.blogspot.com.br/

    ResponderExcluir
  63. no meu nao deu certo.... aparece com o ''T'' soq mt legau a dica!!

    http://loohve.blogspot.com.br/

    ResponderExcluir

Related Posts Plugin for WordPress, Blogger...