Personalização de links - menu transition mais imagem

Fala turma da Designer Storm, neste tutorial vou ensinar a personalizar seus links em css

/* Links com efeito designer Storm */
.lista a{
display:block;
background-image: url(deixem em branco se não quiserem efeito);
background-repeat: no-repeat;
background-position: left 6px;
padding-top:5px;
padding-bottom:3px;
text-indent: 15px;
}

.lista a:hover{background-image: url(Imagem que aparecerá ao link ir para frente);background-repeat: no-repeat;background-position: left 6px height:17px;
 font-family:Arial;fonte
 text-indent: 40px; tamanho do texto
 -webkit-transition: all 0.20s linear; não edite
 -moz-transition: all 0.20s linear; não edite
 -o-transition: all 0.20s linear;  não edite
 transition: all 0.20s linear;}  não edite 

Obs: ao colocar o código no seu layout apague as observações para não dar nenhum erro xD

Para adicionar os links no seu blog basta ir em adicionar gadget e depois html/javascripit e adicionar o seguinte código :

<div class="lista"><a href="url do link">seu texto aki </a></div>