Fazer Menu com Imagens ao lado dos Links

Quando fazemos uma lista de links no blog podemos colocar uma imagem ao lado de cada link para ficar mais bonito, isto pode ser feito colocando setinhas ao lado dos links ou alguma outra imagem que podem ser gifs animados como utilizamos muitas vezes em nossos blogs. Veja também como fazer um menu horizontal.

Esse tutorial mostrará como colocar imagens do lado dos links utilizando um menu feito com um gadget de html/javascript, mas se quiser pode ver aqui como aplicar esse mesmo estilo de formatação em qualquer gadget do seu blog, por exemplo, nos marcadores ou qualquer outro.


Entre na pagina designer >> adicionar gadget >> html/javascript e coloque os links que desejar usando esse código como exemplo:

<div class="lista">
<a href="http://www.dicasparablogs.com.br" target="_blank">Dicas para Blogs</a>
<a href="http://www.frasescurtas.com.br" target="_blank">Frases Curtas </a>
</div>

Se quiser que os links abram na mesma janela apenas apague target=”_blank” de cada linha. Por enquanto os links ainda têm a aparência normal sem as imagens ao lado, vamos fazer isso em seguida.

Agora entre na pagina editar html e coloque o trecho abaixo, nós sugerimos colocar essa parte do código que é a formatação dos links no inicio do html antes da tag body{.... como você pode ver na imagem logo após o código.

.lista a{
display:block;
background-image: url(endereço da imagem);
background-repeat: no-repeat;
background-position: left 6px;
padding-top:3px;
padding-bottom:3px;
text-indent: 15px;
}
.lista a:hover{background-image: url(endereço da imagem);background-repeat: no-repeat;background-position: left 6px}

A imagem de fundo que você vê nos códigos é o que aparecerá ao lado de cada link, então você pode hospedar e trocar a imagem como desejar, apenas tome cuidado para usar o endereço certo da imagem.

Também altere o valor que está em text-indent: 15px; para a largura da sua nova imagem. Isso é a margem (recuo do texto) para que o link não fique por cima da imagem.

Outro ajuste necessário é o valor background-position: left 6px; este numero 6 faz a imagem ficar mais para cima ou para baixo conforme mudar o numero, veja mais detalhes sobre Posicionar imagem de fundo. Então é só fazer testes e ajustes até que seu menu ficar do jeito que desejar.