24 de abr de 2013

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! 

Um comentário:

  1. Boa ideia ! posso ser afiliada ??

    www.modanodia.blogspot.com
    Beijooos

    ResponderExcluir