sexta-feira, 2 de março de 2012

Aréa do texto da postagem colorida

quer-sorvete

Oii minhas batatinhas rufles, como vão ? eu vou bem, trouxe mais um tutorial para vocês, eu vou ensinar a vocês como deixar a aréa dos textos dos post coloridas, é bem fácil e rápido, vamos lá

Vá em Design Editar HTML e procure por .post-body { e você vai achar algo parecido com isso:

.post-body {
  line-height: 1.4;
  position: relative;
}

E logo abaixo da ultima linha cole o seguinte código:

border: 1px dashed Coloque o código da cor da borda aqui; ;
background: Coloque a cor do fundo aqui

Agora vamos entender, o que está grifado em laranja, e o tamanho da borda, aumente o número para a borda ficar maior. O que está grifado em roxo, é o estilo da borda.

E vai ficar assim:

.post-body {
  line-height: 1.4;
  position: relative;
border: 1px dashed Coloque o código da cor da borda aqui; ;
background: Coloque a cor do fundo aqui
}

E você pode fazer vários estilos, e colocar bordas arredondadas ou personalizadas, aqui em baixo tem modelos comas bordas prontas:

Esse é com bordas arrendondas e quadradas:

.post-body {
  line-height: 1.4;
  position: relative;
border: 1px dashed Coloque o código da cor da borda aqui; ;
-webkit-border-top-right-radius: 20px;

-webkit-border-bottom-left-radius: 20px;

-moz-border-radius-topright: 20px;

-moz-border-radius-bottomleft: 20px;

border-top-right-radius: 20px;

border-bottom-left-radius: 20px;
background: Coloque a cor do fundo aqui
}

E essa é com as bordas arredondadas:

.post-body {
  line-height: 1.4;
  position: relative;
border: 1px dashed Coloque o código da cor da borda aqui; ;
-moz-border-radius: 10px; /* Para Firefox */
-webkit-border-radius: 10px; /*Para Safari e Chrome */
border-radius: 10px; /* Para Opera 10.5+*/
background: Coloque a cor do fundo aqui
}

Vizualize e se estiver tudo certo, salve !, haa e não se esqueçam de acreditar !

Thau !

30 comentários:

  1. aa conheço esse tuto
    é mega útil :D

    Beeijos,
    http://blogportalteen.blogspot.com

    ResponderExcluir
  2. Não conhecia, super útil :D
    www.viverserfeliz-renata.blogspot.com

    ResponderExcluir
  3. Muito fácil ne ? Vou tentar fazer, espero que fique legal

    http://www.perfeitinhablog.com/
    http://thaisr-encomendas.blogspot.com/

    ResponderExcluir
  4. Você ganhou o mini concurso do extras 4 you :)

    ResponderExcluir
  5. Ainda não conhecia esse tutorial, adorei mesmo e o melhor é que é super fácil mesmo, Beijos' http://wwwgertiegirlcom.blogspot.com/

    ResponderExcluir
  6. Heey flor, concurso em parceria com o Sendo Diferente, conto com sua participação♥
    http://sendodiferente.blogspot.com/2012/03/concurso-em-parceria-com-fp.html

    ResponderExcluir
  7. tem selinho pra vc la no blog
    http://lltudoaver.blogspot.com

    ResponderExcluir
  8. Jessie, pode partcipar sim quem não tem facebook, o facebook é opcional :D

    ResponderExcluir
  9. Legal esse tutorial :) Valeu a dica ;) rs

    Bjos
    http://dropsparadise.blogspot.com

    ResponderExcluir
  10. Muito útil o tuto, não conhecia rs. Bem prático ;* XOXO charmenaveia.blogspot.com

    ResponderExcluir
  11. ótiimo tutorial é muito util esse (:

    Gosta de ler? Sim, então não deixe de participar do sorteio que esta rolando no GN, e ainda mais nao custa participar né!

    http://garotoonerd.blogspot.com/2012/03/sorteio-garoto-nerd-spazio-dm.html

    ResponderExcluir
  12. Tutorial muito bom *-*
    http://perfeitateen.blogspot.com/

    ResponderExcluir
  13. Amei a dica! :D

    Adorei o blog e quero saber todas as novidades! Já estou seguindo. Espero que curta o meu!
    http://www.pronomeinterrogativo.com

    ResponderExcluir
  14. Muito bom mesmo o tutorial, fica legal, diferente. (:
    Seu blog é uma fofura, achei ele lindinho.
    Estou seguindo, se gostar segue de volta?

    Burnny

    ResponderExcluir
  15. o tuto é mega util, adorei :)

    Bjs,
    bnascimentooo.tk

    ResponderExcluir
  16. Muito bom o tuto, acho que fica muito lindinho *o*

    Beijos, fashionwithstyle.tk

    ResponderExcluir
  17. Ah, adorei! Já fazia um tempo que eu tava querendo fazer isso *-*
    Valeu a dica :D

    Beijo
    http://semquerermeintrometer.blogspot.com/

    ResponderExcluir
  18. flor tem post novo no meu blog

    http://www.perfeitinhablog.com/
    http://thaisr-encomendas.blogspot.com/

    ResponderExcluir
  19. Pode sim participar se não tiver face.

    http://www.perfeitinhablog.com/
    http://thaisr-encomendas.blogspot.com/

    ResponderExcluir
  20. Show o tutorial! :D . to seguindo.


    Miquéias Hudson
    http://tourdoestilo.blogspot.com/

    ResponderExcluir
  21. Ótimo tutorial.
    http://perfeitamenteteen.blogspot.com

    ResponderExcluir
  22. *-* adogo tutoriais, amei esse.
    #Bezos Rawr -----> Bikoti.blogspot.com

    ResponderExcluir
  23. Amei o tutu *-* Muito legal!!

    Ok flor, estou esperando o post com a tag, hein?! rsrs...

    Beijos, Lili - Blogdatalitaa.blogspot.com

    ResponderExcluir
  24. Oi *-* brigada pela visitinha lá no blog, volte sempre, sempre tem post novo (:

    http://garotadoolharsincero.blogspot.com

    Eu não sabia desse tuto, mais não coloco pq o fundo muito colorido atrapalha ler :/

    ResponderExcluir
  25. confere meu post novo ?

    http://www.perfeitinhablog.com/
    http://thaisr-encomendas.blogspot.com/

    ResponderExcluir
  26. oi flor, aceito parceria sim ^^
    Já coloquei seu link, me avisa quando colocar tbm
    beijinhos ♥
    semodoss.blogspot.com

    ResponderExcluir
  27. Amei o tutorial, valeu a dica Flor

    www.dicasdegarota.com

    beijo

    ResponderExcluir
  28. Passando pra agradecer o comentário. Quando tiver post novo avisa lá. Kisses.

    Burnny

    ResponderExcluir