Tutorial - Elite de Afiliados com uma só imagem

Bem, o tutorial que vim trazer para vocês hoje foi pedido por várias pessoas no meu ask. É de como fazer uma elite de afiliados igual à minha, ou seja, com uma só imagem. Para fazer este tutorial você só irá precisar do Photoscape, da sua imagem, de bastante atenção pois não é simples, e de paciência, haha. Logo abaixo tem uma Preview para quem não sabe do que estou falando. Enfim, vamos lá!

Resultado: 

1 - Primeiramente você deverá criar a sua imagem, de acordo com o tamanho da sua sidebar.

2 - Após criar, abra o Photoscape e vá ao Divisor:

3 - Adicione sua imagem e escolha a quantidade de colunas e filas de acordo com sua quantidade de afiliados. Como eu tenho 19 afiliados escolhi 4 colunas e 6 filas, dando o total de 24 imagens, assim me sobraram vaguinhas.

 4 - Clique em Divisão e salve suas imagens onde desejar. Elas ficarão lá, assim:

5 - Hospede todas as imagens onde costuma hospedar.

Agora, para conseguir que as imagens fiquem coladinhas umas nas outras como as minhas, faça o seguinte:

1 - Vá no seu HTML, procure por ]]><b:skin> e acima dessa tag, cole:

.afili {

-webkit-transition: 0.4s;

width: 57px;

height: 41px;

text-align: center;

margin-bottom: -3px;

}

.afili:hover {

opacity: 1.1;

}

Troque Width pela largura da sua imagem, e Height pela altura. E mexa somente nisso. u_u

2 - Cole em um gadget de HTML/JavaScript o seguinte código, repetindo até que tenha utilizado todas as suas imagens, seguindo sempre a ordem:

 <a href="http://URL.com" title="Título da imagem"><img src="LINK DA IMAGEM" class="afili"/></a>

Prontinho! É um pouco complicado? É. Mas se você prestar atenção, irá conseguir.

O tuto original é do GDOS, mas eu aprendi no EF, sendo assim credite aos 3 blogs pois eu fiz algumas modificações.

~ Até amanhã, beeeijos <3