27 de jun de 2012

Tutorial - Menu Pikachu

Hellooo!
Uma leitora pediu um tuto de como se chama esse menu, que tem aqui no UG, e o nome dele é Menu Pikachu ava
Bom, ele é um poquiiinho complicadinho, e precisa de atenção...
Bom vamos lá...
Creditos desta postagem são dados ao The Lovers porque foi a Lary que fez o menu ^^
...
Va em Design >> Edit HTML >> CTRL + F e procure por: ]]></b:skin>
Quando achar, acima desta tag, voce vai colar este código:
/* Menu Pikachu por The Lovers */
pikachu{
background:  #f8f8ff; /* Cor de Fundo */
color: #000000; /* Cor da Fonte */
border-left: 3px solid #ffdab9; /* Cor da borda lateral esquerda */
border-right: 3px solid #ffdab9; /* Cor da borda lateral direita */
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
display:inline; /* Modo de exibição */
border-radius: 10px;
-webkit-transition-duration: .50s;
padding: 6px;
margin: 2px;
font-size: 11px; /* Tamanho da fonte */
text-align: center;
width: 25%; /* Tamanho do menu*/
float: left;
font-family:  Arial; /* Nome da fonte do menu */
}
pikachu:hover{
border-left: 3px solid #8470ff; /* Cor da borda lateral esquerda ao passar o mouse*/
border-right: 3px solid #8470ff; /* Cor da borda lateral direita ao passar o mouse */
background: url("http://data.whicdn.com/images/27954221/Free-Desktop-Wallpaper-Violets-2000x1650_large.jpg") repeat; /* url da imagem de fundo */
color: #000000; /* Cor da Fonte ao passar o mouse */
text-shadow: 0px 0px 2px #6b6b6b; /* cor da sombra do texto do menu */
display:inline; /* Modo de exibição */
-webkit-transition-duration: .50s;
padding: 6px;
margin: 2px;
font-size: 11px; /* Tamanho da fonte do menu ao passar o mouse */
text-align: center;
width: 25%; /* Tamanho do menu ao passar o mouse */
float: left;
font-family: arial; /* Nome da fonte do menu ao passar o mouse */
}
Caso não queira uma imagem de fundo, troque:
background: url("http://data.whicdn.com/images/27954221/Free-Desktop-Wallpaper-Violets-2000x1650_large.jpg") repeat;

Por:
background: #f2f2f2; /* Cor de Fundo */

Mude as cores de acordo com seu gosto, se quiser, utilize a tabela de cores clicando aqui
Para usar, cole o seguinte código em um HTML//JavaScript:
<a href="LINK DA PÁGINA"><pikachu>NOME DA PÁGINA</pikachu></a>

Beijos
Bruna

3 comentários:

  1. Oi , queria tanto fazer o Menu :( , mas eu já estou com um , quem sabe um dia .. Adorei a postagem e o layout do blog . Lindo , quer afiliar-se com meu blog ?
    http://piimentaroosa.blogspot.com.br/

    Comenta lá em algum post me avisando :)

    ResponderExcluir
  2. Oi flor a convido para seguir meu blog o Loook' e se gostar aceita parceria? Beijokas

    masterloook.blogspot.com

    ResponderExcluir
  3. Oi fofa o menu é lindo... estou usando ele no meu Blog ficou super fofo...aah e eu coloquei os créditos okay?
    Bjoss Júuh
    ~~> http://coisinhasdemeninas13.blogspot.com.br/

    ResponderExcluir

Seja educado.
Poder pedir postagens, e sugestões são bem vindas
Obrigada e volte sempre