Tutorial : Afiliados em uma imagem só

Oi gente linda, tudo bom com vocês? bom, hoje eu vim aqui ensinar pra vocês um tutorial que eu acho bem lindo e que quero muito usar no meu proximo layout , que faz toda a elite de afiliados ficar em uma imagem só, o efeito é esse : ♥ , gostaram? então vamos aprender...

Então, pra começar você precisar ter o Photoscape se ainda não tem, baixe aqui depois abra o programa e crie uma imagem no tamanho que você preferir ou use uma pronta como á do exemplo  (aquela com a Lilo e o Stitch) , e depois vá no Photoscape e abra o "Divisor" como na imagem abaixo:

Em seguida , clique em "Adicionar" e clique na sua imagem, e logo depois escolha a quantidade de colunas e filas de acordo com seus afiliados, por exemplo se você tiver 9 fique com 3 colunas e 3 filas... Depois que terminar clique em "Divisão" e salve sua imgem . Logo depois você hospeda em alguma conta sua, eu uso o facebook (tá , ninguém perguntou.)  , enfim depois que você hospedar suas imgens vá no HTML do seu blog e 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;

}

Em seguida troque Width pela largura , e o Heigth pela altura de sua imagem. Depois vá no layout e crie um gadget em HTML/JavaScript e depois vá colando isso seguindo á ordem :

 <A HREF="HTTP://URL.COM" TITLE="TÍTULO DA IMAGEM"><IMG SRC="LINK DA IMAGEM" CLASS="AFILI"/></A>

Galera isso foi o máximo que eu consegui explicar, mais achei que não ficou bem explicado, então se tiverem dúvidas só avisar nos comentários. Beijos!