Tutorial - Afiliados em uma só imagem

| |
Oioi gente, tudo bem? Eu espero muito que sim! Eu to bem, mesmo que vocês não tenham perguntado. Enfim, faz bastante tempo né? Eu estava com saudades :(, mas eu voltei e trouxe um bônus comigo, teremos postagens três vezes por semana! Então, eu fiquei pensando muito tempo no que eu iria trazer pra vocês, e eu resolvi trazer um tutorial fácil e simples que eu vi no Modern Girl HTML, e que fica muito bonitinho no seu layout.

1. Primeiro de tudo, você vai pegar uma imagem de acordo com o tamanho da sua sidebar.
2. Depois de ter feito isso, abra o PhotoScape e clique em 'divisor' .
3. Adicione a imagem, e escolha a quantidade de filas e colunas, conforme a sua quantidade de afiliados.

4. Depois de fazer isso, você clica em divisão e salve as imagens na pasta que você quer. 

5. Hospede as imagens em um site que você use.

Agora, para as imagens não ficarem com aqueles espaços, que deixam ela feia, faça isso :

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. 

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>

É isso, espero que tenham gostado e que usem, até a próxima.  ●ω● 


20 comentários :

  1. Adoro esse tutorial e já conhecia :3 Beijos..
    - excepti-on.blogspot.com.br (seguindo >3< )

    ResponderExcluir
  2. Ah, eu conhecia, fica muito lindo mesmo *3*

    Beijos | kawaii-world.net

    ResponderExcluir
    Respostas
    1. É conhecidinho, mas tem gente que não conhece, então decidi postar >3< Obrigada!

      Excluir
  3. Mei <33 é nossa tá run' ,q
    Enfim, eu já tinha visto isso em um blog,
    E achava que isso era a coisa mais dificil do mundo, uahsu
    Adorei o tutorial.

    Beijos <3
    http://p-perfectsthings.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Hahah, ok, ela é nossa. Não é difícil não, só seguir os passos e você consegue. Beijos :3

      Excluir
  4. Amei esse tutorial, vou usar essa técnica de cortar pra fazer uma outra coisa, obg pelo tuto.

    Beijos Just Again (Visita?!)

    ResponderExcluir
  5. ótimo o tutorial, é super facil. Amei o tutorial <3
    querendo-voar.blogspot.com.br || Querendo Voar ~ ( Visite )

    ResponderExcluir
    Respostas
    1. Vou visitar sim, fico feliz q tenha gostado. Tem minha visita garantida :3

      Excluir
  6. Adorei o tuto >3<
    Eu não tenho photoshop, então fico bastante contente quando encontro um tuto que é do photoscape, o que é raro hoje em dia -n rçrçr' >3<
    Já vi vários blogs usando a elite de afiliados com uma imagem só, e fica muito lindo *^*

    Beijos ~
    Kamile ♥ | d-arkclouds.blogspot.com

    ResponderExcluir
    Respostas
    1. Eu também não tenho photoshop porque eu não sei usar e tenho preguiça de aprender, só uso o photoscape haha. Beijoos

      Excluir
  7. ahh esse tutorial é muito bom mas nunca consegui fazer, as imagens sempre ficam tortas ou algo assim, adoreii..

    http://apenassonhosdreams.blogspot.com.br/

    ResponderExcluir
  8. Já conhecia o tuto mas não lembrava como se faz !
    É bem útil :)
    Beijos <3

    http://sunset-somewhere.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Sim sim, dá pra usar para outras coisas também ^^. Beijos

      Excluir
  9. Oi Ali, tudo bom contigo? q ♡ Eu já conhecia o tutorial e já cheguei a usar em um layout antigo meu...Antes, eu jurava que é um tipo de efeito ou sei lá mas depois vi que era imagem e tal, aushaus. Bem, adorei o tutorial ^3^

    Having Cherry ☁

    ResponderExcluir
    Respostas
    1. Tudo sim, e contigo? SHIAUHSAUI' Eu pensava a mesma coisa,q
      Obrigadaa :3

      Excluir
  10. Ótimo tutorial, só que eu escrevo o nome dos afiliados e coloco link, se não eu com certeza usaria *u*

    Já sigo aqui, se gostar do meu blog, me segue também? | www.quirky-tree.com | ♥

    ResponderExcluir
  11. eu já sabia como faz, mas acredito que seja bem útil pra muita gente *--*
    Estou seguindo, segue se gostar?
    kisses || We're Trendy

    ResponderExcluir

Regrinhas:
- Não xingue ninguém ou o autor da postagem.
- Não comente apenas divulgando o seu blog, dê a sua opinião.
- Deixe o link do seu blog no final do comentário, assim poderei retribuí-lo.
- Não se esqueça de seguir o blog.