4 de abr de 2013

Tutorial: Elite de afiliados em uma só imagem


Oiie Amores <33
Como vão?    Venho trazendo um tutorial bem útil para vocês !  Antes de começar a falar do tutorial ,eu queria dizer que estou postando tarde agora,porque como eu estudo de manhã,eu ando dormindo a tarde toda,e assim que eu acordo de tarde,tenho que limpar  a casa :3  Daí só ligo o pc umas 19:00 hrs .Enfim não reparem de eu estar postando de noite.. Enfim vamos ao tutorial.
O tutorial que eu trago a vocês hoje é a elite de afiliados em uma só imagem,igual a do blog .




Bom ,vamos ao tutorial:

1-Crie uma imagem de acordo com o tamanho da sua sidebar.
2-Depois de ter criado a sua imagem,abra o PhotoScape  e clique em 'divisor' como abaixo:

3-Adicione a imagem,e escolha a quantidade de filas e colunas de acordo com a sua quantidade de afiliados ,como eu tenho 8 afiliados,fiquei com 3 colunas e 3 filas.Sobrou 1 vaga U_U
Assim que dividir tudo certinho,clique em Divisão,salve em uma pasta,e vai ficar assim na pasta:
4-Hospede as imagens em partes como acima,em alguma conta sua no google..
Para que as imagens fiquem coladinhas,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 só !

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>

E assim ficará uma imagem normal,ao passar o mouse,terá todos seus afiliados *o*
Créditos:♫ ♪ ♫ 

3 comentários:

  1. Nossa vei que fácil Valeu quando eu tiver tempo irei fazer'

    Game>> http://worldofthel.blogspot.com.br/

    ResponderExcluir
  2. Super fácil este tutorial, talvez use em um layout futuro :3
    Agora que vi seu layout novo, está lindo!

    http://zombie-of-html.blogspot.com.br/

    ResponderExcluir
  3. Eu ja ouvi falar,fica bem legal quando aplicamos no blog :)

    - Love For HTML

    ResponderExcluir

Seja Educado
Comente sua opinião
Qualquer erro,reclame
Comente e seja feliz <3