Lojinha Rosa Chiclete *-* + Menu Transition

Hello meus bombomzinhos *-* Hoje eu tenho uma novidade... hmmmm.. Adoogoo!!

Povo de meu ♥, tenho uma nova, que olha.... Tô amanado até agora! Gente, eu vou abrir uma lojinha virtual! uma extensão do RC, que arrasou! Gente, lá vai vender de tudo um pouco:

Makes, pincéis, decoração (tanto em MDF quando em 'prástico' memu u.u), eletroportáteis, aaai muthias cossas!!! ADOOOGO! ainda não tá pronto, tô trabalhando ainda um pouco no 'visúu' dele pra arrasar! espero muuuito vocês lá viiu?? a data de 'inauguração' ainda não está definida, mas espero que seja logo! as mercadorias estão prontinhas pra ser vendidas.. e outra: tô ficando mais chique ainda! vamos ter uma loja comercial, com um prateleiras, clientes (espero, rs) e tudo mais! vamos inaugurar também em um dia que eu não sei. kkk' mas tá tudo bem! O endereço, eu vou passar quando a loja virtual e a comercial estiverem com o visual I_M_P_E_C_A_V_E_L u.u kk' Então, vamos ao menú?

Gostou? ele desliza certeenho! mt fofo *-* c'mon?

1º vamos colocar no seu HTML antes de ]]></b:skin>:

#maquiagens {background: url('URL DA IMAGEM') no-repeat top center;

width: 120px; height: 80px; transition-duration: 0.5s; -webkit-transition-duration: 0.5s; -moz-transition-duration: 0.5s; ;  float:left;}

#maquiagens:hover {background: url('URL DA IMAGEM')no-repeat bottom center; 

width: 120px;  height: 80px;  transition-duration: 0.5s; -webkit-transition-duration: 0.5s; -moz-transition-duration: 0.5s;  float:left;}

no URL DA IMG , faça uma imagem como essa

Altere somente o que não esteja de preto.

Vermelho: o nome do menu que você quer. altere conforme seu menu

Azul: URL DA IMAGEM

Lilás: width: Largura. Deixe igual ao da imagem que você fez. Height: Se você quer um menu com a largura de 100px, faça uma imagem de 200px de largura,e assim vai.

Se você quiser um menu com mais opções, você deve fazer quantos códigos desses você quiser. LEMBRANDO: Cada código desses serve para apenas uma opção de menu. Se quiser 5 opções, faça cinco códigos com as mesmas medidas, mas com nomes diferentes.

2º Arrume os códigos, claro (:

3º Abra um novo Gadget com a opção HTML/JavaScript 

    Cole o seguinte código:

<div id="maquiagens">
<a href="http://lojinha-rosachiclete.blogspot.com/search/label/Maquiagens"><img src="http://i48.tinypic.com/2enrvb5.png" /></a></div>

O que está em AZUL é o URL de uma imagem transparente do tamanho do meu menu, que é 120x80, você pode deixar esta mesma imagem, mas se seu menu for maior, o link não vai pegar em baixo, se for menor, funciona '*'

O que está de vermelho, é o nome do seu menu, e de lilás é o link em que você quer que sua opção leve a pessoa que clicou (:

ESPERO QUE GOSTEM CHUCHUUUS!