Menu cute

Yo , estou aqui mais uma vez só que desta vez com um Menu Cute em Hover , vocês ainda iram ver muitos tutoriais meus com efeitos hover desde hover em imagens , ate menus .

Vá em Modelo>Editar html>Ctrl+F>procure por ]]>< se preferir pesquise por ]] , em cima deste código cole

@font-face {

font-family: 'Pixelade';

src: url('http://static.tumblr.com/ig73lmp/FNdmcixx3/pixelade.ttf');

}

novamente em cima de ]]>< cole este outro 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*/

}

Edite as cores ( o que esta em negrito ) e depois salve . e também se precisar editar o tamanho de algo edite mais tenha consciência do que esta fazendo .

Vá em Layout>Adicionar um Gadget > html/javascript > 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>

é só alterar o que esta em negrito e olhar o resultado . Se o menu não funcionar faça tudo de novo só que desta vez com mais calma , realmente mexer com html não é nada fácil .

Espero que tenham gostado :3  ( obs ::.. Os créditos estão no Menu )