segunda-feira, 30 de janeiro de 2012

Como colocar a caixa de gadgets como no SP

Imagem retirada do GoImagine.blogspot.com

O tutorial que eu vou ensinar agora é sobre como colocar os gadgets (como os do Sweet Pink) em forma de caixas. Quer aprender? Então leia o tutorial!

Eu recomendo você copiar o seu código html e colá-lo em um bloco de notas para caso o tutorial não der certo, não causar nenhum dano ao seu blog.

Então vamos ao que interessa.

Vá em Design/Editar html, dê Ctrl+F e procure por:

/* Widgets

E logo ANTES de fechar } cole o código a seguir:

background: #fff; /*---- cor do fundo da caixa ----*/ 
  padding-left: 20px; /*---- espaço à esquerda ----*/ 
  padding-bottom: 20px;  /*--- espaço de baixo ---*/ 
  padding-right: 20px; /*--- espaço à direita ---*/ 
  padding-top: 5px; /*---- espaço de cima ----*/ 
border-radius: 5px; /*---- bordas arredondadas, apague a linha se não quiser ----*/
box-shadow: 1px 3px 15px 2px #ccc; /*---- sombra da caixa ----*/

Está tudo explicadinho no código, então é só mexer tudo direitinho.
Visualize e, se estiver tudo certinho, salve. Pronto! Tutorial acabado! Simples, não?

Ah, fora que isso dá uma ajuda para o seu blog ficar mais original.
Obs.: Tutorial feito com base no tutorial do Go Imagine (clica!). Não reblogue se retirar os créditos.

Beijos,
Ana Lola.

2 comentários:

| By Ana Lola | Somente para o Sweet Pink | Proibida Cópia © |