Tutorial - Menu Giratório no Blogger

Hi dear! Vamos a mais um tutorial super legal! O tutorial do menu giratório que trago hoje foi originalmente postado no Blog Kawaii World, todos os créditos a ele.

O primeiro é a visualização normal do menu e o segundo ao passar o mouse.

O efeito se torna interessante, pois a transição não é direta, ou seja, o menu gira antes de passar para a outra forma.

Vamos ao tutorial:

1° passo: Acesse o painel do Blogger, escolha o blog que você deseja instalar, selecione a opção "Modelo" e clique em "Editar HTML".

2°passo: Agora usando o Ctrl F, procure por: ]]></b:skin> e ACIMA dele código, cole:

#menu {background: #ffa1be; color: #ffffff; font: normal 20px Capriola; text-shadow:0 1px #ccc; width: 70px; height: 50px; display: inline-block; padding: 25px 5px 5px 5px; margin: 5px; margin-right: 2px; border-radius: 100%; -webkit-border-radius: 100%; -moz-border-radius: 100%; text-align: center; -moz-box-shadow: inset 0 0 0px 8px #ea649a; -webkit-box-shadow: inset 0 0 0px 8px #ea649a; box-shadow: inset 0 0 0px 8px #ea649a; -moz-transition: all 0.4s ease-out; -webkit-transition: all 0.8s ease-out; -o-transition: all 0.8s ease-out; -ms-transition: all 0.8s ease-out; transition: all 0.8s ease-out;} #menu:hover {opacity: .80; -moz-box-shadow: inset 0 0 0px 38px #7dd3ef; -webkit-box-shadow: inset 0 0 0px 38px #7dd3ef; box-shadow: inset 0 0 0px 38px #7dd3ef; -webkit-transform: rotate(360deg) scale(1.1) skew(1deg) translate(0px);}

3°passo: Depois de personalizar como desejar, cole o seguinte código em um Gadget HTML/JavaScript:
<a href="SEULINK.COM"><div id="menu" onmouseover="this.innerHTML='NOMECOMMOUSE'"onmouseout="this.innerHTML='SEMMOUSE'">SEMMOUSE</div></a> <br /> 

EXPLICANDO: 

No lugar de seulink.com, cole a url que quiser.
Nome com mouse: Cole o que vai aparecer quando passarem o mouse na bolinha.
Sem mouse: é o que aparece normalmente.

É isso! :D

Share This :