Tutorial - Afiliados em uma imagem só

Konnichiwa habitantes do Portal!! (>=<)// 

Finalmente consegui inspiração pro novo lay ( uhuuhl ~O~) não irei dizer o tema, mas vou adiantando que vai sr simples,fiquei na duvida entre três temas, mas já decidi que já vou deixar 2 deles prontos, daí não irei ter problema >.<

Vou começar a fazer as imagens para afiliados e tal ... Não sei se vai agradar e todos, mas okay...

Tinha falado da entrevista ontem neh?Pois então ainda vou preparar as perguntas e comunicar aos blogs pra ver se eles vão querer fazer.

Hoje trouxe um tuto que por muito tempo procurei como fazer e depois "descobri' e.e...Que é aquele que se usa uma imagem só e nela coloca todos os afiliados...

Visualize

Primeiro vou ensinar como se divide a imagem, isso eu aprendi sozinha, quando dividi pra colocar no twitter, e é pelo Photoscape..

Antes de dividir a imagem, veja qual é o tamanho da sua sidebar para a foto não acabar ficando para fora.

1. Abra se photoscape (não brinca?!) e clique em divisor (X)

2. Abra sua imagem em adicionar e ajuste as larguras de acordo com sua imagem. (X)

3. Clique em divisão e as fotos divididas irão ficar salvas em uma pastas "output" (X)

Agora a opacidade :

No HTML do seu blog, procure por ]]></b:skin> e acima cole

.isa-opacity{margin-top: 0px;

opacity:1.0;

padding: 0px 0px 0px;

-webkit-transition-duration:.80s;

-moz-transition-duration:.80s;

-o-transition-duration:.80s;

border-radius: 0px;}

.isa-opacity:hover{opacity:0.6;

-webkit-transition-duration:.80s;

-moz-transition-duration:.80s;

-o-transition-duration:.80s;

}

Em um gadget Html cole :

<a href="LINK DO BLOG" title="NOME DO BLOG"><img class="isa-opacity" src="URL DA IMAGEM" /></a>

De acordo com o numero de quadradinhos que a imagem foi dividida você ira usar um código acima para cada.No meu caso foi 9 quadradinho então repeti o código 9 vezes.Ainda no gadeget as imagens estrão assim (X) (X)

Juntando tudo

As imagens vão ficar grudadinhas, mas caso não fiquem uma em cima da outra volte no seu HTML e procure novamente por .isa-opacity

No código da opacidade, você vai ver isso margin-top: 0px; mude o número (se com números positivos, se afastarem, use número negativos). No meu deu -4, mas acho que varia de tamanho da imagem, não sei então tem que ficar tentando até que se "grudem".

credits to : eu amo html