Efeito de Transição em CSS3 em Listas

• Exemplo de Lista com o Efeito Transição CSS3
• Exemplo de Lista com o Efeito Transição CSS3
• Exemplo de Lista com o Efeito Transição CSS3

Olá querido leitor do Tecnoblog, neste tutorial venho trazendo um efeito bem legal também.
Neste efeito, o efeito transition ( ou transição ) também participara, novamente né, mas vamos lá.
Como você viu no exemplo acima o efeito e bem legal.
Este efeito eu o vi em vários blogs e sites, Blogando Com Facilidade , Designer Effects e etc...
Mas para usar este efeito eu recomendo usa-lo só em listas.
Mas vamos começar o tutorial:


Começando o tutorial:
1. Acesse o Painel Blogger e clique na Guia Modelo.
2. Depois clique em Editar HTML
3. Depois segure as teclas CTRL+F (atalho de busca na página) e procure por:

]]></b:skin>

4. E acima dele cole o seguinte código:

ul li, ol li {line-height: 20px;list-style-position: inside;list-style-type: disc;padding: 0;transition: all 0.4s ease;-webkit-transition: all 0.4s ease;-o-transition: all 0.4s ease;-moz-transition: all 0.4s ease;}
ul li:hover, ol li:hover {padding: 0 10px;}

5. Clique em visualizar, e se estiver tudo como desejado clique em Salvar Modelo.


Atenção: Caso no seu blog não ocorrer tudo certo, ou estiver com alguma deformação, você terá que seguir fazer esta pequena modificação.
Para este problema, em que em vários eu já vi preguntando como retirar, ensinaram, então por isso também vou ensinar como remover o problema.
 O problema é: pois em alguns blogs quando colamos o código do 4 passo, o blog ficara com pontos pretos, em vários casos, até no menu do blog.
Mas se em seu blog não ocorrer o problema citado, não precisara modificar nada.


Então você terá que substituir o código do 4 passo por este.

.post-body ul li, .post-body ol li {line-height: 20px;list-style-position: inside;list-style-type: disc;padding: 0;transition: all 0.4s ease;-webkit-transition: all 0.4s ease;-o-transition: all 0.4s ease;-moz-transition: all 0.4s ease;}ul li:hover, ol li:hover {padding: 0 10px;}

• Qualquer outra duvida, Comente!