Tutorial-Sidebar com efeito hover

Bom hj a Deby-chan me pediu um tutorail de como deixar o Gadget como o meu com efeito hover,bom o tutorial eu retirei desse site aki,então vamos ao Tutorial ?

Primeiramente faça aquele esqueminha,va em Modelo e clike em Editar Html,depois de abrir vai parecer um tipo de advertencia e aperte prosseguir depois  aperte f3 ou crtl f e procure por:

/* Widgets.

Em baixo disso ira aparcer:

.sidebar .widget {

Abaixo do codigo acima vc ira colocar:

background: #CorDoFundo;
font-family: calibri; /*Mude a fonte conforme seu gosto*/font-size: 10px; /*Tamanho da fonte*/color: #CorDaFonte;padding: 10px; /*Não modifique aqui*/  border: 10px solid #CorDaBorda; /*Grossura da borda, que é sólida, a cor é você quem escolhe.*/border-radius: 5px 50px 5px 50px; /*Bordas arredondadas*/ -webkit-transition-duration: 1.50s; /*duração da transição*/ }

Abaixo desse codigo cole :

.sidebar .widget:hover {background:#CorDoFundoAoPassarOMouse;border: 10px solid #CorDaBordaAoPassarOMouse;border-radius: 50px 5px 50px  5px; /*Bordas arredondadas*/}

Bom gente é isso,mas antes a dona pede para dar os devidos creditos,então quem usar credite a Cherry Capcaskull
Bom depois eu posto mais
Bye Bye