Tutorial: Lista de Afiliados em HTML

Yoo Pandas ^^ 

Como hoje é domingo, eu não quero deixar vocês na mão, terça tudo indica que não vou poder postar, ai eu vim hoje postar um tutorial útil, pra quem tem os afiliados na sidebar.

Domingo que vem, eu vou trazer um game que ainda estou pensando no tema, então acompanhem meus posts e o das outras blogueiras ta ??

O tutorial eu peguei lá no blog : Catching Stars ( Devidos créditos )

Boora ?? 

1. Abra sua caixa de pesquisa Browser (Ctrl + F ou F3) , e pesquise pelo código ]]></b:skin> , quando encontrar cole acima:

afiliado {

font-size:14px; /* tamanho da letra */

padding:5px;

width: 30px; /* largura, recomendo que não mudem */

display: inline-block;

height: 23px; /* altura, recomendo que não mudem */

font-family: arial; /* fonte */

text-align:center;

color: white; /* cor da letra */

background: #486d97; /* cor do fundo */

text-transform: uppercase;

-moz-border-radius: 100%; /* bordas arredondadas */

-webkit-border-radius: 100%;  /* bordas arredondadas */

border-radius: 100%; /* bordas arredondadas */

margin: 5px;

padding-top: 12px;

-webkit-transition: 0.7s ease-out;

float: left;

-moz-transition: 0.7s ease-out;

transition: 0.7s ease-out;

}

O que vocês devem modificar é só o que está em negrito.

2. Dando continuação ao tutorial, irei agora explicar o que terão de fazer para adicionar o efeito de rotação quando em hover. Basta que coloquem acima de ]]></b:skin> o seguinte código: 

afiliado:hover {

background: #ab1d46; /* cor do fundo quando hover */

-webkit-transform: rotate(-360deg); /* rotação */

-moz-transform: rotate(-360deg); /* rotação */

}

3. Depois, é só adicionar um gadget HTML/JavaScript e cole quantas vezes quiser:

<a href="URL"><afiliado>Sigla</afiliado></a>