Título do Gadget com efeito Hover

Large
vomitando arco-íris eternamente u_u

~ Heey pessoal, como foi o domingo de vocês ? espero que bom, porque o meu foi ótimo (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. 


6 comentários:

Milk Miruki disse... [Responder comentário]

Yoo Minna \õ/ .. amei o post ><

Oliver do Paradise City
lets-rock-bitch[blogspot]com

Tire "[ ] "

vivian disse... [Responder comentário]

Amei o blog ele é muito fofo e eu amei o post :D

Aceita afiliação? Beijos

http://fofurasdegarotas.blogspot.com.br/

Unknown disse... [Responder comentário]

*uu* meu domingo foi otimo 0/
AMei o tuto , num proximo lay talvez eu use
Afilia?

geekegirlie.blogspot.com || G² ofc.

BiS disse... [Responder comentário]

Own, amei a imagem de início, amo coelhos <3
Gostei bastante do tutorial, o resultado fica bem bonito *u*

~kiss
CS ♥

ღ Rockie Winchester ღ disse... [Responder comentário]

Oie , tudo bem!!! Vc tà topando afiliação?Se sim gostaria muito de ter um parceria!!!
Pois Adorei seu blog!

Bjs,Complicada e Perfeitinha!!!
http://perfeita-complicada.blogspot.com.br/

× Tam ♡ disse... [Responder comentário]

Muito obrigada com o tutu ^^
Vou usar,e com os devidos créditos ^^