Tutorial - Menu LolliPop

Hello,Vim trazer hoje o menu LolliPop , ele é muito D-I-V-O e eu o usaria.

Se querem ter uma prévia olha aqui :

Imagem Capturada do blog KawaiiWorld

Vamos ver? Ele é bem complicado.

A primeira coisa a fazer, é explicar a vocês a estrutura deste menu. Faremos linha por linha (linha azul1, linha azul 2, linha rosa1, linha rosa2), por isso é preciso paciência.

1. Vá até Modelo > Editar HTML e procure por ]]></b:skin>, ao encontrar cole acima:

Clique aqui para ver o código.

O código é bem simples, acho que todos conseguem entender onde mudar as coisas. Caso tenha dúvidas, me procure. 

2. Vá até um gadget de HTML/JavaScript e cole:

<div id="lollipop">

<div class="color1"><a href="seulink.com">Nome do Link</a></div> <br />

</div>

Você verá sua 'linha' pronta. Para fazer a segunda de outra cor, você precisa fazer o tutorial por duas vezes. Troque o color1 por color2 e configure como quiser. Lembre-se de que irá precisar posicionar manualmente, o menu não fica um embaixo do outro. Para ficar, adicione nas outras vezes:

margin-top: 12px;

E configure até achar a posição desejada.

Créditos totais ao blog Kawaii World