Tutorial - Menu Pixel

 

Yoo!

Sei que já notaram que ao expandir minha elite de afiliados vocês não encontram imagens, mas sim um menu pequeno e fofo com a lista de afiliados. Hoje vou ensiná-los a fazer exatamente este menu.

O menu é super útil para quem tem um blog no estilo cute/delicado ou para quem tem muitos afiliados e odeia um gadget com quilômetros de conteúdo. 

Espero que gostem ~ 

1. Procure por ]]></b:skin> e antes da tag, cole:

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. Use este código onde deseja adicionar seu menu (geralmente em um gadget de HTML/JavaScript):

<ul class="menu01">

 <li><a href="#">NOME DO LINK</a></li>

 <li><a href="#">NOME DO LINK</a></li>

<li><a href="#">NOME DO LINK</a></li>

 <li><a href="#">NOME DO LINK</a></li>

  </ul>

Prontinho!

- mini-guia

width:210px; - Se não ficar no centro ou você quiser aumentar o fundo, altere este número.

#bee1f0 - Cor da bordinha do topo.

#d3eef5 - Cor da bordinha de baixo.

#c8e6f0 - Fundo.