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.

Brevia do efeito

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.