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... 

13 comentários

  1. Topa afiliação ? se sim, avise nos comentários do blog http://a-thousandyers.blogspot.com.br/

    ResponderExcluir
  2. Adorei o menu ^-^ como você disse, muito fofinho! Iria usar se já não tivesse terminado o meu layout :( Kisses
    pandalland.blogspot.com

    ResponderExcluir
    Respostas
    1. Obrigada :) Até eu queria usar mas já está pronto também rsrs' Usa da próxima rsrs'
      Beijos, ah e obrigada pela visita :D

      Excluir
  3. ADOREi O TUTORIAL <3 ADOREI MESMO XD
    Passa lá no meu blog? Irei voltar aqui u.u

    Naka-chan no Sekai

    ResponderExcluir
  4. Esse menu é super cute, adoro ele <333 super útil o tuto Bella ~

    Beijos, Spring in Paris

    ResponderExcluir
  5. Que fofo seu blog! amei o tutorial também :) e já estou seguindo! se puder retribuir, eu agradeço :) http://cherrylandforever.blogspot.com.br/

    ResponderExcluir
  6. Oi,tem vaga pra postadora ai no blog?
    Eu adoraria postar no blog e sou muito dedicada

    ResponderExcluir
  7. Oi,tem vaga para blogueira ai no blog?
    Se tive eu adoraria postar no blog

    ResponderExcluir
  8. Esse menu fica muito lindo, já usei em um layout de um blog passado, mas é sempre om relembrar *--* Parabéns pelo blog, ele é maravilhoso, estou seguindo :3

    ~Bye
    Explosionofparadise.blogspot.com

    ResponderExcluir

ATENÇÃO! Eu sei que você viu essa postagem! TT^TT
Saindo sem deixar um recadinho? Ah eu queria ler tanto o que você ia escrever =/ Por favor não se mande sem deixar um recadinho viu? Eu vou ler e responder com muito carinho, deixe o link de seu blog para mim visitar também. Obrigada.
Link: coloque aqui o nome do link