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 hoverPara usar o menu é só colocar em um HTML/JavaScript os códigos a seguir:
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
<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!!!
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
ResponderExcluirQue 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
ExcluirAmei o menu, quem sabe uso no meu próximo layout!
ResponderExcluirUm beijão amore *u*
be-a-princess-official.blogs...
Que bom que "amou" rsrs. Bjs
Excluir