sexta-feira, 27 de julho de 2012

Menu extras like

tumblr_m67qamwxdw1r3xz39o1_500_large_large

Oi minhas batatinhas rufles, como vão ? eis eu aqui, fazendo este post pela segunda vez, pois o Windows fez questão de travar, naquele momento me vieram 2 emoções raiva e tristeza, pois eu já tinha acabado o post. Mais fazer o que ? eu nunca postei um tutorial de um menu, além daquele Hover que era básico ? errado, pois eu vou postar um agora, HAHA.  Esse menu pode se usado para extras ou como principal mesmo.

Vá em Design Editar HTML e procure por ]]></b:skin>, acima dele cole o seguinte código: (E não se esqueça de fazer as devidas alterações)

/* Começo do menu MDM Extras Like */

menumdm{
color: #000000; (Cor do texto)
padding: 4px;
display:block;
border-bottom:1px solid #ffffff;
font-size:13px;
border-right:1px solid #000000; (Cor da borda da direita)
line-height:14px;
background:#000000; (Cor do fundo)
}
menumdm:hover{
color: #000000; (Cor do texto quando passa o mouse)
text-decoration: none;
-webkit-transition: color 0.7s ease-out;-moz-transition:
color 0.7s ease-out;transition: color 0.7s ease-out;
display:block;
border-bottom:1px solid #ffffff;
line-height:14px;
border-left:2px solid #000000; (Cor da borda da esquerda quando passa o mouse)
border-right:2px solid #000000; (Cor da borda da direita quando passa o mouse)
background: #fcdddd; (Cor do fundo quando passa o mouse)
}/* Fim do menu MDM Extras Like */

Visualize e se estiver tudo certo, salve.

Vá em Design e clique em Adicionar um Gadget e clique no HTML/JavaScript e cole o seguinte código: (E não se esqueça de fazer as devidas alterações)

<a href="Url da página 1"><menumdm>Nome da página 1</menumdm></a>
<a href="Url da página 2"><menumdm>Nome da página 2</menumdm></a>
<a href="Url da página 3"><menumdm>Nome da página 3</menumdm></a>
<a href="Url da página 4"><menumdm>Nome da página 4</menumdm></a>

Salve e veja se está tudo certo. Veja uma prèvia de como deve ficar:

Nome da página 1 Nome da página 2 Nome da página 3 Nome da página 4

Espero que tenham gostado.

Até o próximo post.

7 comentários:

  1. Ah não esquenta isso acontece, tenho certeza k da prox. vai ficar bem melhor do k o k vc perdeu, rsrs,amei seu blog, muito fofo e criativo,parabéns, bjs.

    www.girlsteensgn.blogspot.com.br

    entre, conheça e SIGAA, TE ESPERAMOS LA,BJS, retribuimos.

    ResponderExcluir
  2. Muito bom esse tutorial.O resultado ? Arraso total.

    Beijos! ♥
    http://caprichadasbr.blogspot.com.br/

    ResponderExcluir
  3. Amei o tuto
    Ei, eu te espero lá no MFF com uma linda visitinha. Deixe uma marquinha lá.
    Beijinhos da Nath
    Clica?--->MundoFantásticoFeminino

    ResponderExcluir
  4. Ah o efeito fica liindo *-*
    Amei o tutorial, parabéns ^^
    besos ♥

    plush-girl.blogspot.com

    ResponderExcluir
  5. Oi flor, adorei o seu blog e gostava muito de ser afiliada.
    Se aceitar, responda em meu blog para eu colocar vc.

    Bjs
    http://mar-de-glitter.blogspot.pt/

    ResponderExcluir
  6. Ficou lindo ! Bjinhos

    Participação especial de Katy Perry, Paramore, Selena Gomez, Rihanna e Demi Lovato só no Conectada! www.conectadablog.com

    ResponderExcluir