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.

18 comentários:

  1. O Novo Layout ficou lindo e o domínio também <33 Sei como é essa felicidade de quando compramos o domínio -q Eu não ficava quieta ASHAHS'
    O Menu é tão fofo :33 achei ele lindo mesmo u.u

    Have-Things.Com!

    ResponderExcluir
  2. Adorei o menu, lindo. Adorei o novo layout e o domínio >3<

    www.whatnae.com ∴

    ResponderExcluir
  3. Já te falei o quanto estou apaixonada por este layout? Sim? Pois digo novamente: que perfeição ç3ç

    O menu é lindo, adorei! Bem diferente, adorei esse estilo de efeito ♥ E o domínio ficou perfeito!

    Um grande beijo,

    Juu-Chan || Nescau com Nutella

    ResponderExcluir
  4. Ai meu Deus que Menu Divo gente :33 !!
    me ensina a fazer essas coisas please kk'
    Bjs,loveforhtml.blogspot.com.br (Visita?)

    ResponderExcluir
  5. É um efeito simples mais muito bonito :3 adorei!

    living-kpop.blogspot.com

    ResponderExcluir
  6. Que lindo menu >3< Não se ache ok? O meu também tem domínio desde hoje -q Ok, me deixe ç-ç
    Lost Dreamer ~

    ResponderExcluir
  7. Tô louca num domínio, mas nem sei como funciona! D;
    http://loquazifani.blogspot.com.br/

    ResponderExcluir
  8. Awnt, que menu mais fofo :3 eu adorei!
    Estou babando por todos os efeitos no blog de testes HAUSHUAHS' quando vai postar os outros? Espero que logo ^-^' Kisses ~

    Milky Way ~ em reforma!

    ResponderExcluir

Regras:
• Os comentários são moderados.
• Não xingue nada nem ninguém.
• Comentários como: "Seguindo, segue de volta ?" serão deletados.
• Se for fazer uma crítica faça com educação e bom senso.
• Pedidos feitos por comentário não serão realizados, pedidos só na ask.
• Obrigado por comentar!