24 janeiro, 2012

Maratona de Tutoriais - Personalizar os Títulos dos Gadgets

Girl-love-photography-favim.com-275546_large
Oiee meus Bolos de Cenouras e calda de chocolate =D (Delícia)
 Como esta é a 3° parte da maratona de tutoriais , vim com um tutorial especial e muito Útil, vou ensinar a vocês Personalizarem o Título dos Gadgets. Achei e aprendi no Material - Extra
Vamos ao tuto, para saber qual vai ser o resultado, veja a imagem abaixo daqui do Sweet Dreams como exemplo :


Bom mas se quiser maior a fonte ou outra fonte é só editar depois no Designer do modelo do blogger. Vamos ao tuto:

Vá em Design>Editar HTML>Dê CTRL+F e pesquise por :        /* Headings
Você deve encontrar isto :

/* Headings
----------------------------------------------- */

Um pouco mais abaixo deve aparecer assim :

.footer-inner .widget h2,
.sidebar .widget h2 {
  padding-bottom: .7em;
}

Antes de fechar a chave coloque :
  background-image: url(URL DA SUA IMAGEM);
  background-position: center;
font-size: 16px;
text-align: center;
Deverá ficar assim :

.footer-inner .widget h2,
.sidebar .widget h2 {
  padding-bottom: .7em;
  background-image: url(URL DA IMAGEM);
  background-position: center;

 font-size: 16px;
  text-align: center;

}

Onde está  :  URL DA IMAGEM , você coloca a url do background de fundo que você quer.
Se quiser uma cor ao invés de imagem troque background-image: url(URL DA IMAGEM); por background: #000000;             Se quiser uma cor diferente troque   #000000  Pela cor que você quer. Para isto use a tabela de cores clicando aqui. Se quiser aumentar o tamanho para que o título fique grande ( que no caso está um pouco a menos do médio ) troque o número 16 que está no código pelo tamanho que quiser, visualize para ver se é o tamanho que queira!
Se quiser uma barrinha pontilhada em baixo do titulo como no exemplo abaixo:


Continue em Editar HTML, e Dê CTRL+F novamente e pesquise de novo por :     /* Headings
E antes de fechar a chave daquele código editado, este aqui :

.footer-inner .widget h2,
.sidebar .widget h2 {
  padding-bottom: .7em;
  background-image: url(URL DA IMAGEM);
  background-position: center;

 font-size: 16px;
  text-align: center;

}

Coloque :    border-bottom: 1px dashed #000000;

E deverá ficar assim :

.footer-inner .widget h2,
.sidebar .widget h2 {
  padding-bottom: .7em;
  background-image: url(URL DA IMAGEM);
  background-position: center;

 font-size: 16px;
  text-align: center;

border-bottom: 1px dashed #000000; 
}

E novamente onde está #000000 colorido de azul substitua pel cor de sua preferencia, Para isto use a tabela de cores clicando aqui.

Gente então é só isto por hoje, Espero ter ajudado Bjokas XOXO Bye !!!

7 comentários:

  1. Oii,tem post novo lá no meu blog,pode conferir??
    é uma surpresinha...
    Bjss
    http://leka2002.blogspot.com

    ResponderExcluir
  2. muito sucesso pro blog viuu?
    visita laá:))
    http://girlsmeninaa.blogspot.com/
    beijos ^*^!

    ResponderExcluir
  3. OI linda seguindo sim!! obg vio? kisskiss e volte sempre!

    Rawar-->> World Girl
    http://ianapaulinhaaaa.blogspot.com/

    ResponderExcluir
  4. Adorei essa maratona de tutoriais! E o lay está fofo...

    Beijos,
    http://meumundoecolorido.blogspot.com/

    ResponderExcluir
  5. Estou seguindo seu blog, muito legal! Gostei! Parabéns! :D

    Poderia seguir o meu?
    http://eternosonhooficial.blogspot.com.br/

    ResponderExcluir
  6. O tutorial é otimo! Adorei mesmo.. Vou usar quando resolver um problema no titulos dos gadget do meu blog, ah e o seu blog já está nos meus favoritos rs! Bjs
    http://beijo-de-cereja.blogspot.com.br/

    ResponderExcluir