Páginas

Blog de teste // Valle Mustaqet

30/11/2012

Menu Shadown

Estava preparando um big tutorial de como criar um layout básico, mas o blogger excluíu a postagem. Então, estou refazendo. Sorry para a Nathália-chan, que me pediu esse tutorial faz alguns dias :X

Hoooy~
Arranjei um tempinho para postar aqui, mas vou logo avisando: Amanhã é a entrega dos meus boletins, e, se eu ficar de recuperação, eu vou tentar focar-me principalmente aos estudos, então, talvez o VM fique um pouco desatualizado (sorry). Agora, se eu passar... eu vejo o que vou fazer!

Vim aqui trazer para vocês um menu bem lindo, na minha opinião. Acho que fica legal com designs modernos. Ele é um menu normal que, quando passa o mouse, a sombra aparece e meio que "explode". Vocês podem ver a preview clicando aqui. E, créditos ao Tumblr Mutable HTML.


1. Primeiro, vá em "Editar HTML", e procure por ']]></b:skin>'. Abaixo disso cole:
mh {color: #eeeeee; font-family: 'verdana'; font-size: 10px; background: #fff; padding: 20px; display: inline-block; -webkit-transition-duration: .80s; -o-transition-duration: .80s; -moz-transition-duration: .80s; -ms-transition-duration: .80s; cursor: size; border: 0px solid #000; box-shadow: inset 0 0 75px 75px #000, 0 0 0 #000;}
mh:hover {box-shadow:inset 0 0 35px 35px transparent, 0 0 75px 50px transparent;} 
 O código em si não é difícil de personalizar. Onde está em Negrito, é a cor da fonte, onde está em Itálico, é a cor do fundo no hover (depois da sombra sumir), e onde está Sublinhado, é a cor da sombra e do plano de fundo do menu quando o mesmo está normal. Lembre-se de colocar a mesma cor nos dois códigos em sublinhado. E não precisa mudar nada no hover, e também não aconselho você a mudar, a não ser que tenha um conhecimento básico de HTML.

2. Depois, adicione um novo Gadget (HTML/JavaScript) e cole esse código:
<a href="LINK"><mh>NOME</mh></a>
<a href="LINK"><mh>NOME</mh></a>
<a href="LINK"><mh>NOME</mh></a>
<a href="LINK"><mh>NOME</mh></a>

Fácil não?! Ah gente, eu não irei fazer um layout de Natal, até porque faz pouco tempo que fiz esse lay atual do blog, e, eu ainda estou babando nele hehe'

11 comentários:

  1. Nossa como seu blog é lindoooo amei o seu tbm espero que consiga muitos seguidores, amei demais *o*, obrigada por seguir e comentar amore..
    beijus de amora
    http://garotanomundohtml.blogspot.com.br/

    ResponderExcluir
  2. Ah! Arigato pelo tutorial! Você é mesmo uma ótima blogueira, viu? Parabéns e continue sempre assim. <3
    Kissus e jaa nee ~~

    ResponderExcluir
  3. Que liiiiiiiiiindo o menu *-*

    release-ur-imagination

    ResponderExcluir
  4. Que lindo esse menu, peeeerfeito *-*

    Quem sabe em algum próximo layout ~de ano novo provavelmente,combina bastante *-*~ eu use!Com créditos, claro flor!
    somos-amendo-bobos.blogspot.com

    ResponderExcluir
  5. Este comentário foi removido pelo autor.

    ResponderExcluir
  6. Oie linda já adicionei você em meus afiliados. Se precisar de algo pode contar comigo ^^
    Beijos

    ResponderExcluir