Personalizando o título dos Gadgets com efeito Hover

Oi pessoal! Hoje vou ensinar a personalizar o título dos Gadgets com efeito Hover. Para quem não sabe, hover é o efeito que muda quando passa o mouse.

Lembrando que esse tutorial não serve para faixinhas, pois elas ficam desconfiguradas. Caso você use outro tipo de personalização, fica muito legal mudar a cor do fundo ou da letra.

1- Vá no HTML do seu blog, aperte CTRL+F e procure por:

 h2 {

Vai estar mais ou menos assim:

/* Headings
----------------------------*/
h2 {
 font: $ (widget.title.font);
 color: $(widget.title.text.color);
}

2- Substitua o trecho acima por:

.sidebar h2 {
font-family: 'Sofia', cursive; /*Tipo de fonte*/
font-size: 26px; /*Tamanho da fonte*/
color: #000; /*Cor da fonte*/
background: url(http://img843.imageshack.us/img843/200/sidebar2222.png) no-repeat center; /*imagem de fundo*/
height: 46px; /*Altura da imagem*/
width: 180px; /*Largura da imagem*/
text-align: center; /*Alinhamento do texto*/
}
.sidebar h2:hover {
font-family: 'Sofia', cursive; /*Tipo de fonte quando passa o mouse */
/font-size: 28px; /*Tamanho da fonte quando passa o mouse*/
color: #000; /*Cor da fonte quando passa o mouse*/
background: url(http://img843.imageshack.us/img843/200/sidebar2222.png) no-repeat center; /*imagem de fundo quando passa o mouse*/
height: 46px; /*Altura da imagem*/
width: 180px; /*Largura da imagem*/
text-align: center; /*Alinhamento do texto*/
}

3- Instalando a fonte:
-Procure por </head> e acima disso, cole o seguinte código:

<link href='http://fonts.googleapis.com/css?family=Sofia' rel='stylesheet' type='text/css'/>

Se quiser, substitua o trecho  http://img843.imageshack.us/img843/200/sidebar2222.png  por uma imagem personalizada. Não esqueça de ajustar as medidas da sua imagem.

- Se quiser uma cor, troque essa parte:

background: url( http://img843.imageshack.us/img843/200/sidebar2222.png) no-repeat center;
height: 46px; /*Altura da imagem*/
width: 180px; /*Largura da imagem*/

Por esta:

background: #000000; /*Cor de fundo*/

-Se quiser, troque a imagem do efeito hover por uma igual, só que com a cor diferente, vai ficar lindo!