~ 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 {2. Apague tudo e substitua pelo código abaixo:
background: $(post.background.color) $(post.background.url) repeat scroll top left;
_background-image: none;
}
.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;
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!
Arrasou! Usei e aprovei,obrigada Lú!Veem cá...Quem te deu o direito de invadir meus pensamentos ? o.o kk bjú'x
ResponderExcluirGarota Chique Official
Awn, obrigada! Pode usar :3
ExcluirCuidado Máh! Eu sou muito perigosa! huahusaus'
Tô vendo,não vou dormir de medo !! ashuashuashuashua'
ExcluirAdoro esse tuto o blog fica tão lindo!
ResponderExcluirSegue se gostar?
garotadabolsa.blogspot.com
Obrigada, fica mesmo :3
ExcluirSigo sim :3
ah da afiliação, eu mudei de HTLM
ResponderExcluiragora é esse:
http://gotasderain.blogspot.com.br/
se puder trocar o outro e por esse nos parceiros agradeço, beijos
Ah sim,
Excluirmudei a url do seu blog :3
Muito bom e legal o tuto ^-^ Adorei seu blog muiiito perfeito o layout e tudo =] Estou seguindo segue de volta?
ResponderExcluirhttp://pantherpinkandblue.blogspot.com.br/
Beijos ;**
Obrigada, sigo de volta sim :,
ExcluirEste comentário foi removido pelo autor.
ResponderExcluir