Deslizando links utilizando o CSS3 em blogs do Blogger

O nome deste efeito é transition, que em português significa transição. Ele serve para deixar tudo mais "bonito". Ao passar o mouse sobre algum link em lista em marcadores, eles se movimentaram, indo para a direita(mais precisamente).


Você pode colocar em todos os links de seu blog, mas, eu recomendo colocar somente nas listas(ol, ul), pois se você colocar em todos os links, todo o texto se movimentará também. Como citei acima as propriedades ol e ul, você se lembra do tutorial? Reveja-o para facilitar a instalação deste efeito:

• Propriedades CSS List - Objetos (ul, ol, li) - Categoria Blogger

Bom, agora que vocês já reviram a postagem, vamos voltar ao assunto principal, não é mesmo?!

1. Faça o login no Blogger e clique na guia Modelo, depois clique no botão Editar HTML.

2. Pressione Ctrl+F para abrir o Localizador de seu navegador e procure pela linha:

ul li, ol li

ou

ul, li

3. Substitua o código referente a eles e cole este:

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;}

Ficando assim:

Normal:

list-style:none;background:url(http://categoriablog.webs.com/Imagens/bullet_blue.png) no-repeat 0px 7px;padding:0px 0px 0px 12px;margin:0px 0px 0px -12px;border:none;}

Modificado com o código:

.post-body ul 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;
}

4. Caso seu template, não possua estas tags, você deverá pressionar Ctrl+F para abrir o Localizador de seu navegador e procure pela linha:
]]></b:skin>
5. Imediatamente, acima desta tag, cole este outro 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;
}

6. Agora, em qualquer uma das ocasiões, clique em Visualizar e se estiver tudo correto, clique em Salvar.
Lembre-se! De mudar de acordo com seu gosto as tags padding, que aparece duas vezes nos códigos! E novamente lembre-se que os códigos do passo 3 são meus e podem estar diferentes em seu HTML!
Pronto! Espero ter te ajudado neste efeito tão legal! Ainda dúvidas? Deixe seu comentário!