14.12.12

Menu Marshmallow

Olá Amooras...
~Tudo bem??
Hoje eu trouxe para vocês um tuto de um menu suuper cute, ''Menu Marshmallow''
Aqui vai um print para vocês verem o resultado:
Ele é houver, quando você passa o mouse ele muda de cor *--*

 Créditos totalmente ao Pequena Garota 

Gostou do menu? Então vamos ver como se faz!

Vá em ''Editar HTML'' e procure por:
 ]]></b:skin>
Acime 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. Ela 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 roxo
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, agora é só você salvar e já terá um menu ''m
arshmallow''
P.S:Caso usem o menu, não esqueçam de creditar o Pequena Garota!
Qualquer dúvida é só me perguntar que farei o possível para responder ^^
E não esqueçam de comentar se gostaram e/ou usaram o menu!!
Kissus~


5 comentários:

  1. Adorei o tuto estou fazendo o contato, e essas outras coisinhas para acompanhar. Obrigado =D

    ResponderExcluir
    Respostas
    1. Juh para fazer a página de inserir o link precisa ser em postagem? Obrigado *-*

      Excluir
  2. Magina Flor... E obrigada, tento fazer o melhor! ^^
    beijos!!

    ResponderExcluir