Tutoriais: Marcadores em hover

Hoje, resolvi mudar um pouquinho e trazer dois tutoriais em hover para       vocês! Os dois são muito fáceis, só precisa de uma tabela de cores (já está editado em rosa, mas se quiser mudar clique aqui e terá mais de 100 cores).

Os dois tutus são de como personalizar os marcadores / tags / etiquetas do seu blog e ao passar o mouse muda de cor rapidamente!

Então vamos lá?

Primeiramente os créditos: vi esse tutorial no Sweet Teen que deu os créditos para Kawaii World.

Se você não tem ainda adicionado o gadget "Marcadores", adicione.

Procure por ]]>

Cole um dos dois códigos abaixo acima da tag procurada.

Para o estilo 1 que é esse:

Cole esse cód:

.widget ul, .widget #ArchiveList ul.flat { list-style: none; padding: 5px; } .widget ul li, .widget #ArchiveList ul.flat li { text-align: center; border-bottom: dotted 1px #d5d5d5; -webkit-transition-duration: .50s; } .widget ul li:hover { background: #f4f2f4; -webkit-transition-duration: .50s; }

Para o estilo 2 que é esse que estou usando no meu blog:

 

Escolha esse:

.widget ul, .widget #ArchiveList ul.flat { list-style: none; padding: 5px; } .widget ul li, .widget #ArchiveList ul.flat li { background-color: #f4f4f4; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; padding: 5px; margin: 2px; border-bottom: solid 1px #e3e1e2; text-align: center; -webkit-transition-duration: .50s; } .widget ul li:hover { background: #ffcad4; border-bottom: solid 1px #fcb0be; -webkit-transition-duration: .50s; }

Verifique se estiver tudo certo, se der erro apague o código que colocou e coloque novamente.
 É simples, fofo e você pode personalizar do seu jeito!
Beijos.