Menu Graphic

Oi amoras , tudo bem ? Bem , vim trazer um tutorial mega legal para vocês não achei no google achei no Cantinho Backgrounds , graças né?  [ rsrs ] Bom , não é difícil é bem fácil e pratico , então para quem não sabe o que é , é isso aqui 

Nesse menu consegui incluir um efeito que, quando você passa o mouse, a parte rosa aumenta e a cinza diminui, e vou ensinar, claro. Então clique em Leia Mais =)

      1. Para iniciarmos, vá em Modelo :: Editar HTML :: Procure por ]]></b:skin>
      
      2. ACIMA do código encontrado, cole ESSE código (não se assuste com o tamanho, é fácil de personalizar)
    
      3. Após personalizar o seu menu, cole o código abaixo onde queira usar o Menu =)

<div class="menugraphic">
<a href="URL_DO_LINK">NOME_DO_LINK</a></div>

     E para colocar mais de um link, repita o código quantas vezes quiser, no caso, ficaria assim:

<div class="menugraphic">
<a href="URL_DO_LINK">NOME_DO_LINK</a></div>
<div class="menugraphic">
<a href="URL_DO_LINK">NOME_DO_LINK</a></div>
<div class="menugraphic">
<a href="URL_DO_LINK">NOME_DO_LINK</a></div>
<div class="menugraphic">
<a href="URL_DO_LINK">NOME_DO_LINK</a></div>

      4. Salve =)

UPDATE: Para ter o efeito que eu disse no início do post (quando você passa o mouse, a parte rosa aumenta e a cinza diminui). No Código, aonde está escrito width na Primeira parte, você coloca um número que adeque ao seu layout. E aonde aparecer width pela 2° vez, você põe 10 números á menos...Por exemplo:

1) width= 250px;

2) width= 240px;

Saco? Então é isso, espero que esse tutorial tenha sido útil =) Beijos