Olá meninas, como vão?Pra fazer esse template, eu ralei e muito! Tive que pesquisar muuitos blogs, e tinha outra versão antes dessa que resolvi mudar completamente porque confiei em mim mesma e pensei: " Sou capaz de fazer um template melhor pras minhas blogueiras".Então aqui está o resultado de tanta trabalheira!E agora, já que o blog tá de visu novo.Que tal vocês aprenderam um pouquinho de alguns códigos que podem fazer uma grande diferença no blog de vocês?!
O tutorial deste post vai ser: Como arredondar e sombrear as bordas do post e sidebar
1.Arredondando as bordas da área dos posts:
Primeiro, vá no html do seu blog, apert ctrl+f e procure por: .main-inner .column-center-outer {
em seguida coloque EMBAIXO do código que está destacado o seguinte:
-moz-border-radius: 10px; /* Para Firefox */
-webkit-border-radius: 10px; /*Para Safari e Chrome */
border-radius: 10px; /* Para Operaav
-webkit-border-radius: 10px; /*Para Safari e Chrome */
border-radius: 10px; /* Para Operaav
2. Para arredondar as bordas do sidebar:
Porcure no html por:.main-inner .fauxcolumn-right-outer .fauxcolumn-inner {
Se a sua sidebar fica localizada na parte direita da tela.
ou
.main-inner .fauxcolumn-left-outer .fauxcolumn-inner {
Se ela estiver localizada a esquerda
e cole EMBAIXO o seguinte código:
-moz-border-radius: 10px; /* Para Firefox */
-webkit-border-radius: 10px; /*Para Safari e Chrome */
border-radius: 10px; /* Para Operaav
e cole EMBAIXO o seguinte código:
-moz-border-radius: 10px; /* Para Firefox */
-webkit-border-radius: 10px; /*Para Safari e Chrome */
border-radius: 10px; /* Para Operaav
Como ela vai ficar:
3. Bordas sombreadas:
- Na área das postagens
Para conseguir esse efeito de sombra nas bordas procure por: .main-inner .column-center-inner {
em seguida, ABAIXO da area destacada você coloca
box-shadow: 1px 4px 19px 2px #DCDCDC;
padding: 10px;
padding: 10px;
- No sidebar:
Ou
.main-inner .fauxcolumn-left-outer .fauxcolumn-inner { ( se sua sidebar for na esquerda)
e abaixo cole:
box-shadow: 1px 4px 19px 2px #DCDCDC;
padding: 10px;
Eae? Gostaram?Comentem!
Muuuito legal, justamente o que eu procurava pro meu blog
ResponderExcluircupcakezandooficial.blogspot.com
Bjooo.
oi! mto bom o tuto, mas qdo eu procuro no html esse código ele diz q tem um , mas não aparece em destaque. oq eu faço?
ResponderExcluirObrigada pelo tuto! <3
ResponderExcluirNão funcionou!
ResponderExcluirque pena, :/ você deve ter feito algo errado.
Excluir