Tutorial - Afiliados em 1 imagem

Bom dia unicórnias e unicórnios.

Eu estava vendo alguns blogs de html e vi que o World Of Tutos estava com um layout do Harry Potter, e os afiliados era em uma imagem só, ai eu parei e pensei, como assim ? e resolvi pesquisar como fazer. Eu sei que tem gente aqui que nem sabe do que eu estou falando então por isso aqui vai um print de como é :

- Você precisa ter o Photoscape 

Com o Photoscape você vai cortar a imagem em partes, como mostra na imagem a cima.

Você vai fazer o seguinte :

1 - Você vai ter que criar um arquivo do tamanho da sua sidebar ou menor, e salve-a.

2 - Abra o Photoscape e clique em divisor

3. Após isso, adicione sua imagem e defina as medidas. Recomendamos 50x50, mas minha imagem teve de ser redimensionada para 53x44, isto dependendo do tamanho da sua sidebar.

4. Feito isso, clique em "Divisão", e salve as imagens onde desejar. 

5. Agora, entre em qualquer site hospedador e hospede suas imagens. 

6. Vá no seu HTML, tecle Ctrl+F e procure pela tag ]]><b:skin> e acima dela, cole o seguinte código:

.afili {
opacity: 0.6;
-webkit-transition: 0.4s;
width: 50px;
height: 50px;
text-align: center;
margin-bottom: -3px;
}
.afili:hover {
opacity: 1.1;
}

7. Não altere NADA. Para adicionar, cole o seguinte código em um HTML/JavaScript, repetindo várias vezes, até que todas suas imagens estejam certas.

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

Ta, mais eu fiz o tutorial direitinho e as imagens ficaram separadas, e agora ?

Apague o espaço entre os códigos!

CRÉDITOS PELO TUTORIAL : 4 SECONDS