22/07/2012

Separando as Postagens com Bordas Arredondadas

Hoy Gente, como estão nesse Domingo? A pedidos da minha amiga Luly (www), no Tutorial de hoje nós vamos aprender a separar as postagens do Blog e deixá-las com as bordas arredondadas.
Parte dos códigos deste tutorial é do Pink Pimenta, e a outra parte é minha mesmo. Quem estiver curioso, clica ai para ver o resto!

No Painel do Blog, vá em Design - Editar HTML - Ctrl+F e pesquise por .main-inner .column-center-outer {
Você encontrará algo parecido com isso:
.main-inner .column-center-outer {
background: $(post.background.color) $(post.background.url) repeat scroll top left; _background-image:none;}
Apague tudo e troque pelo código abaixo:
.post-outer {
background: #fff; /* Fundo da postagem */
padding-top: 4px; /* Espaço do topo */
padding-left: 5px; /* Espaço da esquerda */
padding-right: 5px; /* Espaço da direita */<
margin: 5px 3px 25px;
O Código acima irá apenas separar as postagens do seu Blog, mas ainda não deixará as bordas arredondadas, para arredondar, acrescente o código abaixo antes da chave } que fecha o código:
border-radius: 20px; 
Prontinho, as suas postagens já estão separadas e com as bordas arredondadas. Espero ter ajudado a Luly e a todos vocês também! Até mais pessoal :) 

28 comentários:

  1. Que legal o tutorial! Uso ele mas sem as bordas arredondadas, fica mesmo lindo né? Bjão

    ResponderExcluir
  2. Que legal o tutorial. Talvez eu use, mas gosto das postagens juntinhas mesmo.

    the-rain-will.pass.blogspot.com

    ResponderExcluir
  3. É um ótimo tuto Alex, fica muito lindo ♥ Combinou muito aqui com o POF ;]
    Nhaac:3 |Viciadas em Cupcakes

    ResponderExcluir
  4. oii.
    tudo bem? vim aqui te pedir um favor mt importante pra mim.
    queria q vc votasse no meu blog oblogdapp.blogspot.com em um concurso que estou participando!
    para votar no meu blog, siga esses passo XD :
    ---> vá no meu blog e na direita dele tem um retangulo dourado escrito TOP BLOG. clique nele e vote!
    ah, e se puder vote mais de uma vez com outras contas que vc tem (como por exemplo outro email, facebook e twitter).
    OBS: se vc votar em mim com um email, vá na sua caixa de entrada no email q vc votou e confirme o voto ok?
    PFV, ME AJUDE A VENCER COM SEUs VOTOs!
    bjs =D

    ResponderExcluir
  5. Ah, não acredito que você postou! Com certeza eu vou usar nos próximos layouts. Ficou suoer bem explicadinho e eu entendi super bem, e você tem precisa ter dito que fui que eu pedi, Alex! Obrigada mesmo, vai me ajudar muito. E pode deixar que eu credito o blog. Um beijo!
    the-zombie-attack.blogspot.com

    ResponderExcluir
  6. Adorei o tuto! Super útil..
    Tô seguindo, amei o seu blog! Retribui? Tem selinho pra ti lá no blog.. Beijinhos
    http://neerd-priincesa.blogspot.com.br/p/selinhos.html

    ResponderExcluir
  7. Tuto super útil! Seu blog é lindo, primeira vez que vejo um blogueirO!^^
    http://planetfashiong.blogspot.com.br/

    ResponderExcluir
  8. achei o tuto útil e bem legal.
    http://sonhosdeegelo.blogspot.com.br

    ResponderExcluir
  9. Nossa, ótimo e simples! Eu não sei se vou utilizar, mas ficou a dica. Já deixei até guardadinho o código. HSUAHSAUHSUAHS Beijos seu lindo, <3

    ResponderExcluir
  10. Já que eu sou muito abusada, queria pedir pra você recomendar o meu blog ):

    ResponderExcluir
  11. Os dois tutos deixam o blog mais fofo *--* Bem úteis, acho que vou usar o de separar postagens no próximo lay.

    Kissus ----> Blog Bola de Chiclete.com *--*

    ResponderExcluir
  12. muito bom o tutorial!!! fica lindo!
    spaziodm.com

    ResponderExcluir
  13. Arrasou, adoro esse tutorial Alex!
    Só que eu prefiro quadradinho mesmo hihi'*-*

    Beijos,
    http://quinzedilemas.blogspot.com.br/

    ResponderExcluir
  14. Adorei o tuto Alex!! Beijos
    http://pepper-of-rock.blogspot.com.br/

    ResponderExcluir
  15. Ainda não conhecia o tutorial Alex! Achei bem bacana e é super simples.

    rosaschiclete.blogspot.com

    ResponderExcluir
  16. Adorei o tutorial !
    Fica muito lindo !
    Nhaac ~~> www.piinkrock.tk

    ResponderExcluir
  17. Muito útil o tutorial, fica muito bonito no final. Você aceita ser me afiliado? Se aceita me avisa.
    http://blogger-boysattitudes.blogspot.com.br/

    ResponderExcluir
  18. Adorei Alex! acho que ja vou usar *u*
    beijos ~> magic-touch.tk

    ResponderExcluir
  19. Muito bom o tutorial . Acho que vou usar no meu próximo layout :)

    http://bugigangazdanet.blogspot.com/

    ResponderExcluir
  20. Já fiz um tutorial desses lá no WC, é sempre bem-vindo não acha?

    Um beijo,
    http://www.world-cutest.blogspot.com.br/
    imperfeitanostagia.blogspot.com

    ResponderExcluir
  21. Está aceitando parceria?
    --> http://meninoridiculo.blogspot.com.br/

    ResponderExcluir
  22. o meu nao esta dando certo de jeiito nenhuum' :/

    ResponderExcluir
  23. http://glamourmeninas.blogspot.com.br/
    Me visite,ajudou muito, obg!!!

    ResponderExcluir
  24. Adorei! Mas a data fica fora da "caixa". Sabe como arrumar?

    ResponderExcluir