2.9.12

Tutorial- Menu como o meu

Tumblr_m9n5katwl11ret0ljo1_500_large

Oi meus bombons! Bom, hoje eu trouxe um tutorial pedido pela Aline. Vou ensinar a fazer esse menuzinho aqui do blog, mas todos os créditos são ao The Lovers.



Vá no seu HTML, dê CTRL+ F e procure por:

]]></b:skin>

ACIMA dessa tag coloque:

/* 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("URL DA IMAGEM") 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 */
}

Mude as cores e coloque a imagem que ficará no fundo ao passar o mause, e depois salve. 

Após isso, adicione um gadget de HTML/javascript e cole o seguinte código:

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

Edite e depois salve. Prontinho! Beijooos!

7 comentários:

  1. Awn, ótimo tutorial, o menu fica super cute *o*
    Beijos!!!!

    ->Morango aos Pedaços

    ResponderExcluir
  2. Legal! Acho que vou usar este menu no meu próximo lay! Quer fazer afiliação?? Qualquer coisa fala na C-box do meu blog, ou comenta.
    Beijos,
    Aline (Sweet Girls)

    ResponderExcluir
    Respostas
    1. obrigada ^^ desculpa, mas estamos sem vagas... quando eu abrir te aviso :3

      Excluir