DIY :: Como Personalizar os Gadgets do Blog

Olá Pessoas , Tudo bem ?  hoje vou ensinar a como personalizar seus gadgets , assim como eu fiz o meu ou até melhor haha ^^ , quer aprender , siga o tutorial , passo a passo e com cuidado !

Primeiro vá em  MODELO > HTML , em seu teclado coloque Ctrl + F  , vai aparecer uma caixinha , dentro dela você vai colocar isto e clicar Enter :

h2 {

Se você nunca personalizou esta parte estará assim:

 h2 {

font: $(widget.title.font);

color: $(widget.title.text.color);

}

Centralizando o título :

Antes de fechar a } insira este código:

text-align: center;

Colocar uma cor de fundo:

Antes de fechar a } insira este código:

background: #000;  /*color de fundo*/

Onde está de rosa modifique o código pela cor que deseja.

Arredondando as bordas do fundo:

Antes de fechar } insira este código:

background: #000;

 -moz-border-radius: 3px;

-webkit-border-radius:3px;

-goog-ms-border-radius: 3px;

border-radius:3px;

O 3px é o angulo de arredondamento. Quanto maior fica mais arredondado fica. Se for deixar mais redondo terá que modificar os quatro 3px, para dar certo.

Colocando imagem ao invés de cor:

Antes de fechar } insira este código:

background: transparent url(ENDEREÇO DE SUA IMAGEM) center no-repeat

height: 50px; /*altura da imagem*/

width: 200px;  /*largura da imagem*/

Você pode colocar faixas, basta saber o tamanho dela e hospeda-la para obter o url da imagem , ok ? haha

Aqui alguns Modelos que vocês podem pegar o url !