Gadget de afiliados com efeito

Heey pessoas! Hoje vou encinar a como colocar bordas arredondadas e efeito hover no gadget de afiliados.         Let's Go?


Vá em Modelo > Editar HTML > aperte Ctrl F e pesquise por: ]]></b:skin>

Acima deste código, cole este para as bordas arredondadas:

.afiliados {

opacity: 0.7; /* Opacidade sem passar o mouse */
-webkit-transition: 0.5s; /*Tempo da transição*/

border-radius: 15px; /*Bordas arredondadas*/
width: 50px; /*Largura dos icons dos afiliados*/
height: 50px; /*Altura dos icons dos afiliados*/
text-align: center; /*Alinhamento dos icons*/

 Já para o efeito hover, cole este:

.afiliados:hover {

opacity: 1.0; /*Opacidade passando o mouse*/

}

Se você quiser, pode colar os dois, para ficar com o hover e as bordas que funcionará.
Depois, aperte "Salvar"

vá em Layout > Adicionar um Gadget > HTML/Javascript e cole este código, alterando as partes em negrito:

<a href="Url Da Imagem/Icon1" title="Titulo da Imagem/Icon1"><img src="LINK_DA_IMAGEM_1" class="afiliados"/></a>

<a href="Url Da Imagem/Icon2" title="Titulo da Imagem/Icon2"><img src="LINK_DA_IMAGEM_2" class="afiliados"/></a>

<a href="Url Da Imagem/Icon3" title="Titulo da Imagem/Icon3"><img src="LINK_DA_IMAGEM_3" class="afiliados"/></a>

Esse código é para 3 afiliados, se você tiver mais,é só copiar de <a até </a> e ir colando. Se tiver menos, é só apagar, selecionando sempre o  "<a até </a>"