Tutorial - Menu Uops

Boa noite, povo.

Hoje passei o dia fazendo o novo layout do meu blog - acho que depois mostro como está ficando, assim vocês avaliam pra mim, q  -, além de ter participado dos joguinhos lá na page do KW, por isso não pude aparecer por aqui. Os pedidos do ask.fm estão cada vez maiores e fica complicado para nós realizarmos todos. Mesmo sabendo que muita gente está precisando de utilitários resolvi trazer um tutorial para aliviar um pouco essa onda de utilitários, espero que não fiquem com raiva de mim por isso.

Faz pouco tempo que encontrei um menu bem legal lá no tumblr Things to help you (créditos ♥), se não me engano já o vi lá no blog da Steph - que até já postou aqui -, o GDOS. Se você caprichar o resultado é bem agradável e original, pelo menos no meu posto de vista. Se você ainda não conhece o menu, pode ter um 'preview' dele aqui. Suponho que seja útil para algum de vocês. Lembrando que se tiverem alguma dúvida me procurem, vou fazer o máximo para poder ajudar.

1 - Cole o seguinte código acima de  ]]><b:skin:

.simplemenu {cursor: pointer; font-family: Georgia; position: absolute; width: 700px; margin-top: 28px; height: 62px; font-size: 16px; letter-spacing: 1px; overflow: hidden; font-style: italic; margin-left: 90px;}

 .simplemenu a {color: #ffcbcb; padding-left: 29px; padding-right: 11px;text-shadow: 0px -100px 1px #94d0cf; padding-top: 58px; -webkit-transition: all 0.8s ease; -moz-transition: all 0.8s ease;-o-transition: all 0.8s ease;}

.simplemenu a:hover {color: transparent; padding-left: 29px; padding-right: 11px; text-shadow: 0px 0px 0px #94d0cf; -webkit-transition: all 0.8s ease; -moz-transition: all 0.8s ease; -o-transition: all 0.8s ease;} 

2 - Para utilizar o menu adicione um gadget HTML/JavaScript e cole esse código: 

 <div class="simplemenu">

<a href="#">Home</a>

<a href="#">Ask</a>

<a href="#">Tutoriais</a>

<a href="#">Materiais</a>

<a href="#">Faq</a>

<a href="#">Themes</a>

<a onMouseover="this.style.background='#'" onMouseout="this.style.background='#'" onClick="document.getElementById('main').innerHTML=document.getElementById('leia').innerHTML" title=":)">IFRAME</a>

</div>

Pronto, acho que o código nem é tão grande assim. Acho legal colocar um background no fundo, igual ao do preview, acho que dessa forma chama mais atenção e dá um 'charme' a mais no layout do blog, haha. Novamente: Qualquer dúvida me procure que tentarei ajudar. Sou humilde, eu sei u_u /parei.