Personalizar os marcadores em lista-Efeito Hover lento

Good Morning!

 Nesta calorosa e entediante tarde de quarta feira,me sinto um tanto perdida.Meus dias tem sido muito desgastantes e só o que me alivia a tensão é escrever sobre aquilo que mais gosto.

A dica de hoje é sobre como personalizar seus marcadores em lista,colocando aquele efeito hover lento e um pequeno ícone na frente cada link.
É algo muito simples de se fazer,mas no entanto tem muitos tutoriais por ai que complicam a beça este procedimento.



Vamos la?

 Para evitar possiveis transtornos, lembre-se de sempre  fazer backup do seu template antes de realizar quaisquer procedimento,que implique alteração no seu código Html.

Vá em modelo >Editar Html>(nao há necessidade de expadir modelos de widgets).>De um Ctrl+f e procure pela sua  ]]></b:skin>.Quando encontrar copie  cole  ANTES dela,o seguinte código abaixo:

/*----------marcadores personalizados-http://diario-frustrado.blogspot.com.br/----------*/
#Label1{           
color:#382502;
font-family: 'Comic Sans Ms', cursive;/*----------nome da fonte que deseja utilizar------*/
font-size:12px!important;/*----------Tamanho da fonte------*/
line-height:15px!important;/*----------altura da fonte------*/
}
#Label1 li  {
background:url(http://2.bp.blogspot.com/-UHj07nucAHU/US_5tqj3IDI/AAAAAAAAAjM/6PykooEuTjU/s000/sidebar_li.jpg) no-repeat scroll 10px 10px transparent;/*----------subsitua pela url do ícone que ficará á frente dos links,mas nao altere as propriedades------*/
}

#Label1 li:hover {
background: #000000!important;/*----------fundo ao passar o mouse-----*/
-webkit-transition: all 0.65s linear!important;/*----------Hover Lento,se nao quiser apague esta linha-----*/
-moz-transition: all 0.65s linear!important;/*----------Hover Lento,se nao quiser,apague esta linha-----*/
transition: all 0.65s linear;/*----------Hover Lento,se nao quiser,apague esta linha-----*/
}
/*----------Fim dos marcadores personalizados---------*/

Observaçoes.
*Se ao invés de fundo colorido,voçe prefirir algo menos destacado,pode optar por bordas,que também geram um efeito muito legal combinadas com o efeito lento.Para isso apague a linha que contém "background: #000000!important;'' e adicione,no lugar desta propriedade,a seguinte regra:

border-left:10px solid #000000;/*----------troque pela cor de sua preferencia ---------*/
border-right:10px solid #000000;/*----------troque pela cor de sua preferencia ---------*/

Existem outras regras legais que também  podem ser aplicadas,para se obter efeitos diferentes.
Cabe a voçe pensar o que mais contrasta com seu layout.

Gostou do post?tem alguma dúvida?deixe seu comentário aí...