Tutorial : Gadget para a equipa

Há 3 vagas para afiliação, se alguém quiser *-*

Hi ! Muitos me perguntaram como fiz o gadget "Quem posta?", então vim ensinar :)

Em hover, as imagens ficam totalmente redondas.

Para ter o efeito, cola acima de ]]></b:skin> o seguinte código :

.equipa {

-webkit-transition: all 1.00s linear;-webkit-transition: all 1.00s linear;-moz-transition: all 1.00s linear;transition: all 1.00s linear;

-webkit-border-radius: 100px;

-webkit-border-top-left-radius: 0;

-moz-border-radius: 100px;

-moz-border-radius-topleft: 0;

border-radius: 100px;

border-top-left-radius: 0;

}

.equipa:hover {

-webkit-transition: all 1.00s linear;-webkit-transition: all 1.00s linear;-moz-transition: all 1.00s linear;transition: all 1.00s linear;

-webkit-border-radius: 100px;

-moz-border-radius: 100px;

border-radius: 100px;

}

.equipaa {

-webkit-transition: all 1.00s linear;-webkit-transition: all 1.00s linear;-moz-transition: all 1.00s linear;transition: all 1.00s linear;

-webkit-border-radius: 100px;

-webkit-border-top-right-radius: 0;

-moz-border-radius: 100px;

-moz-border-radius-topright: 0;

border-radius: 100px;

border-top-right-radius: 0;

}

.equipaa:hover {

-webkit-transition: all 1.00s linear;-webkit-transition: all 1.00s linear;-moz-transition: all 1.00s linear;transition: all 1.00s linear;

-webkit-border-radius: 100px;

-moz-border-radius: 100px;

border-radius: 100px;

}

/* Caso só queira dois, apague o resto */

.equipaaa {

-webkit-transition: all 1.00s linear;-webkit-transition: all 1.00s linear;-moz-transition: all 1.00s linear;transition: all 1.00s linear;

-webkit-border-radius: 100px;

-webkit-border-bottom-left-radius: 0;

-moz-border-radius: 100px;

-moz-border-radius-bottomleft: 0;

border-radius: 100px;

border-bottom-left-radius: 0;

}

.equipaaa:hover {

-webkit-transition: all 1.00s linear;-webkit-transition: all 1.00s linear;-moz-transition: all 1.00s linear;transition: all 1.00s linear;

-webkit-border-radius: 100px;

-moz-border-radius: 100px;

border-radius: 100px;

}

.equipaaaa {

-webkit-transition: all 1.00s linear;-webkit-transition: all 1.00s linear;-moz-transition: all 1.00s linear;transition: all 1.00s linear;

-webkit-border-radius: 100px;

-webkit-border-bottom-right-radius: 0;

-moz-border-radius: 100px;

-moz-border-radius-bottomright: 0;

border-radius: 100px;

border-bottom-right-radius: 0;

}

.equipaaaa:hover {

-webkit-transition: all 1.00s linear;-webkit-transition: all 1.00s linear;-moz-transition: all 1.00s linear;transition: all 1.00s linear;

-webkit-border-radius: 100px;

-moz-border-radius: 100px;

border-radius: 100px;

}

Agora, vai até a um html/javascript e cola este código :

<a href="URL 1" target="_blank"><img src="IMAGEM 1" border="0" class="equipa" title="NOME 1"/></a> 

<a href="URL 2" target="_blank"><img src="IMAGEM 2" border="0" class="equipaa" title="NOME 2"/></a> 

<a href="URL 3" target="_blank"><img src="IMAGEM 3" border="0" class="equipaaa" title="NOME 3"/></a> 

<a href="URL 4" target="_blank"><img src="IMAGEM 4" border="0" class="equipaaaa" title="NOME 4"/></a> 

Espero que gostem e usem. Se usarem ou reblogarem CRÉDITOS :)