Tutorial - Menu Pixel

Image Spring In paris

Hello baby!

A saga continua...quer dizer o frio continua..Eu estou adorando(mentira) está sendo bom em um lado por que eu não estou indo para escola haha' e outro lado ruim é que é horrível tomar banho no frio, ainda por cima se o seu chuveiro estiver quase queimando 

Não tô aqui para falar do meu frio né rsrs Sei que vieram para aprender a fazer o menu que é esse fofinho aqui:

Lindo né? * Bora pro tutorial?

 

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.

Kisses...