Borda colorida,arredondada e sombra interna nos widgets e bloco de postagens

Hi,people.

A dica de hoje é de como  colocar borda colorida+arredonda+sombra interna nos widgets e bloco das postagens como há na maioria dos blogs,inclusive aqui.

 Voçe pode optar também por somente a borda colorida,ou somente  arredondada ou somente a sombra interna,isso vai da sua escolha.

**Sempre faça backup de seu template,antes realizar quaisquer procedimentos que envolva alterações no código fonte HTML do seu modelo.

 Personalizar o bloco das postagens.

Asceda ao seu código Html,vá em Modelo>Editar HTML> nao é necessário marcar a opção 'expandir modelos de widgets'
Após isso de um Ctrl+F e procure pelo trecho .date-outer {

Depois dela cole as seguintes regras de estilização:

/*sombra interna no bloco das postagens*/

-moz-box-shadow: 0px 0px 20px #eeeeee inset, 0px 0px 5px #cccccc;
  -webkit-box-shadow:0px 0px 20px #eeeeee inset, 0px 0px 5px #cccccc;
  -goog-ms-box-shadow: 0px 0px 20px #eeeeee inset, 0px 0px 5px #cccccc;
  box-shadow: 0px 0px 20px #eeeeee inset, 0px 0px 5px #cccccc;

/*sombra arredondada no bloco das postagens*/
  -moz-border-radius: 3px 3px 3px 3px;
  -webkit-border-radius: 3px 3px 3px 3px;
  -goog-ms-border-radius: 3px 3px 3px 3px;
  border-radius:3px 3px 3px 3px;

 /*borda colorida no bloco das postagens*/

border-top:5px solid #000000!important;

border-bottom:5px solid #000000!important;

 Atribua os valores  onde esta destacado em cor lilás,deixando do seu jeito ou a combinar com seu layout.

*Obs:Por padrão ja existem  estas regras nos modelos do blogger,voçe so precisará então substituir os valores de cada uma delas,ou apaga-las e colocar essas no lugar.

Personalizar os widgets

Porcure por .main-inner .section { ou .main-inner .widget { e cole logo depois,as seguintes regras:

/*sombra interna ns widgets*/

-moz-box-shadow: 0px 0px 20px #eeeeee inset, 0px 0px 5px #cccccc;
  -webkit-box-shadow:0px 0px 20px #eeeeee inset, 0px 0px 5px #cccccc;
  -goog-ms-box-shadow: 0px 0px 20px #eeeeee inset, 0px 0px 5px #cccccc;
  box-shadow: 0px 0px 20px #eeeeee inset, 0px 0px 5px #cccccc;

/*sombra arredondada nos widgets */
  -moz-border-radius: 3px 3px 3px 3px;
  -webkit-border-radius: 3px 3px 3px 3px;
  -goog-ms-border-radius: 3px 3px 3px 3px;
  border-radius:3px 3px 3px 3px;

 /*borda colorida nos widgets*/

border-bottom:5px solid #000000!important;

*Obs.como disse anteriormente ja existem estas regras nos modelos do blogger,voçe so precisará então substituir os valores de cada uma delas,ou apaga-las e colocar essas no lugar.Lembre-se também  de colocar os mesmos valores que atribuiu para o bloco das postagens .

Esta dica foi útil?te Ajudou?deixe seu comentário ai...
Até a proxima...