21.11.12

Tutorial - Barra de menu personalizada


 Boa Tarde ~

Bom hoje estou com meu tempo livre, por causa que eu não fui pra escola, estou doente mais nada que eu não supere, coisas de menina. Pois é vamos ao assunto dessa tarde, creio que 98% dos blogueiros já conhecem esse código, mas mesmo assim vou refrescar a memória de vocês e ajuda aos 2% que não sabem. Vamos conferir:


Vá no seu HTML, aperte CRTL + F e procure por ]]></b:skin>  acima dele , cole este código:
/*menu por Clara - M.C.Design - credite sempre*/
#menumc {
float: left;
display: line;
margin: 1px;
background:#F2EEE8; /*Cor do fundo*/
width:87px; /*Largura de cada link do menu*/
height: 25px;
text-align: center;
font-size: 16px; /*Tamanho da fonte*/
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
-moz-box-shadow: 1px 0px 9px #CCCCCC;
-webkit-box-shadow: 1px 0px 9pc #CCCCCC;
box-shadow: 1px 0px 9px #CCCCCC;
texte-shadow: 0px 1px 5px #CCCCCC;
-webkit-transition: color 0.7s ease-out;
-moz-transition: color 0.7s ease-out;
transition: color 0.7 ease-out;
}
#menumc:hover {
background: #CFD916; /*Cor de fundo quando passa o mouse*/
color: #FFF; /*Cor do texto quando passa o mouse*/
}

Visualize se estiver tudo certo, salve ! 


Agora, vá em Elementos da página, adicionar gadget de HTML/Javascript, copie e cole este código:

<a href='LINK' id='menumc'>TÍTULO DO LINK</a>
O que estiver de negrito substitua pelo que se pede, Salve, após o salvamento organize seu menu aonde você desejar, e Pronto ! 
Repita esse código todas as vezes que quiser adicionar alguma página no seu MENU.
Então é isso pessoal. Espero que tenham curtido o tutorial ... Qualquer dúvida ou erro no código nos comunique, que resolverei! 

Kisses ~

13 comentários:

  1. Esse menu nõ é do Miki Candy? Eu já vi esse menu por lá e creio que é da Miki, já que o id é menumc.

    ResponderExcluir
  2. OOOi intão flor! acabei de ti seguir ;), intão eu procurei vc nos meus seguidores, e nao achei :(, as vezes da erro mesmo! ai vc pode me seguir denovo? por favor! estarei lá ti esperando ;)

    http://inspires7.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Então deu erro mesmo, porque eu segui, mais estou indo lá novamente. Obrigada por avisa bb!

      Excluir
    2. kkkkkkkkkkkkk# Desculpa flor! é mesmo, vc já me seguia ¬¬', Que Noob' que eu sou #Bate na Kra#


      Beijos

      http://inspires7.blogspot.com.br/

      Excluir
    3. Que isso flor, acidentes acontece com qualquer um kk' Beijos !

      Excluir
  3. tem que fazer isso antes ou depois de mapear (não sei se é assim que escreve) o topo?

    ResponderExcluir
  4. Obrigada pelo tuto. Amei.
    mythings2.blogspot.com

    ResponderExcluir
  5. Nossa eu nao sabia, haha
    tentei mil tutoriais e so o seu deu certo , obrigada amei muito! Parabens e sucesso no blog !

    www.conversasfeminiinas.blogspot.com

    ResponderExcluir
  6. Nossa muito obrigado me ajudou muito !! :)
    http://amandaogramac.blogspot.com.br/

    ResponderExcluir