♦ Tutorial ~ Menu Color Hover

Yay pandas

Tudo bem com vocês? Bom, eu vim postar um tutorial de um menu super fofo, eu tinha achado um parecido e comecei a editar até que que me apaixonei por esse menu. Fico horas passando o mouse em cima dele pra ele mudar de cor.

Bem simples também, espero que gostem.

PREVIEW na barra lateral esquerda.
Adicione esse código no CSS
Modelo > Personalizar > Avançado > Adicionar CSS

/*** Menu Color Hover ***/

/*** Antes do Hover ***/

.menuca {background: #adf6e9; /*** Cor do menu normal ***/ color: #414141; /*** Cor da Fonte ***/ font-family: 'ronda'; /*** Fonte ***/ text-transform: uppercase;  font-size: 8px; text-align: center; border-left: solid 8px #48ffdf; /*** Cor da borda esquerda ***/ border-right: solid 8px #48ffdf; /*** Cor da borda direita ***/ width: 90%; /*** Largura ***/ padding: 3px; margin: 1px; spacing: 0px; display: inline-block; -webkit-transition-duration: .90s;}

/*** Hover ***/

.menuca:hover {background: #b88bfc; /*** Cor do menu Hover ***/ color: #6500fd; /*** Cor da Fonte Hover ***/ border-right: solid 8px #a268fa; /*** Cor da borda direita ***/ border-left: solid 8px #a268fa; /*** Cor da borda esquerda ***/ width: 90%; /*** Largura ***/  padding: 3px; margin: 1px; -webkit-transition-duration: .90s;}

@font-face { font-family: "ronda"; src: url('http://static.tumblr.com/rmj06l2/kcLlo1q2y/pf_ronda_seven.ttf'); }

/*** By Chá and CupCake ***/

Se ficar muito grande na sua sidebar altere os 90% em ambos.

Então depois você vai em Layout > Adicionar um Gadget > HTML/Java Script

E adiciona:

<div class="menuca"><a href="LINK"> NOME </a></div>

<div class="menuca"><a href="LINK"> NOME </a></div>

<div class="menuca"><a href="LINK"> NOME </a></div>

Espero ter explicado direitinho. 

Ja ne!