28.3.13

Tutorial - Área dos posts separados



~ fofo

Olá meus amores, hoje estou tão feliz -
A pedidos da Stefani (www), vamos aprender a separar a área do posts do blog e deixá-las com as bordas arredondadas.. parte do código é do BC, mas editado por mim. Quem estiver curioso, clica em leia mais para ver o resto!

1. Vá no HTML do seu blog e procure (Crtl + F) por .main-inner .column-center-outer {
Se você ainda não mexeu nesta área do layout ela estará mais ou menos assim:
.main-inner .column-center-outer {
background: $(post.background.color) $(post.background.url) repeat scroll top left;
_background-image: none;
}
2. Apague tudo e substitua pelo código abaixo:
.post-outer {
margin: 4px 2px 10px;
background: #fff; /* Fundo dos posts, está na cor Branca */
padding: 20px 10px; /* Espaços */
box-shadow: inset 0 0 10px #d6d6d6, 0 0 5px #ccc; /*sombra*/
border-top: 5px solid #FA42A5; /* cor da borda de cima */
border-bottom: 5px solid #FA42A5; /* cor da borda de baixo */
-webkit-transition-duration: 1s;
-moz-transition-duration: 1s;
-o-transition-duration: 1s;
transition-duration: 1s;
}
.post-outer:hover {                                                                                                                  border-top: 8px solid #FFB6C1; /* cor da borda superior quando passa o mouse */             border-bottom: 8px solid #FFB6C1; /* cor da borda inferior quando passa o mouse */              }

Se você assim como eu, não quiser o hover apague o código em vermelho :3
 Você pode mudar as cores com essa paleta de cores (www)
O Código acima irá apenas separar as postagens do seu Blog, mas ainda não deixará as bordas arredondadas, para arredondar, acrescente esse código:
border-radius: 11px;

Visualize se estiver tudo ok, salve!
Ufaa! demorei para fazer esse post! Prontinho, as suas postagens já estão separadas e com as bordas arredondadas. Espero ter ajudado a Stefani e a todos vocês também!
Qualquer dúvida comentem, responderei ao visualizar!

10 comentários:

  1. Arrasou! Usei e aprovei,obrigada Lú!Veem cá...Quem te deu o direito de invadir meus pensamentos ? o.o kk bjú'x
    Garota Chique Official

    ResponderExcluir
    Respostas
    1. Awn, obrigada! Pode usar :3
      Cuidado Máh! Eu sou muito perigosa! huahusaus'

      Excluir
    2. Tô vendo,não vou dormir de medo !! ashuashuashuashua'

      Excluir
  2. Adoro esse tuto o blog fica tão lindo!
    Segue se gostar?
    garotadabolsa.blogspot.com

    ResponderExcluir
    Respostas
    1. Obrigada, fica mesmo :3
      Sigo sim :3

      Excluir
  3. ah da afiliação, eu mudei de HTLM
    agora é esse:
    http://gotasderain.blogspot.com.br/
    se puder trocar o outro e por esse nos parceiros agradeço, beijos

    ResponderExcluir
  4. Muito bom e legal o tuto ^-^ Adorei seu blog muiiito perfeito o layout e tudo =] Estou seguindo segue de volta?
    http://pantherpinkandblue.blogspot.com.br/
    Beijos ;**

    ResponderExcluir
  5. Este comentário foi removido pelo autor.

    ResponderExcluir

Heey!
Está pensando em comentar?! Fique à vontade!
✖ - Aceito "Seguindo, segue de volta?'' desde que a pessoa esteja realmente seguindo!
✖ - Não aceito afiliação pelo comments só aqui
✖ - Os comentários de criticas e elogios são bem vindos, desde que seja criticas construtivas!.
✖ - Perguntas, dúvidas e pedidos? Apenas na ask por favor!~
✖ - Aceito tags e selinhos, avise pelos comments ♥
~ Leio Sempre e respondo a todos os comentários!