Modelo para afiliados

Imitando uma blogueira que conheço: bom dia, lasanhas ;)

Mais outro tutorial. Este aqui foi uma combinação de efeitos que me deu imenso trabalho, tudo pelo meu gadget de afiliados. Então, o código é extenso o suficiente para fazer algumas pessoas desistir de o usar, mas como eu já tratei dos alinhamentos e já organizei tudo, não será tão complicado para vocês usá-lo como foi para mim. Sei que a maior parte das pessoas não precisa de... quê? 30 afiliados? É algo por aí, mas por favor não apaguem nenhuma linha nem troquem a ordem, ou acabarão por perder imenso tempo a alinhar tudo à vossa maneira. Eu misturei um menu adaptado do blog garotas no mundo html com um efeito exclusivo meu, o efeito mixture, e um efeito exclusivo criado por mim que até já postei aqui, o confused. 

Prévia:

Tutorial:

Procure por:

/b:skin

Em cima acrescente o código seguinte. Só altere as cores, no efeito "bars":

.confused { /*dados da imagem - para fazer afiliados numa só imagem, reduzi a border-bottom e right*/
width: 24px;
height: 22px;
margin-bottom: -4px;
margin-right: -4px;
text-align: center;
}
.confused:hover { /*repetição do primeiro código, mas em hover*/
width: 24px;
height: 22px;
margin-bottom: -4px;
margin-right: -4px;
text-align: center;
}
.efeito img { /*dimensões da imagem*/
width: 24px;
height: 22px;
-webkit-transition-duration: .45s;
}
.efeito:hover img { /*imagens em hover - as que não estão com o rato*/
-webkit-transition-duration: .45s;
-webkit-transform: rotate(360deg);
-webkit-filter: sepia(0.3) hue-rotate(350deg) saturate(1);
opacity: 0.50;
}
.efeito img:hover { /*o que muda ao passar o rato*/
-webkit-transition-duration: .45s;
opacity: 1.0;
}
.limite {
width: 120px;
}
bars {
background: #dac5e6;
box-shadow: inset 0px 2px 0px #cdb8d9;
border: 2px solid #bea9c9;
text-shadow: 1px 1px 0px #fff;
display: inline-block;
text-align: center;
font-family: silkscreen;
font-size: 8px;
line-height: 10px;
color: #9a78ad;
float:left;
margin: 1px 2px 1px -1px;
padding: 2px 1px 2px 1px;
height: 10px;
width: 15px;
outline: solid 1px #ffffff;
outline-offset: -2px;
border-radius: 2px;
-webkit-transition: all 0.9s ease-out;
-moz-transition: all 0.9s ease-out;
}
bars:hover {
cursor:hand;
box-shadow: inset -70px -20px #fff0bd;
border: 2px solid #f0b97a;
color: #f0b97a;
outline: solid 1px #ffffdb;
outline-offset: -2px;
-webkit-transition: all 0.9s ease-out;
-moz-transition: all 0.9s ease-out;
}
bars2 {
background: #fff0bd;
box-shadow: inset 0px 2px 0px #ffe1ad;
border: 2px solid #f0b97a;
text-shadow: 1px 1px 0px #fff;
display: inline-block;
text-align: center;
font-family: silkscreen;
font-size: 8px;
line-height: 10px;
color: #f0b97a;
float:left;
margin: 1px 2px 1px -1px;
padding: 2px 1px 2px 1px;
height: 10px;
width: 15px;
outline: solid 1px #ffffff;
outline-offset: -2px;
border-radius: 2px;
-webkit-transition: all 0.9s ease-out;
-moz-transition: all 0.9s ease-out;
}
bars2:hover {
cursor:hand;
box-shadow: inset -70px -20px #dac5e6;
border: 2px solid #bea9c9;
color: #9a78ad;
outline: solid 1px #faf5fc;
outline-offset: -2px;
-webkit-transition: all 0.9s ease-out;
-moz-transition: all 0.9s ease-out;
}

Nota: as imagens da fileira de cima devem ter as dimensões 24 x 30. As da fileira lateral, devem ter as dimensões 25 x 21.

<center><div class="efeito" style="margin-top: 0px; margin-bottom: 0px;" >
<a href="LINK" title="NOME"><img src="IMG" class="confused" /></a>
<a href="LINK" title="NOME"><img src="IMG" class="confused" /></a>
<a href="LINK" title="NOME"><img src="IMG" class="confused" /></a>
<a href="LINK" title="NOME"><img src="IMG" class="confused" /></a>
<a href="LINK" title="NOME"><img src="IMG" class="confused" /></a>
<a href="LINK" title="NOME"><img src="IMG" class="confused" /></a>
<a href="LINK" title="NOME"><img src="IMG" class="confused" /></a>
</div></center>
<div class="limite" style="margin-top: 3px; margin-right: -14px; margin-left: 14px;">
<a href="LINK" title="NOME"><bars>1</bars></a>
<a href="LINK" title="NOME"><bars2>2</bars2></a>
<a href="LINK" title="NOME"><bars>3</bars></a>
<a href="LINK" title="NOME"><bars2>4</bars2></a>
<a href="LINK" title="NOME"><bars>5</bars></a>
<a href="LINK" title="NOME"><bars2>6</bars2></a>
<a href="LINK" title="NOME"><bars>7</bars></a>
<a href="LINK" title="NOME"><bars2>8</bars2></a>
<a href="LINK" title="NOME"><bars>9</bars></a>
<a href="LINK" title="NOME"><bars2>10</bars2></a>
<a href="LINK" title="NOME"><bars>11</bars></a>
<a href="LINK" title="NOME"><bars2>12</bars2></a>
<a href="LINK" title="NOME"><bars>13</bars></a>
<a href="LINK" title="NOME"><bars2>14</bars2></a>
<a href="LINK" title="NOME"><bars>15</bars></a>
<a href="LINK" title="NOME"><bars2>16</bars2></a>
<a href="LINK" title="NOME"><bars>17</bars></a>
<a href="LINK" title="NOME"><bars2>18</bars2></a>
<a href="LINK" title="NOME"><bars>19</bars></a>
<a href="LINK" title="NOME"><bars2>20</bars2></a>
</div>
<center><div class="efeito" style="margin-top: -3px; margin-left: -7px; margin-right: 7px;" >
<a href="LINK" title="NOME"><img src="IMG" class="confused" /></a>
<a href="LINK" title="NOME"><img src="IMG" class="confused" /></a>
<br />
<a href="LINK" title="NOME"><img src="IMG" class="confused" /></a>
<a href="LINK" title="NOME"><img src="IMG" class="confused" /></a>
<br />
<a href="LINK" title="NOME"><img src="IMG" class="confused" /></a>
<a href="LINK" title="NOME"><img src="IMG" class="confused" /></a>
<br />
<a href="LINK" title="NOME"><img src="IMG" class="confused" /></a>
<a href="LINK" title="NOME"><img src="IMG" class="confused" /></a>
<br />
</div></center>

Bem, se usarem direitinho, dará certo. Boa sorte ^^