Afiliados em uma imagem

Boa Tarde pessoas lindas

Eu estava vendo alguns blogs e encontrei o Little - World que é um blog ótimo,eu adorei vale a pena visitar.

Então fui vendo o blog todo,os post e gostei muito,ai fui na parte de Tutorial e encontrei esse de Afiliados em 1 imagem,assim eu nunca tinha visto,então achei bem legal e resolvi trazer para vocês aprenderem e usar no blog.

Bom vamos ao tutorial que é muito legal e simples de fazer,espero que gostem e comente se deu certo e o que acharam..

Bjokkasss 

- 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 ]]> 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 " />

(se esse segundo código não der certo entre num dos blog que eu peguei o tutorial que lá vai está o código) 

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 e LITTLE - WORLD