terça-feira, 14 de fevereiro de 2012

Tutorial- Efeito Hover e bordas arredondadas na elite afiliados


 
 Oi pessoal hoje trouxe um tuto bem legal para elite de afiliados igual a do Place Fame. Esse tuto pertence à esse blog portanto dê os créditos à ele. Vamos lá:

Vá até Design > Editar HTML, e procure (F3/Ctrl + F) por ]]></b:skin>. Acia dela, cole o seguinte código:
.afiliados {
opacity: 0.7; 
-webkit-transition: 0.5s;
border-radius:15px;
width: 50px;
height: 50px;
text-align: center;
}
.afiliados:hover {
opacity: 1.0;
}
 Entenda!
ESTADO NORMAL
opacity: 0.7; Opacidade em 70%, no estado normal, sem passar o mouse.
-webkit-transition: 0.5s; Tempo da transição.
border-radius: 15px; Bordas arredondadas.
width: 50px; Largura da imagem dos afiliados.
height: 50px; Altura da imagem dos afiliados.
text-align: center; Alinhamento das imagens.

ESTADO HOVER
opacity: 1.0; Opacidade em 100% (normal), ao passar o mouse.

Agora salve. E se direcione à Design > Elementos da página. Clique em "Adicionar um Gadget", e escolha a opção HTML/Javascript. E cole nele, o seguinte código:
<a href="http://URL.com" title="Título da imagem"><img src="LINK_DA_IMAGEM" class="afiliados"/></a>
Para acrescentar mais imagens, vá duplicando o código.

10 comentários:

  1. Oieee... Amei o blog!
    Quer ser afiliada?
    simplismentecute.blogspot.com

    ResponderExcluir
  2. adorei este tutorial linduuu http://cheyenne-opscresci.blogspot.com http://decora-harajuku.blogspot.com

    ResponderExcluir
  3. Eu estava procurando este tuto faz um tempãoo *--*
    Já estou seguindo aqui se puder retribuir eu ficarei muitoo feliz *u*

    http://sundaes-dream.blogspot.com/

    ResponderExcluir
  4. Owwn que bom que gostou do meu blog *u*

    o seu tbm é lindo bjs bjs

    ResponderExcluir
  5. Seu blog é MARAVILHOSO !
    Amei aqui e já estou seguindo, queria perguntar, vooc esta aceitando afiliação? Se sim, vooc aceita se afiliar com meu blog?
    http://beautyteentaay.blogspot.com.br/

    ResponderExcluir
  6. OBGD
    fico perfeito
    esse é meu efeito favorito

    ResponderExcluir
  7. Adorei linda, visite meu blog recém-nascido ~lê rindo pra burro ~
    Aceita afiliação? Me responda pela minha cbox
    http://aluzdoamanhecerdesign.blogspot.com.br/

    ResponderExcluir
  8. Usando ♥
    http://the-little-official.blogspot.com.br/

    ResponderExcluir
  9. Gostei. Usarei. Creditarei.
    recantodafadaalice.blogspot.com.br/
    (。◕‿‿◕。)~♥

    ResponderExcluir