Welcome + Menu Scare

Oiii queridos, me chamo Ash, e esse é meu primeiro post aqui no RY, então, nada mais justo do que começar trazendo um presente de boas vindas pra nós! Hoje eu trouxe o tutorial de menu Scare, que eu mesma fiz.

Live Preview

Gostou? Bora aprender?

Vá em Modelo > Editar HTML e procure por ]]></b:skin>

Quando encontrar, cole esse código ACIMA  do]]></b:skin>

/***MENU SCARE POR ASH (NÃO RETIRE OS CRÉDITOS)****/.scare { font-family: Arial; /** fonte **/ float: center; font-size: 10px; /** tamanho da fonte **/ line-height: 15px; /** altura do menu**/ text-align: center; /**alinhamento do texto**/ width: 50px; /**largura do menu**/ color: #000; /**cor do texto**/ background: #40E0D0; /**fundo do menu**/ box-shadow: inset 0 0 15px #20B2AA; padding: 2px; /**espaço entre o texto e as bordas**/ margin: 4px; /**espaço entre os links**/ transition:All 1s ease; -webkit-transition:All 0.3s ease; -moz-transition:All 1s ease; -o-transition:All 1s ease; transform: rotate(1deg) scale(1) skew(1deg) translate(0px); -webkit-transform: rotate(1deg) scale(1) skew(1deg) translate(0px); -moz-transform: rotate(1deg) scale(1) skew(1deg) translate(0px); -o-transform: rotate(1deg) scale(1) skew(1deg) translate(0px); -ms-transform: rotate(1deg) scale(1) skew(1deg) translate(0px); } .SCARE:hover { background: #B5B5B5; /**fundo do menu em hover**/ box-shadow: inset 0 0 15px #8B7B8B; transform: rotate(360deg) scale(1.5) skew(1deg) translate(0px); -webkit-transform: rotate(360deg) scale(1.5) skew(1deg) translate(00px); -moz-transform: rotate(360deg) scale(1.5) skew(1deg) translate(0px); -o-transform: rotate(360deg) scale(1.5) skew(1deg) translate(0px); -ms-transform: rotate(360deg) scale(1.5) skew(1deg) translate(0px); } /***FIM DO MENU SCARE POR ASH (NÃO REITRE OS CRÉDITOS)***/

Após isso, vá em Layout e adicione o gadget HTML/Java Script e cole:

<div class="scare"><a href="URL" title="✖MENU" >MENU</a></div>

Salve, e visualiza. Bom, espero que tenham gostado, e se usarem, creditem