11.6.13

Menu Cute

Yoo
Trouxe um menuzinho cute que eu
encontrei recentemente e tou repassando pra vocês !
Ele é assim :
Ele é hover e muda de cor ao passar o mouse !
Vamos aprender ?
Vá em ''Editar HTML'' e procure por: ]]></b:skin>
Acima de 
 ]]></b:skin> cole o seguinte código :

@font-face {
font-family: 'Pixelade';
src: url('http://static.tumblr.com/ig73lmp/FNdmcixx3/pixelade.ttf');
}

Este é o código da fonte do menu. 
Ele está instalado no seu modelo, e você pode usa-la em outras coisas.
Novamente antes de 
]]></b:skin> cole o seguinte código :

/* Menu Marshmallow por Pequena Garota*/
marsh{
color: #949494; /*cor da fonte*/
text-align:center;
font-family: Pixelade; /*não altere*/
font-size: 13px;
background: #FEF2F1; /*fundo do menu*/
padding: 2px;
float: left;
margin: 2px;
width: 22%; /* tamanho do menu */
-webkit-transition-duration: .80s;
box-shadow: inset 0 0 18px #ffe4e1, 0 0 3px #FFD1CC; /* sombra interna */
border-radius: 3px; /*bordas arredondadas*/
}
marsh:hover{
background: #f0f8ff; /*fundo do menu ao passar o mouse*/
color: #949494; /*cor da fonte ao passar o mouse*/
-webkit-transition-duration: .80s;
box-shadow: inset 0 0 18px #D7ECFE, 0 0 3px #afeeee; /* sombra interna */
border-radius: 3px; /*bordas arredondadas*/
}
Se quiser mudar as cores, personalize somente o que está em itálico
Agora vá em layout e adicione um gadget HTML/JavaScript e cole o seguinte código :

<div><a href=" LINK "><marsh> NOME</marsh></a>
<a href=" LINK "><marsh> NOME </marsh></a>
<a href=" LINK "><marsh> NOME </marsh></a>
<a href=" LINK "><marsh> NOME </marsh></a>

Coloque o link da página aonde esta escrito LINK, e o nome que você quer que apareça em NOME.
Pronto !
Créditos (x)

11 comentários:

  1. awwwwwwn que fofo esse menu! Amei o tuto *u*

    ResponderExcluir
  2. Lindinho o menu >.<
    http://novajuventudexxi.blogspot.com.br/

    ResponderExcluir
  3. Que menu lindo *O*
    ~Kissus

    HTML Thing - htmlthing.blogspot.com

    ResponderExcluir
  4. Vei, eu nunca consigo achar, muito maguada :'(

    ResponderExcluir
  5. Vei, eu nunca consigo achar, muito maguada :'(

    ResponderExcluir
  6. Vei, eu nunca consigo achar, muito maguada :'(

    ResponderExcluir
  7. Eu coloquei, mas não aparece assim bonitinho, porque sera?

    ResponderExcluir
  8. Gostei mt mt do seu blog.; otimo tutorial mas tou procurando menu para colocar abaixo do cabeçalho, tipo uma barra;
    Filha do Rei

    ResponderExcluir

♥ Todos os Comentários serão respondidos .
♥ Leia Antes de Comentar .
♥ Se for falar sobre algo além do post, comente sobre ele primeiro .
♥ Não aceitarei nenhum tipo de xingamento, mas estou aberta a críticas contrutivas .
♥ Se for usar ou repassar algum tutorial, utilitário ou qualquer coisa que te inspire no Sweet Glitter, NUNCA esqueça de dar os merecidos créditos.
♥ Deixe o link ou url do seu blog no final do comentário para que eu possa retribuir a visita .
♥ No mais, obrigado pela visita e sejam bem vindos !