Tutorial - Menu Zoom

Oi meus amores,aqui é a Laura :3
A Jubs do EA pediu um tuto para o menu do blog,o menu zoom.


Para aprender,clique em leia mais :3
Nível de Dificuldade: Médio


1- Vá até Modelo -> Editar HTML e procure por:

]]></b:skin>

 2- Acima,cole:

/*---Início do Menu Zoom by My Fantasy---*/
menumf {
font-family: century gothic; /* Fonte do Menu */
width: 17%; /* Tamanho do Menu */
float: left;
background:#FF82AB; /* Cor do fundo do Menu */
padding: 5px;
text-align: center;
margin: 2px;
-webkit-border-radius: 0px 0px 0px 0px; /* Pontinhas da Borda */
-webkit-transition-duration: .80s; /* Duração do Efeito - não modifique se quiser o efeito igual ao meu */
font-size: 08pt; /* Tamanho da fonte */
color: #fff; /* Cor da fonte */
}
menumf:hover {
font-family: century gothic; /* Fonte do Menu */
-webkit-transform: scale(1.8) rotate(-10deg); -moz-transform: scale(1.8) rotate(-10deg);
-o-transform: scale(1.8) rotate(-10deg); -ms-transform: scale(1.8) rotate(-10deg); transform: scale(1.8) rotate(-10deg);
font-family: tahoma; /* Fonte do Menu quando passa o mouse */
width: 17%; /* Tamanho do Menu quando passa o mouse */
float: left;
background:#9C9C9C; /* Cor do fundo do Menu quando passa o mouse */
padding: 5px;
text-align: center;
margin: 2px;
-webkit-border-radius: 9px 9px 9px 9px; /* Pontinhas da Borda */
-webkit-transition-duration: .80s; /* Duração do Efeito - não modifique se quiser o efeito igual ao meu */
font-size: 08pt; /* Tamanho da fonte do Menu quando passa o mouse */
color: #fff; /* Cor da fonte do Menu quando passa o mouse */
}
/*---Fim do Menu com Zoom by My Fantasy---*/

3- Faça suas modificações.

4- Vá até Layout -> Adicionar um Gaget -> HTML/Javascript e cole:

<a href="linkaqui"><menumf>títuloaqui</menumf></a>

 5- Salve e está pronto :3

É lindo esse menu né gente?!
Todos os créditos vão para o My Fantasy,aprendi esse tuto.
Beijos e até a próxima :3

13 bombons de chocolatii comentaram :3:

  1. olha só nao ocnhecia esse tutorial nao ^^

    ResponderExcluir
  2. Fica super lindo *-* Adorei o tutorial!
    Beijo
    Candy Girl

    ResponderExcluir
  3. ooi flor, quer ser parceira do meu blog ? visite
    novajuventudexxi.blogspot.com.br

    ResponderExcluir
  4. Fica lindo, mas não sei se eu usaria, prefiro menus mais discretos.

    diamantesdeumagarota

    Desculpe a demora para responder o comentário.

    ResponderExcluir
  5. aeeeeeeeeeeeeeeee lindona! obrigada ^^
    encantosdeumaadolescente.blogspot.com

    ResponderExcluir
  6. Muito legal esse tuto! gostei a beça!
    cristalsemluxo.blogspot.com

    ResponderExcluir
  7. Gamei nesse menu!! hahaha
    Aah, tem uma Tag lá no blog pra você!
    Beijos, e espero que aceite ;3
    #Chilipiink*blogspot*com

    ResponderExcluir
  8. Não sabia esse, adorei *-*
    Segue meu blog se gostar?
    http://theworldoflena.blogspot.com.br/

    ResponderExcluir
  9. Girl, a hora que eu entrei no seu blog(tipo agora), eu vi o seu menu e falei, CADÊ O TUTORIAL DELE?? Daí, boom!! Apareceu, kkkkk...' Thanks pelo tuto, flower!!

    ResponderExcluir
  10. Você não vai mais postar?? Faz tempo que entro aqui e tha nessa mesma postagem!
    Coloquei seu blog como afiliado retribui e coloca o meu aqui!
    http://amantesdemoda.blogspot.com.br/
    Quem colocar meu blog como afiliado, eu sigo e retribui ok??
    http://amantesdemoda.blogspot.com.br/
    *----------*

    ResponderExcluir
  11. Eu vi em um tumbrl esse efeito de transição, não como menu, em blockquotes, mas dá no mesmo. Adorei o tutorial Laura :3

    http://world-cutest.blogspot.com.br

    ResponderExcluir