Tutorial - Título Do Gadget Com Efeito Hover

~ Heey pessoal, como foi a segunda de vocês ? espero que bom, porque a minha foi ótima (não é sempre neh gente haha)
Bom hoje trago mais um tutorial para vocês, é bem bacana. É como colocar os títulos dos gadgets com efeito Hover.
Códigos do  Price-Teen.
Enfim é um tutorial muito fácil e ficará assim:




1.Primeiro abra o HTML do seu blog, aperte Ctrl+F procure por ]]></b:skin>

2.Acima  desta tag cole o seguinte código:

/* TITULO DO GADGET BY LEANDRO (prince-teen) */
.sidebar .widget {
padding: 10px;
margin-bottom: 40px; /*Espaço entre um gadget e outro*/
}
.sidebar .widget h2 {
background: #70B8B8; /*Cor do fundo do título*/
width: 170px; /*Largura do fundo, aumente se quiser*/
font-family: Verdana; /*Fonte do título*/
font-size: 14px; /*Tamanho da fonte*/
font-weight: normal;
line-height: 14px; /*Altura da linha, coloque o mesmo tamanho que usou na fonte*/
margin-top: -31px; /*Quantos pixels o título sobe*/
margin-left: -10px;
padding-left: 5px;
transition-duration: 1s;
-moz-transition-duration: 1s;
-webkit-transition-duration: 1s;
}
.sidebar .widget h2:hover {
background: #C0ADC0; /*Cor do fundo do título*/
width: 150px; /*Largura do fundo, aumente se quiser*/
font-family: Verdana; /*Fonte do titulo*/
font-size: 14px; /*Tamanho da fonte*/
font-weight: normal;
line-height: 14px; /*Altura da linha, coloque o mesmo tamanho que usou na fonte*/
margin-top: -31px; /*Quantos pixels o título sobe*/
margin-left: -10px;
padding-left: 5px;
transition-duration: 1s;
-moz-transition-duration: 1s;
-webkit-transition-duration: 1s;
}

Agora é só modificar oque está em negrito. Visualize antes para ver se está tudo certo.