27/05/2012

personalizando os titulos dos gadgets

Oi gente !! vim aqui postar um tutorial que eu procurei muito :X achei no blog Cherry Bomb!
leia mais......
confira:

Tumblr_lyiw0rhbj41r77neyo1_500_large
Olá cherries! Vamos continuar com a maratona de tutoriais. Hoje você vai aprender como personalizar os títulos dos gadgets da sidebar.
Eu vou mostrar onde você deve mexer, e passar um código básico, mas você pode usar sua criatividade para fazer outras alterações e criar diferentes estilos.

No painel do blogger, clique no nome do seu blog, depois, clique em "Modelo" no menu vertical que aparece no lado esquerdo da tela. Clique no botão "Editar HTML" que fica em baixo da miniatura do seu blog, e clique em prosseguir no aviso que aparecer.

Aperte Ctrl+F e procure por h2 {
Logo abaixo do trecho que você procurou, vai ter algo parecido com isso:

h2 {
  font: $(widget.title.font);
  color: $(widget.title.text.color);
}
Apague toda essa parte e no lugar coloque esse código:
.sidebar h2 {
font-family: Century Gothic; /*Tipo de fonte*/
font-size: 16px; /*Tamanho da fonte*/
color: #000000; /*Cor da fonte*/
border-bottom: 2px solid #fff; /*Borda de baixo, apague se não quiser*/
background: #fbfbfb; /*Cor de fundo*/
text-align: center; /*Alinhamento do texto*/
}
Agora é só modificar as cores e a fonte como quiser. Se em vez de cor, você quiser colocar uma imagem de fundo, substitua essa parte:
background: #fbfbfb; /*Cor de fundo*/
Por isso:
background: url(link_da_imagem) no-repeat center;
height: 30px;/*Altura da imagem*/
width: 200px; /*Largura da imagem*/ 
Visualize se está tudo certo e salve. A partir desse código você pode aplicar outros efeitos, comosombrabordas arredondadas e outros estilos de bordas. Espero que tenha sido útil. Se usarem, não esqueçam dos créditos ok ;D Amanhã tem mais tutorial, aguardem!


Gostaram? eu simplesmente A-D-O-R-E-I-!

tava procurando muito mesmo!

comentem!! E serio viu? 
créditos magali girls

Nenhum comentário:

Postar um comentário