Image Map

17.10.12

Menu Explosion



Oi! Hoje trouxe um tutorial bem legal pra vocês. Estava vendo uns tumblr's e em um dos que vi encontrei um menu que achei bem bonito, ele se chama Menu Explosion, adaptei os códigos que estavam no tumblr para o blogger. Enfim... Para ver que menu é esse clique aqui. Gostou? quer aprender como faz? Clique em leia mais.

Ta bom... vamos aprender a fazer esse menu. Antes de tudo, vai uma dica, como aquela explosão que dá no fundo é de cor branca, recomendo que coloque o menu em um gadget de cores escuras. Caso queira mudar apenas o gadget onde ele ficará recomendo que veja este tutorial do Cherry Bomb. Outra dica é usa-lo com tudo combinando em? não vai colocar um gadget super escuro com um blog todo com cores mais leves.

Depois de ter mudado o fundo do gadget, abra o seu HTML e pesquise por ]]></b:skin>

Após achar o código cole acima dele este outro código:


/** MENU EXPLOSION **/
.explosion {float: left; margin: 3px; background-color: #f2521d; color: #fff; border: 3px solid #fff; display: block; width: 52px; font: 10px calibri; text-transform: uppercase; text-align: center;text-decoration: none; padding: 4px; opacity:0.8; -webkit-transition: all 0.4s ease-out; -moz-transition: all 0.4s ease-out; transition: all 0.4s ease-out;}
.explosion:hover {background-color: #fff; color: #f2521d; border: 3px solid #f2521d; opacity: 0.9; text-shadow: -2px  0px  #fff, 2px 0px #eeeeee; opacity: 0.8; -webkit-box-shadow: inset 0 0 50px 5px #fff, 0 0 50px 5px #fff; -webkit-transition: all .5s ease-out; -moz-transition: all .5s ease-out; transition: all .5s ease-out;}

Entendendo os códigos 
Códigos normal:

1º código: background-color: #f2521d ---> Este código é o fundo no menu normal
2º código:   color: #fff  ---> Este código é a cor da fonte normal
3º código:   border: 3px solid #fff ---> É a cor da borda, o tipo de borda e sua largura
-----------------------------------------------------------------------------------------------
Códigos em hover:

1º  código: background-color: #fff ---> Este código é o fundo no menu em hover
2º código: color: #f2521d  ---> Este código é a cor da fonte em hover
3º código: border: 3px solid #f2521d ---> É a cor da borda, o tipo de borda e sua largura em hover
Para usar o menu é só colocar em um HTML/JavaScript os códigos a seguir:

<a href="LINK" class="explosion">Nome</a>
<a href="LINK" class="explosion">Nome</a>
<a href="LINK" class="explosion">Nome</a>
<a href="LINK" class="explosion">Nome</a>
<a href="LINK" class="explosion">Nome</a>

Espero que tenham gostado do tutorial! Caso for repassar dê os devidos créditos ao Goods Sweets e a este blog aqui .
Bjs!!!

4 comentários:

  1. Amei o menu! flor aceito sim a afiliação já te coloquei na minha mim coloque na sua afiliação ok!www.princesasdorocker12.blogspot.com.br

    ResponderExcluir
    Respostas
    1. Que bom que gostou! Obrigada por aceitar a filiação! Já vou te colocar nos afiliados aqui do blog e fazer um post sobre o blog! Eu não estou conseguindo seguir o blog, sempre que clico pra seguir aparece "Not fund" :s assim que resolver esse problema sigo! Entrei no seu blog e não apareceu o meu nos afiliados :s mas depois você resolve isso! Beijooos

      Excluir
  2. Amei o menu, quem sabe uso no meu próximo layout!
    Um beijão amore *u*
    be-a-princess-official.blogs...

    ResponderExcluir