Tutorial - Menu Color

Yoo ~~ 

Esse menu é bem fácil de se fazer também, e vocês podem mudar as cores se quiserem, mas eu já vou deixar tudo personalizado e vou explicar como vocês podem acrescentar outras cores no final do tutorial. Eu encontrei ele no Things To Help You então caso forem usar, credite á ele e ao Birthday Cake.

Bem bonito e fofo, e vocês podem visualizar ele aqui ! 

Va no seu HTML e procure por ]]></b:skin>. Quando encontrar acima dele cole:

.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;}

Visualize e se estiver tudo ok salve. Agora crie uma Gadget HTML/JAVASCRIPT e cole:

<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>

Daí caso queiram acrescentar outras cores, troquem apenas o nome da classe e a sua cor, depois acrescente no Gadget da mesma maneira, apenas mudando o nome da classe. A classe é o a.azul e o a.azul:hover, ou seja, se você quiser um menu roxo, criei a.roxo e copie o conteúdo da classe azul pra ele, mudando apenas a cor do fundo, e quando for acrescentar dentro do seu Gadget, no menu, só mude o class=”azul” por class=”roxo”, entenderam?