Como Colocar Bordas Arredondas No Post e Gadgets

 Oie Gente  Hoje vou ensinar como colocar bordas arredondas na área da postagem e nas gadgets.

    Pra quem usa os modelos do blogger esse tutorial é muito bom porque vai ajudar da uma aparência agradável ao blog.

Então Vamos Lá 


1Passo: Colocar Cor na Gadget

Primeiro, você vai em painel, design de modelo, avançado e clica em plano de fundo da barra lateral e a deixa transparente para facilitar o tutorial. Agora você vai em design, editar HTML, pressione CTRL+F e procure por:  /* Widgets



Logo achando esse código, abaixo dele irá estar assim, se você não fez nenhuma alteração:


/* Widgets
----------------------------------------------- */
.sidebar .widget {
border-bottom: 2px solid $(widget.border.bevel.color);
padding-bottom: 10px;
margin: 10px 0;
}

Agora, preste bem atenção, logo abaixo do código margin: 10px 0; você irá colar isso Background: #cccccc;  ficando mais ou menos assim:



/* Widgets
----------------------------------------------- */
.sidebar .widget {
border-bottom: 2px solid $(widget.border.bevel.color);
padding-bottom: 10px;
margin: 10px 0;
Background: #cccccc;
}


Bom, agora você irá trocar esse #cccccc pela cor que deseja para ser

 o fundo da barra. Aconselho usar essa tabela .Tabela De Cores

Arredondando As Gadgets


Bem, vá no seu HTML , aperte ctrl + f e procure por /*Widgets , feito isso você encontrará 4 linhas de comando, assim:


/* Widgets
----------------------------------------------- */
.sidebar .widget {
border-bottom: 2px solid $(widget.border.bevel.color);
padding-bottom: 10px;
margin: 10px 0;
}

Antes de fechar a chave (  }  ) cole

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

Ficando Assim:

/* Widgets
----------------------------------------------- */
.sidebar .widget {
border-bottom: 2px solid $(widget.border.bevel.color);
padding-bottom: 10px;
margin: 10px 0;
}
Antes de fechar a chave ( } ) cole
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;




Arredondar A Área da Postagem

Procure Por .main-inner .column-center-outer {  e cole o seguinte código abaixo da tag
-moz-border-radius: 10px; /* Para Firefox */
-webkit-border-radius: 10px; /*Para Safari e Chrome */
border-radius: 10px; /* Para Opera 10.5+*/






Tweet

Leia Mais →