 |
| heey ^^ Oi Candies,como vai a madrugada de vocês ? rs' Pois é, são 01:00 da manhã e eu estou acordadinha da silva u_u Passei a tarde com meu namorado como de costume, então não tive como postar nada antes :// Maaaas, mesmo sem um horário melhor pra postar preparei o post de vocês o// Será um tuto de como fazer um menuzinho pixel. Créditos ao Kawaii world. O menu é este: |
1.Vá no seu HTML e procure por ]]></b:skin> e antes da tag cole o código abaixo:
ul.menu01{margin:0;padding:0;list-style-type:none;display:block;font-family:"04b03", small fonts; font-size: 8px;line-height:100%;width:210px;padding-top: 2px;}ul.menu01 li{margin:0;padding:0;border-top:1px solid #bee1f0;border-bottom:1px solid #d3eef5;}ul.menu01 li a{display:block;text-decoration:none;color:#66c4e3;background:#c8e6f0;padding:0 0 0 0px;width:210px;}ul.menu01 li a:hover{background:#e7e2e4;}ul.menu01 li a.current,ul.menu01 li a.current:hover{background:#eff0f2;}/* FONTE PIXEL */@font-face {font-family: "04b03";src: url('http://static.tumblr.com/p0nqcte/56im0rvo6/04b_03__.ttf'); format("truetype"); }
2. Agora cole o código abaixo em um HTML/JavaScript:
<ul class="menu01"> <li><a href="LINK">NOME DO LINK</a></li> <li><a href="LINK">NOME DO LINK</a></li><li><a href="LINK">NOME DO LINK</a></li> <li><a href="LINK">NOME DO LINK</a></li> </ul>
Agora é só substituir como se pede. Mas caso queira modificar alguma coisa no código:
width:210px; - para centralizar ou aumentar o fundo do menu
#c8e6f0 - Cor do fundo
#bee1f0 - Cor da borda no topo
#d3eef5 - Cor da borda de baixo
Vá modificando até ficar do jeito que quer,aconselho o uso da tabela de cores. Espero que tenham gostado do tuto, simples & fácil néh ;
0 comentários: