Menu Eat Colors

Olá Anjos!

Vou tirar alguns blogs dos afiliados e deixar apenas os afiliados mais presentes ou que eu gosto. Um dos motivos de de eu não gostar de afiliações é que a pessoa que pede nunca mais volta no blog. É sério gente, não quero só encher minha elite de blogs que eu também nem visito.

Deixando minha irritação de lado, trouxe um menu chamado Eat Colors, do Tumblr. Talvez esse menu seja o ultimo que trago essa semana, pois vou me concentrar em postar utilitários. O problema é que meus programas de edições de imagens demoram tanto para abrir que eu desanimo de fazer alguma coisa. 

Enfim, o menu é do Tumblr JOH e estou ensinando aqui. Ele fica mais bonito se for colocado um debaixo do outro, mas a configuração padrão dele deixa os links um ao lado do outro.

Veja uma preview

1-ACIMA de /b:skin, cole:

/***Menu Eat Colors por pequena-magoa se usar credite***/
un {font-family: verdana; letter-spacing: 0px; font-size: 11px; line-height: 13px; display: inline-block; background: #FFF5EE; color: #4f4f4f; width: 33px; padding: 5px; margin: 1px; text-align: center; text-transform: lowercase; -webkit-transition-duration: .40s;}
un:hover {font-family: verdana; letter-spacing: 1px; font-size: 11px; line-height: 13px; display: inline-block; background: transparent; color: #000; width: 33px; padding-left: 0px;}
a.rosa {background: #8B668B; padding: 5px;}
a.rosa:hover {background: #FFE4E1;}
a.azul {background: #8B668B; padding: 5px;}
a.azul:hover {background: #ADD8E6;}
a.verde {background: #8B668B; padding: 5px;}
a.verde:hover {background: #9BCD9B;}
a.roxo {background: #8B668B; padding: 5px;}
a.roxo:hover {background: #D8BFD8;}
a.laranja {background: #8B668B; padding: 5px;}
a.laranja:hover {background: #FFA54F;}
a.coral {background: #8B668B; padding: 5px;}
a.coral:hover {background: #FFA07A;}
a.cinza {background: #8B668B; padding: 5px;}
a.cinza:hover {background: #5F9EA0;}
a.ouro {background: #8B668B; padding: 5px;}
a.ouro:hover {background: #DAA520;}

Mude o que está em negrito.

2-Cole em um Gadget de HTML/JavaScript o seguinte código:

<a class="rosa" href="LINK" title="NOME DO LINK"><un>One</un></a>
<a class="azul" href="LINK" title="NOME DO LINK"><un>Two</un></a>
<a class="verde" href="LINK" title="NOME DO LINK"><un>Three</un></a>
<a class="roxo" href="LINK" title="NOME DO LINK"><un>Four</un></a>
<a class="laranja" href="LINK" title="NOME DO LINK"><un>Five</un></a>
<a class="coral" href="LINK" title="NOME DO LINK"><un>Six</un5></a>
<a class="cinza" href="LINK" title="NOME DO LINK"><un>Seven</un></a>
<a class="ouro" href="LINK" title="NOME DO LINK"><un>Eight</un></a>

Coloque o link e o nome do link nos locais indicado. Feito isso é só salvar. Espero que gostem!