♦ 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!

10 comentários:

  1. Que lindo esse menu , adorei.
    http://meubloguinhofofo.blogspot.com.br/

    ResponderExcluir
  2. É tão lindo *----*
    http://rmonsterhighr.blogspot.com.br/

    ResponderExcluir
  3. Gosti *-* simples como você disse, porém muito lindo *----*

    ResponderExcluir
  4. Preciso de postadoras , pode publicar em seu post? = http://girls-nerd.blogspot.com.br/2013/07/querem-postar-aqui.html

    ResponderExcluir
  5. Que fofo esse menu!
    Segue lá para ajudar?
    http://eternityclouds.blogspot.com.br/

    ResponderExcluir
  6. Esse menu é super lindo, adorei! Usei ele no layout novo para meu blog. Muito obrigada, Darei os devidos créditos :)

    ResponderExcluir