Sweet of Cherry: 3 Menus para Afiliados

Hello boys e girls!!! Quase não consigo postar hoje uma hora é a energia, outra hora é internet hoje está sendo um dia de cão, eu louca pra postar para vocês o layout free que estou fazendo e a energia e a internet ficam enchendo a paciência que não tenho.

Esse layout free que ia postar pra vocês foi um pedido bem antigo lá na ask, talvez amanhã eu post pra vocês e peço que façam pedidos na ask.

Então no lugar do layout free trouxe 3 menus para afiliados, deixa eu explicar eu peguei o código do Kawaii World, mas como o menu de lá é muito simples resolvi colocar alguns efeitos nele, mas se quiser sem efeito clique aqui. Me avise se isso que fiz é errado, por favor!

O bom desses menus é que você não coloca no HTML blog e também ele é bom porque você pode usá-lo para menu normal, menu de créditos e tal.
Vá em Layout>> Adicionar um Gadget>> HTML Java/Script e cole o código do modelo escolhido.
1º MODELO

Esse é o modelo que uso aqui no gadget dos afiliados o efeito é a opacidade como mostra na imagem.

<style>
@font-face { font-family: "wish"; src: url('http://static.tumblr.com/0xqvkot/7jqmgsn0m/pf_arma_five.ttf'); }
#afiliados{
background-color: #f9cee1;
width: 23px;
height: 10px;
font-family: wish;
font-size: 8px;
float: left;
padding: 2px 0 6px 0;
text-align: center;
margin-left: 5px;
margin-bottom: 4px;
color: #f49dc1;
line-height: 13px;
border: 1px solid #f49dc1;
-moz-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
return: false;
}
#afiliados:hover {
opacity: .50;
}
</style>
<a href="LINK" title="NOME" id="afiliados">VG</a>
<a href="LINK" title="NOME" id="afiliados">VG</a>
<a href="LINK" title="NOME" id="afiliados">VG</a>
<a href="LINK" title="NOME" id="afiliados">VG</a>
<a href="LINK" title="NOME" id="afiliados">VG</a>
<a href="LINK" title="NOME" id="afiliados">VG</a>
<a href="LINK" title="NOME" id="afiliados">VG</a>
<a href="LINK" title="NOME" id="afiliados">VG</a>
<a href="LINK" title="NOME" id="afiliados">VG</a>
<a href="LINK" title="NOME" id="afiliados">VG</a>
<a href="LINK" title="NOME" id="afiliados">VG</a>
<a href="LINK" title="NOME" id="afiliados">VG</a>

2º MODELO

Achei muito legal esse efeito e coloquei no menu.

<style>
@font-face { font-family: "wish"; src: url('http://static.tumblr.com/0xqvkot/7jqmgsn0m/pf_arma_five.ttf'); }
#afiliados2{
box-shadow: inset 1px 1px 0px #fff;
border: 1px solid #f49dc1;
background-color: #f9cee1;
width: 23px;
height: 10px;
font-family: wish;
font-size: 8px;
float: left;
padding: 2px 0 6px 0;
text-align: center;
margin-left: 5px;
margin-bottom: 4px;
color: #f49dc1;
line-height: 13px;
border: 1px solid #f49dc1;
-moz-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
return: false;
}
</style>
<a href="LINK" title="NOME" id="afiliados2">VG</a>
<a href="LINK" title="NOME" id="afiliados2">VG</a>
<a href="LINK" title="NOME" id="afiliados2">VG</a>
<a href="LINK" title="NOME" id="afiliados2">VG</a>
<a href="LINK" title="NOME" id="afiliados2">VG</a>
<a href="LINK" title="NOME" id="afiliados2">VG</a>
<a href="LINK" title="NOME" id="afiliados2">VG</a>
<a href="LINK" title="NOME" id="afiliados2">VG</a>
<a href="LINK" title="NOME" id="afiliados2">VG</a>
<a href="LINK" title="NOME" id="afiliados2">VG</a>
<a href="LINK" title="NOME" id="afiliados2">VG</a>
<a href="LINK" title="NOME" id="afiliados2">VG</a>

3º MODELO

Com esse efeito já vi em um blog, mas resolvi fazer um por minha própria conta.

<style>
@font-face { font-family: "wish"; src: url('http://static.tumblr.com/0xqvkot/7jqmgsn0m/pf_arma_five.ttf'); }
#afiliados3{
background-color: #f9cee1;
width: 23px;
height: 10px;
font-family: wish;
font-size: 8px;
float: left;
padding: 2px 0 6px 0;
text-align: center;
margin-left: 5px;
margin-bottom: 4px;
color: #f49dc1;
line-height: 13px;
border: 1px solid #f49dc1;
-moz-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
return: false;
}
#afiliados3:hover {
Color: #4ea764;
Background: #d2e8d7;
border: 1px solid #4ea764;
-webkit-transition-duration: .90s;
}
</style>
<a href="LINK" title="NOME" id="afiliados3">VG</a>
<a href="LINK" title="NOME" id="afiliados3">VG</a>
<a href="LINK" title="NOME" id="afiliados3">VG</a>
<a href="LINK" title="NOME" id="afiliados3">VG</a>
<a href="LINK" title="NOME" id="afiliados3">VG</a>
<a href="LINK" title="NOME" id="afiliados3">VG</a>
<a href="LINK" title="NOME" id="afiliados3">VG</a>
<a href="LINK" title="NOME" id="afiliados3">VG</a>
<a href="LINK" title="NOME" id="afiliados3">VG</a>
<a href="LINK" title="NOME" id="afiliados3">VG</a>
<a href="LINK" title="NOME" id="afiliados3">VG</a>
<a href="LINK" title="NOME" id="afiliados3">VG</a>

Depois de colocar o código do modelo escolhido, faça sua modificações, tipo mudar a cor do fundo, da fonte e da borda. E salve!

background-color: #cor; /* Cor do Fundo */
color: #cor; /* Cor da Fonte */
border: 1px solid #cor; /* Cor da Borda */
font-family: wish; /* Fonte */

Pronto!!!
Espero que tenham gostado!
Créditos: Menu do Kawaii World e modificações Sweet of Cherry