27 de set de 2012

Tutorial: Menu Pikachu

Oii minhas flores de primavera!! Bom, a pedido especial eu trouxe a vocês o Menu Pikachu, igual ao do blog, créditos totalmente ao blog The Lovers, e quem quiser o tuto é só clicar em Read More..





Primeiro vá no seu HTML, clique em CTRL+F e procure por ]]></b:skin> logo ACIMA dessa tag cole:
/* Menu Pikachu por The Lovers */

pikachu{
background:  #f8f8ff; /* Cor de Fundo */
color: #000000; /* Cor da Fonte */
border-left: 3px solid # 68228B; /* Cor da borda lateral esquerda */
border-right: 3px solid #68228B; /* 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:15%; /* Tamanho do menu*/
float: left;
font-family:  Arial; /* Nome da fonte do menu */
}
pikachu:hover{
border-left: 3px solid # B0E0E6; /* Cor da borda lateral esquerda ao passar o mouse*/
border-right: 3px solid # B0E0E6; /* Cor da borda lateral direita ao passar o mouse */
background: #f2f2f2; /* Cor 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: 18%; /* Tamanho do menu ao passar o mouse */
float: left;
font-family: arial; /* Nome da fonte do menu ao passar o mouse */
}

Caso queira uma imagem de fundo, troque:

background:  #f8f8ff; /* Cor de Fundo */

Por:

background: url("URL IMAGEM") repeat;

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>



4 comentários:

  1. Obrigada eu já salvei e vou usar já já
    hey vc ganhou um selinho do Liebster Award do meu blog bjss
    !!World Teen!!
    Perfect Girl
    (clica no perfil)

    ResponderExcluir
  2. Que fofo :)

    Beijos,
    Sim Senhorita (Clique no perfil)

    ResponderExcluir
  3. Achei lindo!
    Bjinhus!

    A Little Wolf (No perfil)

    ResponderExcluir
  4. Oi flor, aceitar afiliação?


    http://garotascomveneno.blogspot.com.br/

    ResponderExcluir