Menu Up & Down

Olá cookies.Tudo bem?Espero que sim 'w'
Então,eu não vou enrolar,vou logo para o assunto do post.
Hoje o post é um tutorial de como fazer esse menu super kawaii ~pelo menos eu acho :3 ~
Claro,créditos ao blog Eu Amo HTML
Não deu para colocar live preview,porque aí eu teria que criar um blog de teste,editar o HTML de viagem,só para colocar o menu ali.Ia demorar muito,porque essa postagem era pra ser feita no dia 23,mas tudo bem...Então,tem uma foto aqui,com o efeito quando passamos o mouse emcima,e sem passar o mouse.

Só fiz isso mesmo,porque já são uma e quarenta da manhã,e minha mãe está ouvindo Magic do Coldplay '-' Tipo,não tem nada a ver com o assunto,mas é estranho.Huehehe.Bom,melhor Magic,música boa,de madrugada,do que Lepo Lepo.Nada contra quem gosta,mas ouvir isso de madrugada,no mínimo,dá vontade de esfregar a cara da pessoa no asfalto do Texas :3

Okay,quer aprender a como fazer esse menu?Continue lendo ....

Você vai clicar em ''Layout'' e depois em editar HTML.Acima de ]]></b:skin> cole:

font-family: trebuchet ms;

font-size: 11px;

padding: 5px;

background-color: #COR DO FUNDO (ROSA);

box-shadow: inset 0 0 20px #COR DA SOMBRA INTERNA (ROSA), 0 0 4px #ccc;

text-align: center;

width: TAMANHO DO MENUpx;

text-transform: uppercase;

word-spacing: 5px;

letter-spacing: 1px;

-webkit-transition-duration: .80s;}

.fade-isa a {

color: #COR DA FONTE;

text-align: center;

padding-top: 20px;

padding-bottom: 20px;

padding-left: 5px;

padding-right: 6px;

text-shadow: 2px 1px 1px #COR DA SOMBRA DO TEXTO;

-webkit-transition-duration: .80s;}

.fade-isa a:hover {

color: #COR DA FONTE AO PASSAR O MOUSE;

text-shadow: 2px 1px 1px #COR DA SOMBRA AO PASSAR MOUSE;

text-align: center;

padding-top: 5px;

padding-bottom:5px;

padding-left: 5px;

padding-right: 6px;

background-color: #COR DO QUADRADINHO (AZUL);

box-shadow: inset 0 0 20px #COR DA SOMBRA DO QUADRADINHO (AZUL), 0 0 4px #ccc;

-webkit-transition-duration: .80s;}

.fade-isa {

Lembre-se de configurar as modificações em maiúsculo e depois cole em um HTML/JavaScript:

<div class="fade-isa">

<a href="LINK" title="Mensagem do Tooltip">Nome</a>

<a href="LINK" title="Mensagem do Tooltip">Nome</a>

<a href="LINK" title="Mensagem do Tooltip">Nome</a>

<a href="LINK" title="Mensagem do Tooltip">Nome</a>

<a href="LINK" title="Mensagem do Tooltip">Nome</a>

<a href="LINK" title="Mensagem do Tooltip">Nome</a>

<a href="LINK" title="Mensagem do Tooltip">Nome</a></div>

-Essa ''mensagem de tooltip'' é o que você quer que apareça escrito naquela caixinha amarela.Ou seja,é aonde irá ficar a mensagem de tooltip.Mas,se você não quiser tooltip,apague:
Title=''Mensagem do Tooltip''

Relembrando,quem fez esse menu foi esse blog ^-^
É isso por hoje,beijo de chocolate branco.Até o próximo post.
XOXO  ♥