16/05/2012

11

Título dos Gadgets em "Abas"


Tumblr_m1wt9wapoz1qfcyo3o1_r1_500_large
Bem, algumas pessoas pediram então resolvi dizer como eu fiz os títulos dos gadgets ficarem assim como o do blog. Na verdade, foi uma imagem, e vou disponibilizar a base pra vocês editarem, OK? Clique em Mais!
Eu tirei um PRINT da minha sidebar, tirei as medidas e simplesmente desenhei por cima. Depois é só salvar desse jeito.
Presta atenção no exemplo aqui do blog:
Deixei um espacinho embaixo da mesma cor do gadget para eu conseguir colocar as "abinhas" entendeu?
Agora, depende muito da largura dos seus gadgets.
Essa base abaixo é para gadgets com 250px de largura, OK?
Edite as cores como quiser, e depois é só colar antes de ]]></b:skin> isso:
.sidebar h2{
text-align:center;
background: url(URL AQUI!);
font-size: 21px;
color: #000;
padding-top: 5px;
width: 274px; /* Altere de acordo com a largura da sua imagem*/
height: 35px;
text-shadow: 1px 1px 0 #000;
margin-left:-35px;
}
Ponha a URL da imagem e salve!
Pronto, já tem seu Título em Abas!




11 comentários:

  1. Obaa, eu tava mesmo procurando esse tutorial flor, vs me salvoou ! mtmtmtm obrigada, e obrigada tambem por visitar e segui meu blog ! Super seguido de voltaa, ;)

    http://crazygirl-original.blogspot.com

    ResponderExcluir
  2. eeeeebaaaa* meu proximo lay vai ficar perfeito obrigada estava mesmo prescisnado laurinha posta tutu de como colocar caixa de recados igual a sua beijos to seguindo.

    http://treshoficial.blogspot.com.br/

    ResponderExcluir
  3. aceita afiliação????

    http://treshoficial.blogspot.com.br/

    ResponderExcluir
  4. promto ja te coloquei (:

    ResponderExcluir
  5. Tutorial perfeito, sempre quis saber com você fez isso U_U
    Aceita afiliação?
    http://blogheyteen.blogspot.com.br/

    ResponderExcluir
  6. ótimo tuto =)
    kissus
    Cherry Bomb | <a href="www.facebook.com/blogcherrybomb>Fan page</a>

    ResponderExcluir
  7. Olá será que vc tem como fazer um tutorialensinando a deixar a barra lateral bonita como a sua, e como fazer um menu igual a esse...

    ResponderExcluir
  8. O meu não tem esse código! ]]> aparece 0 de 0 encontrados :( Poderia me ajudar?

    ResponderExcluir