25/11/2012

Como fazer o titulo dos gadgets em 'caixa'

Tumblr_lmmvs56fw71qfvutko1_500_large_large

Yoo! Tudo bem com vocês? Amanhã já é segunda-feira, mas para mim esse fim de semana foi até produtivo... Mas enfim, hoje eu trouxe um tutorial bem legal! É como por o título dos gadgets em 'caixas' mas para usar esse estilo, você tem que separar os gadgets primeiro, esse tutorial de como separar gadgets você encontra muito fácil, quem sabe um dia eu trago para vocês, os créditos estão no final do post.
Vamos ver...
O título do gadget fica assim:



Vá em Modelo > Editar HTML >  procure por  ]]></b:skin> e depois cole o código abaixo antes da tag que você procurou. 

.sidebar .widget {
padding: 10px;
margin-bottom: 50px; /*Espaço entre um gadget e outro*/
}
.sidebar .widget h2 {
background: #000; /*Cor do fundo do título*/
width: 150px; /*Largura do fundo, aumente se precisar*/
font-family: Verdana; /*Fonte do titulo*/
font-size: 14px; /*Tamanho da fonte*/
font-weight: normal;
line-height: 14px; /*Altura da linha, coloque o mesmo que o tamanho da fonte*/
margin-top: -30px; /*Quantos pixels o título "sobe"*/
margin-left: -10px;
padding-left: 5px;
box-shadow: 1px -1px 2px #9a9a9a;
-webkit-box-shadow: 1px -1px 2px #9a9a9a;
-moz-box-shadow: 1px -1px 2px #9a9a9a;}

No próprio código tem as explicações do que alterar. Se quiser tirar a sombra é só apagar a parte que está em roxo. Espero que tenham gostado e que funcione bem!
Peguei o tutorial do Cherry Bomb, então créditos claro >.<


4 comentários:

  1. Aaah, eu acho tãao fofinho *-------*

    ResponderExcluir
  2. Ahh, esse tuto é bem útil.
    O blog fica bem mais organizado com ele!
    Amore, mas um tuto de como vc coloca esse Status tipo ali nos extras escrito "Moderadora: Michelle" [..]
    Eu procuro em todo canto e não acho ><
    Beijoos!

    ResponderExcluir
  3. Eu testei e achei o resultado muito bom! Super fofo e prático de fazer :D
    Seguindo.
    http://rosaschiclete.blogspot.com.br/

    ResponderExcluir
  4. Fica tão fofo!! To pensando em usar no meu próximo layout!! Beeijos!
    pqngarota.tk

    ResponderExcluir