Tutorial - Elite de Afiliados com uma só imagem


Bem, o tutorial que vim trazer para vocês hoje foi pedido por várias pessoas no meu ask. É de como fazer uma elite de afiliados igual à minha, ou seja, com uma só imagem. Para fazer este tutorial você só irá precisar do Photoscape, da sua imagem, de bastante atenção pois não é simples, e de paciência, haha. Logo abaixo tem uma Preview para quem não sabe do que estou falando. Enfim, vamos lá!

Resultado: 


1 - Primeiramente você deverá criar a sua imagem, de acordo com o tamanho da sua sidebar.

2 - Após criar, abra o Photoscape e vá ao Divisor:

3 - Adicione sua imagem e escolha a quantidade de colunas e filas de acordo com sua quantidade de afiliados. Como eu tenho 19 afiliados escolhi 4 colunas e 6 filas, dando o total de 24 imagens, assim me sobraram vaguinhas.


 4 - Clique em Divisão e salve suas imagens onde desejar. Elas ficarão lá, assim:



5 - Hospede todas as imagens onde costuma hospedar.

Agora, para conseguir que as imagens fiquem coladinhas umas nas outras como as minhas, faça o seguinte:

1 - Vá no seu HTML, 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;
}
Troque Width pela largura da sua imagem, e Height pela altura. E mexa somente nisso. u_u

2 - Cole em um gadget de HTML/JavaScript o seguinte código, repetindo até que tenha utilizado todas as suas imagens, seguindo sempre a ordem:
 <a href="http://URL.com" title="Título da imagem"><img src="LINK DA IMAGEM" class="afili"/></a>

Prontinho! É um pouco complicado? É. Mas se você prestar atenção, irá conseguir.

O tuto original é do GDOS, mas eu aprendi no EF, sendo assim credite aos 3 blogs pois eu fiz algumas modificações.

~ Até amanhã, beeeijos <3

32 comentários:

  1. Super legal está doida por esse tutorial!

    http://princessofjeans.blogspot.com/

    ResponderExcluir
  2. Adorei Ingrid! Estava curiosa mesmo para saber hehe1. Depois, acho que vou tentar fazer por que fica muito legal! -Acorda cedo ruum, SQN-.

    Beijinhos da Biia!

    Caprichos da Biia

    ResponderExcluir
  3. Acho bem legal esse tuto ºwº
    Já sabia!

    Abraços ♥

    VISITE : http://pensamento-jhenny.tk/
    Post novo \õ

    ResponderExcluir
  4. Já conhecia *-* é muito bom esse tuto c:
    Beijos <3

    explosion-html.blogspot.com.br

    ResponderExcluir
  5. Sempre fui curiosa por esse tutorial, estava procurando o3o /e a Ing lê minha mente novamente.

    /chu ~
    empire-lovers

    ResponderExcluir
  6. Muito maneiro e super útil!
    bjo bjo

    minhamaniaa.blogspot.com.br

    ResponderExcluir
  7. Adorei o tutorial. Acho meio complicado, mas vou tentar fazer, IWOEIWOI'
    Beijos.

    Designer Lovers

    ResponderExcluir
    Respostas
    1. UAHSUAHS' Eu também acho, mas com paciência todos conseguem. Obrigada ;)

      Excluir
  8. Nossa,achei muito legal o resultado,ainda não conhecia.

    www.em-teusbracos.blogspot.com

    ResponderExcluir
  9. Eu já tinha visto esse modelo, mas achei meio complicado. Quando eu for trocar de layout usarei com certeza u.u

    Detached Things~

    ResponderExcluir
  10. Sempre quis saber como fazer isso. Fica muito lindo. Com certeza eu vou usar (:
    beeijos ;*

    ResponderExcluir
  11. Esse tutorial é óoooootimo! Sempre uso ele nos meus layouts, mas vou abrir uma exceção no próximo lay, AUHSUAHSUASH'

    -Epílogos e Finais.
    -Underground Icons
    - Segue?

    ResponderExcluir
  12. :O eu tava doida atraz desse tuto, sempre quis saber como era que fazia essa magia uahushau.. adorei!

    ResponderExcluir
  13. É um tutorial simples e fácil. Mas tem a parte de colocar imagem por imagem, e isso é bem cansativo.
    ~Ana @TSD

    ResponderExcluir
  14. Me sinto uma completa retardada.Achei que era tão complicado e no fim é extremamente simples. Adorei o tutorial :33

    Chu ~

    blog-bluesky.blogspot.com

    ResponderExcluir
  15. Oiii =)

    Estou aqui para avisar que o My Magic place agora tem uma página no facebook *-*

    Vai lá no blog e curte se puder? ><
    Agradeço desde já ;)

    minhas-confissoes-2012.blogspot.com

    ResponderExcluir
  16. Eu fiz pelo Photoshop, foi bem demorado, mas eu consegui *-*
    Esse tutorial é muito útil, e deixa o blog bem mais fofo >3<
    World Of Tutos

    ResponderExcluir
  17. amooooooo esse tuto, é mto lindo e criativo cara, mas até que tô com preguiça de fazer e tals. ushaushuashaus
    absolutedream.tk

    ResponderExcluir
  18. *OOO*
    Muito útil XD
    Nem sabia que dava pra fazer isso pelo PhotoScape UHASUHAS'

    http://wanted-dream.blogspot.com.br/

    ResponderExcluir
  19. Olá! Você poderia participar do Meme das 11 Coisas? Eu lhe indiquei! http://lovedramas.blogspot.com.br/2013/03/meme-das-11-coisas.html

    ResponderExcluir
  20. Tentei fazer isso, mais deu errado =/
    Flor, eu preciso de postadoras para o meu blog, então se quiser o cargo, Entre em Contato !
    Sei que você é uma ótima postadora, e por isso, estou aqui pra te convidar....

    Beijos,
    The-wonderland-sz.blogspot.com.br {Hiatus, temporário}

    ResponderExcluir
  21. nossa que amor essa elite de afiliados <3
    adorei,bjs!
    elen-candy.blogspot.com

    ResponderExcluir
  22. Super legal e diferente essa elite u.u
    quirky-tree.blogspot.com

    ResponderExcluir
  23. Super legal esse tutorial, com certeza vou colocar no meu novo layout ;)

    ResponderExcluir

Obrigada pelo seu comentário, sua opinião é muito importante!
Se seu perfil for trancado, não se esqueça de deixar o link do seu blog ou pelo menos o nome, para que eu possa retribuir. ♥

« » +