Maratona de Tutoriais - Personalizar os Títulos dos Gadgets

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 !!!