21/06/2013

Menu Button


Ayoo ~~

Estou de volta e nunca mais vou ficar ausente prometo à vocês! Esses dias que fiquei longe daqui fiquei muito triste sem ter o que fazer saudades de escrever, responder comments essas coisas que blogueiros (a) fazem. Hoje foi minha prova de Inglês (da escola) e do meu curso já estou de férias, provavelmente dia 28/06 já estarei livre!

Enfim, quero agradecer ao blog - Empire HTML ♪ por nos divulgar, muito obrigada ajudou muito! Saindo um pouco do assunto de 'utilitários' trouxe um tutorial muito legal, é um tutorial de um menu chamado Menu Button ele é bem simples e bem fofinho. Lembrando que o tutorial foi retirado la do IIRTW. Vamos aprende-lo?

Preview

1. No seu editor de HTML procure por ]]></b:skin>, acima da tag cole:
#menucp { /* menu de círculos */
background: #fbfbfb; /* fundo do círculo */
text-shadow: 1px 1px 0 #FFFFFF; /*sombra do texto */
border: 1px solid #eeeeee; /* borda */
color: #BEBEBE; /* cor do texto */
font-family: Georgia; /* fonte do texto */
font-size: 11px; /* tamanho da fonte */
text-align: center;
padding-bottom : 8px;
padding-left : 10px;
margin-bottom: 8px;
padding-right: 10px;
padding-top: 8px;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
border-radius: 30px;
box-shadow: inset 0px 2px 16px #fff, 1px 2px 5px #ccc;
-webkit-transition-duration: 0.1s; /* Tempo do Efeito */
}
#menucp:hover {
background: #ffffff; /* cor do fundo quando passar o mouse */
text-shadow: 1px 1px 0 #FFFFFF; /* sombra do texto quando passar o mouse */
border: 1px solid #eeeeee; /* borda quando passar o mouse */
color: #BEBEBE; /* cor do texto quando passar o mouse */
padding-bottom : 8px;
padding-left : 10px;
margin-bottom: 8px;
padding-right: 10px;
padding-top: 8px;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
border-radius: 30px;
box-shadow: inset 1px 2px 5px #ccc, 0px 2px 16px #fff;
}
2. Após salvo adicione um gadget HTML/JV e cole:
<center><a id="menucp" a="" href="LINK">1</a>
<a id="menucp" a="" href="LINK">2</a>
<a id="menucp" a="" href="LINK">3</a>
<a id="menucp" a="" href="LINK">4</a>
</center>
<br />
Modifique como quiser e pronto!

Xoxo :3 

6 comentários:

  1. O menu é muito fofinho, simples e lindo u_u

    Nyah Kawaii

    ResponderExcluir
    Respostas
    1. É mesmo, e o melhor que dependendo da cor que você usar ele pode combinar com tudo n.n

      Excluir
  2. É simples, mas é diferente. É bom pra quem gosta de ocupar pouco espaço e não gosta de coisas chamativas.

    ResponderExcluir
    Respostas
    1. Verdade, as vezes muitas pessoas escrevem muito no gadget Welcome daí coloca esse menu pequeno o3o~

      Excluir
  3. Que menu fofinho :33 Dá para usar no primeiro gadget (:
    Kiss ~

    letterofopain.blogspot.com

    ResponderExcluir