Menu BR ( + bônus )

Hoje à tarde a Luuh me pediu p/ ensinar como fazer o menu igual ao meu    (vocês viram a Lua que linda que esta?!)  se vocês também curtiram o menu tanto quanto eu e a Luuh façam bom proveito do tuto então Mini gif 49
(OMG! Começou o Kamen Rider Black Rx ♥-♥)

Vou mostrar exatamente o código usado aqui :)



Vá em Design  Editar HTML  Ctrl f e procure por: ]]></b:skin>

agora que achou é só colar acima o código:


/*-----Início do Menu Bad Reputation-----*/
kbr {
background:#eee; /* Cor de fundo do Menu */
width: 20%; /* Tamanho do Menu (Largura) */
text-align: center;
font-size: 8px; /* Tamanho da fonte */
color: #000; /* Cor da fonte */
letter-spacing:1px;  /* Espaço entre as letras */
padding: 4px;
margin: 2px;
float: left;
-moz-border-radius: 25px 10px / 10px 25px;
border-radius: 25px 10px / 10px 25px;
-webkit-transition-duration: .90s; /* Tempo do Efeito */
}
kbr:hover {
background:#000; /* Cor do fundo do Menu ao passar o mouse */
width: 20%; /* Tamanho do Menu ao passar o mouse */
text-align: center;
font-size: 8px; /* Tamanho da fonte ao  passar o mouse */
color: #fff; /* Cor da fonte ao passar o mouse */
letter-spacing:1px; /* Espaço entre as letras */
padding: 4px;
margin: 2px;
float: left;
-moz-border-radius: 10px 25px / 25px 10px;
border-radius: 10px 25px / 25px 10px;
-webkit-transition-duration: .90s; /* Tempo do Efeito */
}
/*-----Fim do Menu Bad Reputation-----*/
 Modificando as partes destacadas

 Tabela de Cores  aqui

 Para o menu funcionar adicione um Gadget  HTML/JavaScript e cole o seguinte:

<a href="URL"><kbr>Nome</kbr></a>
<a href="URL"><kbr>Nome</kbr></a>
<a href="URL"><kbr>Nome</kbr></a>
<a href="URL"><kbr>Nome</kbr></a>

Se quiser mudar a fonte do menu é só adicionar no código antes de fechar a chave:

font-family: arial; /*Nome da fonte que quiser*/

 E se quiserem fiz um menu bônus, veja a imagem:


 O código deste menu é:

/*-----Início do Menu Bad Reputation-----*/
kbr {
background: #ff0080; /* Cor do fundo do Menu  */
width: 20%;  /* Tamanho do Menu (largura) */
text-align: center;
font-size: 9px; /* Tamanho da fonte */
color: #fff; /* Cor da fonte */
letter-spacing:1px; /* espaço entre as letras*/
padding: 4px;
margin: 2px;
float: left;
-moz-border-radius: 30px 10px / 10px 30px;
border-radius: 30px 10px / 10px 30px;
-webkit-transition-duration: .90s; /* Duração do Efeito */
box-shadow: inset 0 0 3px #aaa, 0 0 5px #606060;  /* Cor da sombra */
}
kbr:hover {
background: #a203ff; /* Cor do fundo do Menu ao passar mouse */
width: 20%; /* Tamanho do Menu ao passar mouse */
text-align: center;
font-size: 9px; /* Tamanho da fonte ao passar mouse */
color: #fff; /* Cor da fonte ao passar mouse */
letter-spacing:1px;
padding: 4px;
margin: 2px;
float: left;
-moz-border-radius: 10px 30px / 30px 10px;
border-radius: 10px 30px / 30px 10px;
-webkit-transition-duration: .90s; /* Duração do Efeito */
box-shadow: inset 0 0 3px #aaa, 0 0 5px #606060; /* Cor da Sombra */
}
/*-----Fim do Menu Bad Reputation-----*/



Menu feito por mim

23 comentários:

  1. Amei o tutu, vou usar em um novo lay que estou preparando.
    Kaakah, onde conseguistes esse backgorund?? É tão linda (*≧▽≦)

    ResponderExcluir
    Respostas
    1. Esse background do blog eu mesma fiz xuxu ^-^

      Excluir
    2. Vou aproveitar o domingo (já que não farei nada) e vou fazer alguns backgrounds (tentar) p/ disponibilizar ^-^

      Excluir
  2. Muito lindo seu menu...

    se pode fazer uma visitinha

    http://mundofantasticofeminino.blogspot.com.br/

    ResponderExcluir
  3. Adorei o seu Blog e já estou seguindo, gostaria muito de te ver no meu cantinho
    http://ninateinforma.blogspot.com.br/ . E participe do sorteio!
    Bjokas da ♥♫Nina ♥♫
    @ninateinforma(Tweeter)
    http://ninateinforma.blogspot.com.br

    ResponderExcluir
  4. Perfeito! Vou usar quando mudar de look, eu acho... Gosto muito dos meus moranguinhos então, não posso confirmar, haha :D
    Hey, estou te convidando pra conhecer o LD, meu cantinho, e agr da Gi também :)
    Estamos nos esforçando muito pra agradar a todos, então, eu queria pedir sua opinião, sua LEMDA!
    Chêrim, Lola ;**
    loladelight.blogspot.com

    ResponderExcluir
  5. Nossa kaakah Muito obrigado <33 Ja estou colocando lá no blog ;D Obrigado mesmo! Bezões Luuh
    Rawr Girl ~> teenstyle.com

    ResponderExcluir
  6. Que Tutorial perfeito! Na próxima, faz um tutorial de como pôr o "Postar Comentário", "Postado por" e talz em baixo do título do post. (sim, já faz 3 dias que eu procuro um tutorial decente sobre isso. u,ú)
    Kissus!

    http://anonlypossibility.blogspot.com.br/

    ResponderExcluir
  7. Vc recebeu um selinho. Aceita?
    http://mono-kawaii.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. mto obrigadinhaa *-* mais por enquanto não to mais aceitando :)
      adoreii que tenha indicado o BR como melhor design ♥-♥

      Excluir
  8. Amei o menu *-* Vou usar no próximo layout do SB! Bjuu
    http://www.sweetbomb-anaa.blogspot.com.br/

    ResponderExcluir
  9. muito fofo seu blog seu lay é perfeito parabens pelo blog é tudo muito lindo ;D

    http://apenas-para-meninas.blogspot.com.br/

    ResponderExcluir
  10. Oie estou passado rapidinho para convidar vc
    para tbm dar um passadinha la no nosso
    blog .

    PARABENS

    BLOG E LINDO D+

    http://blog-meninasmalucas.blogspot.com.br/

    ResponderExcluir
  11. Adorei o tutorial. *--*
    Vou usar no meu próximo lay.
    http://littlebadgirlcute.blogspot.pt/

    ResponderExcluir
  12. Muito maneiro o tuto, bem diferente o código... Seguindo aqui!!!
    Muito obrigada por passar no DSM, que Deus lhe abençoe!!!

    Mil Sweetkisses ♥.♥
    http://www.docesonhodemenina.com.br/

    ResponderExcluir
  13. Aaaah, seu novo lay ficou a coisa mais fofuxa desse mundo *-*
    E o tuto, é ótimo. Pena que eu tentei e não consegui!

    Cherry! Como é nossa afiliada, vim aqui te avisar que mudamos de nome. Então, vou agradecer se trocar o nome na sua elite de afiliados!
    Ps: Nossa URL continua a mesma.

    Kissus ;3
    Just Tonight

    ResponderExcluir
  14. Ameiii ! Ia botar no meu ! hahaha !
    Seguindo akie !
    >>>>http://ice-cream-desings.blogspot.com.br/

    ResponderExcluir
  15. adorei vou usar no meu novo blog *-*

    ResponderExcluir
  16. Eu personalizei a seleção do cursor no meu blog,onde também é necessário colocar o código html acima de ]]> e queria utilizar esse menu.Se eu colocasse o menu interferia na seleção ?
    Espero que responda.
    Nanda <3

    delicatepinkties.blogspot.com

    ResponderExcluir
  17. Mudei alguns codigos para encaixar no meu lay,mas vlw pela dica ! bjbjs

    ResponderExcluir
  18. *--*' eu amei seu blog, e vi toooodas as postagens ! :P
    to seguiindo e amando as diicas ;)

    beeeiijos :*

    www.poderosavesterosa.blogspot.com

    ResponderExcluir
  19. Oiee , dei uma roubadinha( rsrs) no tutu , mas pode deixar que eu dei os créditos :D , conferir? Sem problemas!! URL do meu blog:

    http://mundobackgroundperfect.blogspot.com.br/

    ResponderExcluir