Personalizando os marcadores

Uma leitora me pediu para ensinar a personalizar os marcadores do mesmo modo que fiz no meu outro blog.  Então estou ensinando. Antes de tudo queria deixar claro que o tutorial é do blog Chá & Cupcake, não fui eu quem fiz.

Eu uso essa personalização aqui no blog também, mas aqui eu uso hover, no meu outro blog não.

O resultado:

1- Vá no HTML do seu blog, aperte CTRL+F e procure por: 

/b:skin

2- Acima disso, cole:

.sidebar ul li {
list-style: disc url( http://i171.photobucket.com/albums/u300/ferny-dust/sozai/bullets/13.gif );
font-size:13px;
vertical-align: top;
padding: 7px 0px 4px 0px;
margin-left: 7px;
border-bottom : 1px dashed #ccc;
}
.sidebar ul li:hover {
list-style: disc url(http://i171.photobucket.com/albums/u300/ferny-dust/sozai/bullets/16.gif );
font-size:13px;
vertical-align: top;
padding: 7px 0px 4px 0px;
margin-left: 7px;
border-bottom : 1px dashed #ccc;
}

A parte de vermelho é a URL do mini gif. O de cima é o normal, o de baixo quando passa o mouse.

Como eu disse, no meu outro blog eu tirei o hover, mas o tutorial original tem, então deixei assim mesmo. 

Alguns mini-gifs:

   ------    ------   ------   ------    ------    

Mais aqui e aqui.

Caso não queira mexer com HTML, coloque o código entre uma tag Style dentro de um Gadget de HTML/JavaScript. Exemplo:

<style> código da personalização </style>

OBS: O código também se aplica ao Gadgets de páginas e de postagens populares.

Meus querides! Caso vocês gostem desse blog e queiram continuar me acompanhando, eu ainda escrevo, mas em outro blog. Não posto apenas tutoriais, mas continuo escrevendo e falando de vários assuntos, inclusive a blogosfera. Caso queira visitar (sério ótimo uma visita): clique aqui para ir ao blog Serenar