Tutorial: Menu Out

créditos: Sweet Magia

Hooy! Gostaram do blog? Então eu subir a sidebar, tirei o slide e coloquei um novo cabeçalho! Hoje eu vim ensinar um tutorial faz tanto tempo que eu não post um tutorial, eu vim ensinar aos meus miguxos a fazer o menu out, que eu aprendi no meu querido e fofo afiliado: Sweet Magia! Aqui está um exemplo do menu.

http://lovingl-y.tumblr.com/menuout

Clique em: Read more. Para ver o resto do post!

Vá no seu modelo --> Editar Html --> Prosseguir --> Apert Ctrl + F ( Ou F3 ) no campo digite:

 ]]><b:skin ]

Acima dessa tag cole esse código:

Mude somente o que está em itálico!

menu {width: 100px; font-size: 15px;  font-family:'Stars From Our Eyes'; color: #fff;float:left;  letter-spacing:1px; text-align:center; margin:2px;-webkit-transition:All 1s ease;-moz-transition:All 1s ease;-o-transition:All 1s ease;-webkit-transform: rotate(0deg) scale(0.828) skew(1deg) translate(0px);-moz-transform: rotate(0deg) scale(0.828) skew(1deg) translate(0px);-o-transform: rotate(0deg) scale(0.828) skew(1deg) translate(0px); }.menu:hover {-webkit-transform: rotate(0deg) scale(1.02) skew(1deg) translate(0px);-moz-transform: rotate(0deg) scale(1.02) skew(1deg) translate(0px);-o-transform: rotate(0deg) scale(1.02) skew(1deg) translate(0px);}/** Fonte personalizada **/

@font-face {font-family: 'Stars From Our Eyes';src: url('http://static.tumblr.com/mmrynko/17Dm6e4ef/starsfromoureyes.ttf') format('truetype'); font-weight: normal; font-style: normal;} 

ENTENDA

 Width equivale a largura do menu.

Font-size ao tamanho da fonte do menu.Font-family é a fonte do menu. Se você não quiser essa, mude e apague de /**Fonte Personalizada **/ até o final.Color é a cor do menu.Float: left é o alinhamento, no caso está a esquerda. Pode por Rigth tamb

Agora é só adicionar um gadget HTML/Java Script  e colar:

<a href="link" class="menu"> <div style="COLOR: #fff;">Home</div></a>

 Um beijão da Myrian!

XOXO ♥