Tutorial - Menu door

Olá meus lindos leitores (ღ˘⌣˘ღ)

Tudo bem com vocês? Finalmente o domínio foi registrado e instalado, agora podemos comemorar, cantar a música da globeleza e ser feliz -n. Gente desculpem pelas idiotices, mas é que eu fiquei tão feliz por causa do domínio, eu estou esperando ele desde sexta, vocês nem imaginam minha felicidade por isso, eu queria esse domínio há muito tempo mesmo. Eu escrevi essa postagem antes do domínio chegar, então ela era programada pra muito depois de hoje.

Enfim, pra comemorar o novo layout e o novo domínio eu vou postar de pouquinho em pouquinho todos os tutoriais do meu blog de live preview, sempre revesando entre tutorial, utilitário e postagem variada, assim o blog vai ficar bem menos cansativo e mais completo do que nunca. Quem quiser ver a preview do menu, ela está aqui (www), no gadget menu door. Vamos ao tutorial!

1. Vá em editar HTML, clique no seu html e dê ctrl+f. Procure por ]]></b:skin>, quando achar cole o seguinte código acima dessa tag.

.menudoor {
width: 69px;
background: #e7d7b5;
font-family: 'Arma Five';
font-size: 8px;
color: #bc9a51;
text-shadow: 1px 1px 1px #f3e7cd;
padding: 2px;
float: center;
display: inline-block;
margin: 1px;
border: 1px solid #d6b97c;
box-shadow: 2px 2px 0px #f3f3f3, inset 0px 0px 1px #fff;
-webkit-transition: all 0.50s ease;}
.menudoor:hover {
width: 69px;
background: #e7d7b5;
font-family: 'Arma Five';
font-size: 8px;
letter-spacing: 1px;
color: #fff;
text-shadow: 1px 1px 1px #dbc89f;
padding: 2px;
float: center;
display: inline-block;
margin: 1px;
border: 1px solid #d6b97c;
box-shadow: 0px 0px 1px #f3f3f3, inset 100px 0px 0px #dfc99b;
-webkit-transition: all 0.50s ease;}

Mude tudo de acordo com sua preferência, os códigos em destaque você modifica trocando pelas cores que desejar.

2. Para usar, crie um gadget de HTML/Javascript, e cole o seguinte código: 

<a href="http://www.blogger.com/LINK"><div class="menudoor">Tutorias</div></a>
<a href="http://www.blogger.com/LINK"><div class="menudoor">Icons</div></a>
<a href="http://www.blogger.com/LINK"><div class="menudoor">Ilustrações</div></a>
<a href="http://www.blogger.com/LINK"><div class="menudoor">Paletas</div></a>
<a href="http://www.blogger.com/LINK"><div class="menudoor">Photoshop</div></a>
<a href="http://www.blogger.com/LINK"><div class="menudoor">Breve</div></a>

Espero que tenham gostado do menu, se usarem creditem, e só modifiquem outras coisas se souberem o que estão fazendo. Bom, se você tiver qualquer dúvida sobre esse ou outro tutorial, consulte nossa ask.