7.9.12

Tutorial-Sidebar com efeito hover

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

Primeiramente faça aquele esqueminha,vá em Modelo e clique em Editar Html,depois de abrir vai parecer um tipo de advertência e aperte prosseguir depois  aperte f3 ou crtl f e procure por:
/* Widgets.

Em baixo disso ira aparcer:

.sidebar .widget {

Abaixo do código acima você 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 código 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

Nenhum comentário:

Postar um comentário

Vai comentar? Muito obrigada, vai fazer uma louca feliz.
Mas antes temos umas regrinhas
♠- Apesar de eu falar palavrões, e de mais da conta, por favor se contenham com os palavrões também
♥- O Eternamente Otaku, e eu, Karin, adoramos novos rostinhos por aqui. Por isso não se acanhem em querer comentar.
♦- Eu respondo os comentários, as vezes demora um tempo, mas eu sempre respondo.
♣- Tua opinião é essencial para o blog. Mas claro, que espero que você tenha educação.
♠- Aceitos tags.
♥- Comente seu link no blog, mas recomendo que tenha cuidado, o google pode considerar spam.
♦- "Seguindo, segue?" Vou pensar ¬¬
Obrigada por comentar ♥