Efeito no gadget dos afiliados

Oi, gente! Tudo bom com vocês? Hoje vou ensinar à vocês como se faz esse efeito no gadget de afiliados. É simples, fofo e pode ser usado para vários outros elementos de página. 

Vá até Design > Editar HTML, e procure (F3/Ctrl + F) por ]]></b:skin>. Acima 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;

}

Agora 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 em seguida se direcione à Design > Elementos da página. Clique em "Adicionar um Gadget", e escolha a opção HTML/Javascript. E acrescente 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. Espero que tenha ajudado vocês! Beijos!