Fazer Menu com Imagens ao lado dos Links

Alguns templates para blogger já oferem imagem nos links do blogger mais para você que prefere o template padrão do blog vamos ajuda-lo :)

Vá em adicionar um gadget escolha a opção html/javascrip e cole o codigo :

<div class="lista">
<a href="Link aqui" target="_blank">Nome</a>

<a href="Link aqui" target="_blank">Nome</a>
</div>

Você pode editar os links "Link aqui"   ou seja é para onde deve ser redirecionada a pessoa que clicar no link.

Onde tive escrito "Nome" É onde você deverá colocar o nome que irá aparecer para a pessoa clicar no link ex. Clique aqui!  

Ta agora vá em design/ editar html  e procure por body{....  e antes dele coloque :

.lista a{
display:block;
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPzgjdseXOxBt3Q-1RhV8NgCCsqm4Q6FOLbN8wH31KqsKzm3zphIq3DNIndloHTmDk5q-Z8FtKpUrhZp8oGSulBDnAggN0yZpnEoQIdeFfPLoYPV-vcLsXy7ocn76R1cG7FRU98gXTpg/s1600/li.gif);
background-repeat: no-repeat;
background-position: left 6px;
padding-top:3px;
padding-bottom:3px;
text-indent: 15px;
}
.lista a:hover{background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPzgjdseXOxBt3Q-1RhV8NgCCsqm4Q6FOLbN8wH31KqsKzm3zphIq3DNIndloHTmDk5q-Z8FtKpUrhZp8oGSulBDnAggN0yZpnEoQIdeFfPLoYPV-vcLsXy7ocn76R1cG7FRU98gXTpg/s1600/li.gif);background-repeat: no-repeat;background-position: left 6px}

Onde tiver escrito endereço da imagem é onde você deve colocar o link da imagem , mais aviso tem que ser uma imagem pequena sugiro que coloque 10x10px. ou menor, mais se quiser a imagem daqui no blogger eu mando :

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPzgjdseXOxBt3Q-1RhV8NgCCsqm4Q6FOLbN8wH31KqsKzm3zphIq3DNIndloHTmDk5q-Z8FtKpUrhZp8oGSulBDnAggN0yZpnEoQIdeFfPLoYPV-vcLsXy7ocn76R1cG7FRU98gXTpg/s1600/li.gif

Se quiser deixar igual o nosso coloque esse link : 

.lista a{
display:block;
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPzgjdseXOxBt3Q-1RhV8NgCCsqm4Q6FOLbN8wH31KqsKzm3zphIq3DNIndloHTmDk5q-Z8FtKpUrhZp8oGSulBDnAggN0yZpnEoQIdeFfPLoYPV-vcLsXy7ocn76R1cG7FRU98gXTpg/s1600/li.gif);
background-repeat: no-repeat;
background-position: left 6px;
padding-top:3px;
padding-bottom:3px;
text-indent: 15px;
}
.lista a:hover{background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPzgjdseXOxBt3Q-1RhV8NgCCsqm4Q6FOLbN8wH31KqsKzm3zphIq3DNIndloHTmDk5q-Z8FtKpUrhZp8oGSulBDnAggN0yZpnEoQIdeFfPLoYPV-vcLsXy7ocn76R1cG7FRU98gXTpg/s1600/li.gif);background-repeat: no-repeat;background-position: left 6px}

Clique em salvar e pronto!

Duvidas???            Faça seu comentário!!!