06/01/2013

Menu Hover Solid

Hoy meus amores, como vão? eu estou super bem.
Muitos concordaram com o novo nome do blog ser Sweet Explosion, mas outros me disseram que já existe bastante nomes com 'Sweet' pois é, é verdade mas sabe quando agente se apega á aquele nome, e não quer mais largar? pois é, é meu caso me apaixonei por esse nome, achei super lindo, fiquei feliz por muitos terem gostado e eu já dessidi vai ser esse o novo nome do blog, as mudanças e as novas regras e tudo mais acontecerá assim que o lay ficar pronto.
Hoje estou aqui mais uma vez para postar mais um tutorial, hahaha, é que eu quero deixar os utilitários que eu fiz para postar quando as mudanças daqui do blog já estiverem feitas me entendem? (Sou boba demais)
Mas dessa vez não é efeito, é um Menu....

O menu na minha opnião é super lindo, se chama: Menu Hover Solid, veja a preview aqui
Achei o tutorial no Kawaii World.

Vá no seu HTML, dê um CTRL+F ou F3  e procure por ]]></b:skin>. Acima da tag, cole:
 .menub{
background:#COR; /* cor de fundo */

font-family: Tahoma; /* fonte */
 width: 60%;  /* largura */
float: right;
padding: 2px;
text-align: center;
margin: 1px;
border-radius: 0px;
font-size: 8pt; /* tamanho da fonte */
color: #COR; /* cor da fonte */
-webkit-transition-duration: .90s;
-moz-transition-duration: .90s;
transition-duration: .90s;
}
.menub:hover {~
font-family: Tahoma; /* fonte ao passar o mouse */
width:60%; /* largura ao passar o mouse */
float: right;
background:#COR; /* cor de fundo ao passar o mouse */
padding: 2px;
text-align: center;
margin: 1px;
border-radius: 0px;
font-size: 8pt; /* tamanho da fonte ao passar o mouse */
color: #COR; /* cor da fonte ao passar o mouse */
padding-left:0px;
box-shadow:7px 8px 16px #000 inset, -3px -8px 44px #000 inset; /* sombra interna, altere o que está em negrito */
-moz-box-shadow:7px 8px 16px #000 inset, -3px -8px 44px #000 inset; /* sombra interna, altere o que está em negrito */
-webkit-box-shadow:7px 8px 16px #fff inset, -3px -8px 4px #ebebeb inset;/* sombra interna, altere o que está em negrito */
border-bottom:2px solid#eee; /* borda de baixo ao passar o mouse */
}
Edite o que se pede(No código tem a explicação) e vá em layout, adicionar um gadget HTML/Java Script e cole:
<div class="menub"><a href="link">Título</a></div>
<div class="menub"><a href="link">Título</a></div>
<div class="menub"><a href="link">Título</a></div>
<div class="menub"><a href="link">Título</a></div>
Visualize se estiver tudo certo salve, P.S: Já testei e deu certinho.
Beijos

20 comentários:

  1. Acho legal o nome Sweet Explosion :)
    o menu é .... Perfeito eu amei até salvei essa postagem nos meus favoritos rs' maie o menu
    Bjs
    Diário Capricho

    ResponderExcluir
  2. adorei esse menu
    bjs
    Once Upon a Time (no perfil)

    ResponderExcluir
  3. Lindo menu, esse tutorial foi ótimo.. estou escolhendo quais tutorias vou usar em um layout do blog da minha mamai, rs! Beijos
    PimentaCupcake

    ResponderExcluir
  4. Que lindo, adorei o tutorial! *-*

    Zombie WOrld ~> PERFIL

    ResponderExcluir
  5. Essa nome é lindo, eu gostei bastante ^^
    amei o tutorial !
    worldsweett.blogspot.com.br
    Visita? ~beijos

    ResponderExcluir
  6. Nome Lindo! ah e o menu lindo tbm! Amor, obrigado pelos os Elogios pelo meu blog! ah, eu uso conta diferente não sei porque! KK. mas 1 é para postar e Outro para Seguir! e Mais 1 Perguntinha, Aceita afiliação? Beijos.
    Goten Akai

    ResponderExcluir
  7. amei é lindo !
    http://docinhodechocollate.blogspot.com.br/ <~visita?

    ResponderExcluir
  8. Adorei o menu, super lindooo
    Otimo tutorial
    bjinhos
    http://chuvadesonhooficial.blogspot.com.br/

    ResponderExcluir
  9. Eu já conhecia, acho super lindooooo!

    Explodindo Glitter

    ResponderExcluir
  10. Realmente o menu é muito fofinho e da um toque bem especial ao blog que usar.

    Doce Futuro

    ResponderExcluir
  11. saudades de ti dé *----*
    Eu adoro esse menu sério, curti o tutorial! hahha

    beijoos lindaaa!
    BlahOestraich

    ResponderExcluir
  12. Ameii !
    bjs segue meu blog:
    meucupcakedeuvaa.blogspot.com

    ResponderExcluir
  13. Ameii !
    bjs segue meu blog:
    meucupcakedeuvaa.blogspot.com

    ResponderExcluir
  14. ótimo tutu, o menu é lindo <3 Eu gostei do novo nome do blog, é bem legal :)

    http://alittlemorethangloss.blogspot.com.br/

    beijooos <3

    ResponderExcluir
  15. Aiin o menu é tão liindo, Debby ^^

    Olha, para ser sincera, eu não gostei do nome ;/ Acho que Sweet é muito comum, mas tudo bem é você que decide ;)

    (euamohtml.blogspot.com)

    Beijos

    ResponderExcluir
  16. Adorei o Tuto, o resultado é mesmo muito fofo né ?? Adorei ;3

    xoxo♥

    Crazy Girl || Clique no meu Perfil para Visitar ~

    ResponderExcluir
  17. O tuto é muito bom Debby!Só uma coisinha,tu escreveu dessidir,e é decidir ;D ok?Beijos linda,e se este é o nome que quer,tudo bem,coloca ele!
    The fluffy land

    ResponderExcluir
  18. Adorei o tutorial, o resultado é bem fofo!
    beijos
    blog-cereja.blogspot.com

    ResponderExcluir
  19. adorei,vou tentar fazer no meu :33 teu blog é um charme!

    ResponderExcluir