Dando estilo aos marcadores com efeito hover

DEMO

Ontem, no Facebook, recebi do Dudu Srfstinha a dica dos marcadores com efeito hover que está instalado em seu blog, o TPSO. Dei umas modificadinhas e trago a dica para vocês e os meus agradecimentos ao Dudu.

Vá até o Layout

Clique em Adicionar um Gadget

Ao abrir, clique em  HTML/Javascript

Cole então o próximo código fazendo as modificações necessárias.

<style>
/* Marcador efeito hover ----------------------------------------------- */
#Label1 {
color: #000;
}

#Label1 ul li {
list-style-type:none;
}
#Label1 li a:link{
border-left: 12px #ccc solid;
-moz-box-shadow: 0 0 5px #888;
-webkit-box-shadow: 0 0 5px#888;
box-shadow: 0 0 5px #888;
text-decoration: none;
 text-shadow: black 0.1em 0.1em 0.2em;
background: #808080;
padding: 8px 2px 8px 17px;
display: block;
color: #fff;
border: 1px ridge #5E5E5E;
border-radius:25px;
-moz-border-radius:25px;
-webkit-border-radius:25px;
}
#Label1 ul li a:hover{
color: #fff;
background: #eee;text-shadow: 0 0 0.3em #cc0000, 0 0 0.3em #cc0000, 0 0 0.3em #cc0000;
text-align: left;
-webkit-transition: all 0.15s linear;
-moz-transition: all 0.15s linear;
transition: all 0.15s linear;
border-left: 12px #cc0000 solid;
border-radius:25px;
-moz-border-radius:35px;
-webkit-border-radius:25px;
}
#Label1  li span{
-moz-box-shadow: 0 0 5px #888;
-webkit-box-shadow: 0 0 5px#888;
box-shadow: 0 0 5px #888;
text-decoration: none;
 text-shadow: black 0.1em 0.1em 0.2em;
background: #ccc;
padding: 8px 2px 8px 17px;
display: block;
color: #000;
border: 1px ridge #5E5E5E;
border-radius:25px;
border-left: 12px #cc0000 solid;
-moz-border-radius:25px;
-webkit-border-radius:25px;
}
 #Label1  li a:visited {
color: #fff;
display: block;
background: #cc0000;
border: 1px ridge #5E5E5E;
border-left: 12px #808080 solid;
}
</style>

Se você não conseguiu, faça o seguint: exclua o widget de marcadores de seu blog e depois reinstale o widget.