Menu Graphic

Olá hoje traco mais um tuto super legal. Já faz um tempo que eu achei esse tuto,dai eu lembrei dele e resolvi postar aqui,eu achei ele no Cantinho Backgrounds o efeito é muito fofo.Então prontos? Então mãos a obra' :P

Esse menu tem um efeito, quando você passa o mouse, a parte rosa aumenta e a cinza diminui

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>

Depois é só salvar.

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;