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!

70 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 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 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. Oii queria dizer que gostei muito do seu blog e peço pra que visite e siga o meu :

    http://rosarosalina.blogspot.com

    obrigada :)

    ResponderExcluir
  17. Ó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
  18. 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
  19. BeatrizRibeiroGomes25 de janeiro de 2012 15:54

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

    ResponderExcluir
  20. 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
  21. 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
  22. 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
  23. Que tutorial legal, vou fazer no meu  blog! Beijo

    www.leerosy.blogspot.com

    ResponderExcluir
  24. 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
  25. Um efeito que fica lindo, mais é do tipo que não usaria na estação keionbu. 

    http://keionbuotaku.blogspot.com/

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


    Go Belezando

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

    ResponderExcluir
  28. 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
  29. Liah é super facil!!! eu pensavaa que era super dificil!!! (:
    bjoons!
    kayla
    http://kaylacristina.blogspot.com/

    ResponderExcluir
  30. è  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
  31. As inscrições para a premiação WWW estão abertas! Inscreva seu blog gratuitamente concorra ao premio e prove a todos o valor de um blogueiro!

    http://premiowww.blogspot.com/

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

    Beijos!
    http://curiosanews.blogspot.com

    ResponderExcluir
  33. Muito bom!Gostei!

    Lufashionteen.blogspot.com

    ResponderExcluir
  34. 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
  35. 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
  36. 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
  37. 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
  38. Princesa Imperfeita.26 de janeiro de 2012 13:48

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

    ResponderExcluir
  39. Moacyrneto Oliveira26 de janeiro de 2012 14:09

    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
  40. 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
  41. Nossa, no meu próximo layout vou usar *---*
    http://docevenenoblog.blogspot.com/

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

    http://queloucura-blog.blogspot.com

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

    ResponderExcluir
  44. 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
  45. Adorei o Tutorial ... já tou a usar. ^^
    lunardays.blogspot.com

    ResponderExcluir
  46. Juliana Rodrigues dos Santos29 de janeiro de 2012 13:11

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

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


    cherry-miint.blogspot.com

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

    placeforgirlsblog.blogspot.com

    ResponderExcluir
  49. 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
  50. amei muito booommmm CONSEGUI FAZER *-*

    ResponderExcluir
  51. 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
  52. eu fiz tudo mas não eu certo você sabe me dizer o pq?

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

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

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

    www.cake-bunny.blogspot.com.br

    ResponderExcluir
  56. 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
  57. 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
  58. 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
  59. Ajudou muitoo obrigada
    http://fashionaddicttion.blogspot.com.br/

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

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

    Adolescente nerd

    ResponderExcluir
  62. 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
  63. Perfeito, aliás, como tudo que você posta, né Liah. Beijão ;*
    Lorrany - Mania de BG

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

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

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

    ResponderExcluir
  66. 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...