11/09/12

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 :)


9 comentários:

  1. Bem fácil e pratico ; D
    rockdeverdadeeatitude.blogspot.com/ comenta e se gostar siga!Bjs

    ResponderEliminar
  2. Super prático o tuto, quem sabe não uso para colocar nossa equipe?

    diamantesdeumagarota

    ResponderEliminar
  3. Eu sei fazer, acho que fica lindinho e meigo shauehaueh' Mt bom bibi <3
    garotadoolharsincero.blogspot.com

    ResponderEliminar
  4. Que legal Bia,adorei o tutorial essa imagens com esse efeito ficam super legais na equipe mesmo!
    bangteen.blogspot.cm

    ResponderEliminar
  5. Adorei o tutorial, o efeito fica lindo! Mas n tenho equipe no meu blog, sou só eu mesma :)
    Beijos!
    Adorei seu blog, já estou seguindo... s2
    coisas de meninas - visite no perfil.

    ResponderEliminar
  6. Eu fiz um codigo tipo esse... Mega fofo :)
    Posso aceitar a afiliação??

    Kisses ~~~>  História Agridoce




    ResponderEliminar

-Não coloques o link do teu blog para ele não ser excluído. Retribuo mesmo que deixes só "Cat Girl".

-Comentários do género "Seguindo, segue de volta", "Adoro seu blog", "Novo concurso..." não serão respondidos.

-Fala alguma coisa sobre o post, senão não retribuo.

-Aceito críticas construtivas, nada de palavrões ou coisas do género.

Beatriz


Layout by Beatriz D. ~ Cat Girl | Proibido cópias