Efeito de giro nas imagens do widget Postagens Populares

Pouco tempo atrás, busquei por algo que mudasse um pouco a a aparência do widget postagens populares do Mundo Informal, que estava um pouco a aparência desse complemento que é de grande importncia aos blogs atualmente.

Acabei por encontrar esse código por meio de Talat Rizwan, e hoje, disponibilizo a você esse código muito simples:

Alerta! Antes de fazer qualquer modificação, faça um backup do seu modelo.
Acesse modelo → Fazer backup/Restaurar → Fazer download do modelo completo.

1° passo: Acesse o painel do Blogger, escolha o blog que você deseja instalar, selecione a opção "Modelo" e clique em "Editar HTML". Não se esqueça de marcar a caixinha "expandir modelos de widgets".

2° passo: Agora usando o Ctrl + F, procure por: ]]> </ b: skin>

3° passo: Agora cole logo acima da tag encontrada o seguinte código:

# PopularPosts1 {max-width: 300px} # PopularPosts1 dd {float: left; border-bottom: none; margin: 8px 8px 8px 0; background: none; exibição : bloco ; padding: 0} # PopularPosts1 img {-webkit- transição : toda a facilidade 0.5s;-moz- transição : toda a facilidade 0.5s; transição : toda a facilidade 0.5s; padding: 4px; background: # eee; background:-webkit-gradient (linear, inferior esquerda, superior esquerdo, a partir de (# eee), cor-stop (0,5, # ddd), cor-stop (0,5, # c0c0c0), para (# aaa)); background:-moz-linear-gradient (top, # eee, # ddd 50%, # c0c0c0 50%, # aaa);-webkit-border-radius: 4px;-moz-border-radius: 4px; border-radius: 4px;-webkit-box-shadow: 0 0 3px rgba (0,0,0, 0,7);-moz-box-shadow: 0 0 3px rgba (0,0,0, 0,7); box-shadow: 0 0 3px rgba (0,0,0, 0,7);} # PopularPosts1 img: hover {-moz-transform: escala (1,2) rotação (-350deg);-webkit-transform: escala (1,2) rotação (-350deg);-o-transform: escala (1,2) rotação (-350deg);-ms- transform: escala (1,2) rotação (-350deg); transform: escala (1,2) rotação (-350deg);-webkit-box-shadow: 0 0 20px rgba (255,0,0, 0,4), encarte 0 0 20px rgba (255,255,255,1);-moz-box-shadow: 0 0 20px rgba (255,0,0, 0,4), encarte 0 0 20px rgba (255,255,255,1); box-shadow: 0 0 20px rgba (255 , 0,0, 0,4), encarte 0 0 20px rgba (255,255,255,1);}

4° passo: Salve e verifique as mudanças. 

Obs. Verifique se o script não entrou em conflito com algum elemento de seu blog, pois o mesmo utiliza de efeitos webkit.

Espero que tenham gostado!

Share This :