27 de jun de 2012

Menu pikachu


Ooi gente! Recebi um pedido da Bárbara para postar o menu que eu estou usando, o nome dele é Menu Pikachu e todos os créditos são ao The Lovers.

No seu HTML, procure por ]]></b:skin>.

Cole acima dessa tag:

/* 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 */
}
Para fazer suas edições, use essa tabela de cores.

A imagem de fundo do hover, você pode mudar, ou se quiser uma cor, troque:

background: url("http://data.whicdn.com/images/27954221/Free-Desktop-Wallpaper-Violets-2000x1650_large.jpg") repeat;

Por:

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

Para usar, abra um Gadget HTML/JavaScript e cole:

 <a href="LINK DA PÁGINA"><pikachu>NOME DA PÁGINA</pikachu></a>

Cole uma vez para cada página do seu blog.

Se usar o menu, credite o The Lovers e diga que viu no Diamantes de uma Garota.

Beijos!

6 comentários:

  1. Lindo, lindo, lindo, lindo, lindo...(ii chega neh) rsrsr'
    Super fofo;
    By Girl: -->< sohossemsaida.blogspot.com.br
    Espero a sua ida em meu Blog tambem viu floor :)

    ResponderExcluir
  2. Nossa adorei *-*
    Beijinhos
    http://diariosamigas.blogspot.com.br/

    ResponderExcluir
  3. Aiiin, fica lindo, pena que não combina com o meu blog! :S
    Mas é um ótimo tutorial!
    Beijos...
    Batom De Framboesa

    ResponderExcluir
  4. Legal o tuto, flor! *-* Ah, e nossos blogs são afiliados, mas não estou vendo meu link (SammySacional) no seu.

    http://sammysacional.blogspot.com.br/

    ResponderExcluir
  5. Hooy meus amores,
    Será que poderiam participar do sorteio de um Gloss Mary Kay?
    Link; inspiracoesdagarotaperfeitinha.blogspot.com.br/2012/06/sorteio-de-comemoracao-de-nova.html

    Boa Sorte!!!

    ResponderExcluir

Obrigada por ler e comentar!
Deixe o link do seu blog (ou seu perfil aberto) para que eu possa retribuir. Não gosto muito de responder dúvidas via comentários, então prefiro que você mande na ask ali ao lado ->
Comentários de divulgação sem nada sobre o post não serão retribuidos. Fale pelo menos um pouquinho sobre o post, por favor.
Faça aos outros aquilo que você quer que façam para você.