17/12/2012

Menu Color


Hayoo meus bunnys como vão vocês? Foi mal a demora para postar hoje, tive pequenos probleminhas, mas trago um tutorial que achei no blog Birthday Cake que achei muito kawaii, então decidi postar aqui, mas e claro dando os créditos ao merecido blog. O menu se chama "Menu Color" caso queiram dar uma olhadinha clique no botão de brevia.


1. Vá ate seu HTML e procure pela tag ]]></b:skin>, assim que achar cole esse próximo código acima dele:

Códigos
.menu{text-align: center; text-decoration: none;} 
a.verde{padding: 5px 5px 5px 5px; display: inline-block; background:#8BBF6D; margin-top: 5px; font-size: 13px; color: #ffffff; font-family: georgia; font-style: italic; -webkit-transition: all 0.6s ease-out; -moz-transition: all 0.6s ease-out;} 
a.verde:hover{opacity: 0.5;} 
a.rosa{padding: 5px 5px 5px 5px; display: inline-block; background:#EE97B7; margin-top: 5px; font-size: 13px; color: #ffffff; font-family: georgia; font-style: italic; -webkit-transition: all 0.6s ease-out; -moz-transition: all 0.6s ease-out;} 
a.rosa:hover{opacity: 0.5;} 
a.amarelo{padding: 5px 5px 5px 5px; display: inline-block; background:#F4EF74; margin-top: 5px; font-size: 13px; color: #ffffff; font-family: georgia; font-style: italic; -webkit-transition: all 0.6s ease-out; -moz-transition: all 0.6s ease-out;} 
a.amarelo:hover{opacity: 0.5;} 
a.azul{padding: 5px 5px 5px 5px; display: inline-block; background:#ABC9D6; margin-top: 5px; font-size: 13px; color: #ffffff; font-family: georgia; font-style: italic; -webkit-transition: all 0.6s ease-out; -moz-transition: all 0.6s ease-out;} 
a.azul:hover{opacity: 0.5;} 
a.laranja{padding: 5px 5px 5px 5px; display: inline-block; background:#FF8A2C; margin-top: 5px; font-size: 13px; color: #ffffff; font-family: georgia; font-style: italic; -webkit-transition: all 0.6s ease-out; -moz-transition: all 0.6s ease-out;}
a.laranja:hover{opacity: 0.5;}

2. Visualize para ver se não deu erro, se estiver tudo ok salve. Agora vá em layout e crie uma Gadget HTML/JAVASCRIPT e cole:

Códigos
<div class="menu"> 
 <a class="verde" href="URL">Nome</a> 
 <a class="rosa" href="URL">Nome</a> 
 <a class="amarelo" href="URL">Nome</a> 
 <a class="azul" href="URL">Nome</a> 
<a class="laranja" href="URL">Nome</a> 
 </div>

Onde esta "URL" coloque o link da pagina que desejar, e em "Nome" você já sabe né? rsrs Bom e isso, espero que tenham gostado! Beijocas e ate mais.

4 comentários:

  1. Achei super fofo esse menu.. simples mas bem fofo >.<
    Beijos!!

    ResponderExcluir
  2. Meu muito cute!! ;3
    Você poderia ensinar a fazer esse quadro de noticias q tem no cabeçalho?Eu acho muito fofo, e queria aprender...
    Beijokass
    Fer --->retardadasdanet.blogspot.com

    ResponderExcluir

Bem Vindos
Hi! Meu nome é Andréa Alark, mas conhecida como Wendy dona do blog Bunny Crazy. O blog foi criado em 2010 na intenção de ajudar a criação e desenvolvimento do seu blog. Aqui encontrará tutoriais e dicas de HTML, layouts gratuitos e muito mais.
Friends
Bunny Crazy by Wendy ❀
Bunny Crazy ★
Bunny Crazy ★
12345