Postagens mais lidas, numeradas e com efeito colorido

Tempos atrás eu publiquei aqui no blog um tutorial que ensina como colocar as postagens populares com efeito colorido, relembre:
Postagens mais lidas com efeito colorido

Mas o recurso, embora funcione e seja bem legal, requeria 3 passos, e isso muitas vezes complicava um pouco.
Então vamos simplificar tudo em apenas 1 passo, que tal?
E de quebra ainda colocar um efeito giratório nas imagens.
Veja como ficará:

Para começar você precisa ter instalado em seu blog o gadget Popular Posts.
Faça assim:
Acesse a aba Layout de seu blog e clique em Adicionar um gadget.
Na caixa de opções que expandir selecione Postagens Populares e configure o gadget assim:

Troque o título se desejar, salve, arraste para onde deseja e salve as alterações em Layout.

Como personalizar o gadget Postagens Populares?

Agora vamos dar charme ao gadget.
Acesse a aba Modelo de seu blog e clique em Personalizar.
Na coluna lateral esquerda selecione a opção Avançado.
Role as opções até achar Adicionar CSS. Clique nele.
Dentro da caixa que abrir cole este código:

Copiar o código

Dê um espaço ao final do código (sim, use a tecla espaço para dar um espaço ao final do código).
Assim que o botão Aplicar ao blog ficar laranja clique sobre ele.

Está feito.

Dicas extras:
» Para trocar a cor de cada uma das células localize no código o termo background: #.
Por exemplo, este, que define a cor da primeira célula:
#PopularPosts1 ul li:first-child{
background:#ff4c54;
width:91%}

» Veja que o código numérico hexadecimal que marquei em pink define a cor de fundo da primeira célula.
Mude esse código para a cor que desejar.
Faça isso em todas as ocorrências de background: # e as cores mudarão.
Aqui tem uma tabela de cores para você escolher:
 http://cores.gratuita.com.br/

» Não recomendo que mexa em mais nada no código, a menos que você tenha mais conhecimentos em HTML e CSS.

Gostou?
Não deixe de comentar, curtir, compartilhar!
Um clique apenas e você ajuda o blog a crescer e melhorar!