06/01/2011

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.

menu com imagens nos links
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}


html blogger

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.
Related Posts with Thumbnails

66 comentários:

  1. Olá Fabiano, olha eu aqui de nobo, rsrsrs.
    Queria saber como implementar esse marcadores em outras parates como sidebar, como faço isso!

    ResponderExcluir
  2. Antônio Nazareth
    não sei se entendi direito sua duvida, mas para adicionar os marcadores é só entrar na pagina designer > adicionar gadget > marcadores.

    se estiver falando isso porque usamos duas listas(uma de marcadores e outra com postagens) com a mesma aparência é apenas formatação igual, somente a lista da esquerda são marcadores

    ResponderExcluir
  3. Olá, gostaria de saber como colocar uma imagem no título dos gadget's.

    Obrigado.

    ResponderExcluir
  4. Olá!
    Será que tem como personalizar os marcadores ou a lista é sempre aquele mesma, com os "pontinhos" na frente dos títulos ? Eu gostaria de colocar setinhas na frente, que apontam para o título (parecidas com as deste Blog).
    Obrigada!

    ResponderExcluir
  5. para fazer igual está neste blog é só colocar uma imagem no lugar indicado no código, esse código que postamos aqui é o mesmo que usamos para fazer os nossos marcadores com as setas

    ResponderExcluir
  6. eu querro coloca uma imagens do lado do gadgets e dos marcadores tipo gadgets de musica ai com imagem do lado.pesso para fazer um video

    ResponderExcluir
  7. ok, vou preparar um video sobre esse tutorial, mas pode ver aqui sobre Personalizar os marcadores do blog

    ResponderExcluir
  8. tentei no meu blog mas não deu, aqui está o codigo:

    .lista a{
    display:block;
    background-image: url(http://img687.imageshack.us/i/iconeg.png/);
    background-repeat: no-repeat;
    background-position: left 6px;
    padding-top:3px;
    padding-bottom:3px;
    text-indent: 15px;
    }
    .lista a:hover{background-image: url(http://img687.imageshack.us/i/iconeg.png/);background-repeat: no-repeat;background-position: left 6px}

    coloquei mas não aparece.

    blog:clubpenguincastelo.blogspot.com

    ResponderExcluir
  9. Bruno

    o link da imagem que usou está errado, tem que ser o link direto para a imagem e não para a pagina onde ela aparece...
    troque o endereço por esse aqui http://img687.imageshack.us/img687/5425/iconeg.png

    ResponderExcluir
  10. grande tuturial parabêns pelo site.

    ResponderExcluir
  11. olá fabiano! poderia me ensinar a colocar uma pagina para cada post no meu blog?

    ResponderExcluir
  12. Beatriz Larah
    para colocar um pagina para cada postagem entre em configurações >> arquivamento >> Ativar páginas de postagem? >> escolha a opção sim

    ResponderExcluir
  13. eu queria substituir as letras dos menus e colocar imagens personalizadas em vez das palavras,tem tutorial?

    ResponderExcluir
  14. para usar imagens em vez do texto dos links use esse código com o endereço de uma imagem
    <img src="endereço da imagem" border="0" />

    ResponderExcluir
  15. fabiano,mas uma vez eu aqui cara é o seguinte montei o blog aprendi quase tudo mas só falta uma coisa para da tudo certo....
    os animes que eu posto nao funfam estao em mp4.
    qual formato que posso postar ja que os mp4 nao funfam?

    ResponderExcluir
  16. esta´tentando postar videos? se for use o formato WMV, AVI

    ResponderExcluir
  17. Não consegui, entendi pouca coisa... :( Se conseguisse me ajudar eu gostaria bastante!

    ResponderExcluir
  18. esse tutorial se divide em duas partes o primeiro código que mostramos são os links e o segundo código é a formatação(aparencia) desses links

    ResponderExcluir
  19. ô Fabianoooo faz um video aí sobre como personalizar akele link lá em cima de um do lado do outro...eu naum sei colokar os links como vc, pois qd cliko na imagem ela vai direto p a pagina da rede social e o que é melhor sem precisar fazer login...eu naum sei fazer isoooo..as explicações naum me foram necessarias p essa cyberanalfabeta aki....kkkkkkkkkk
    bjks, vanessa

    ResponderExcluir
  20. MAQUIAGEM EH TUDO !!!
    no final de semana vou preparar o video

    ResponderExcluir
  21. Eu fiz um blog hoje mesmo, queria fazer um cabeçalho com os nomes dos meus arquivos, pois fiz um blog destinados a downloads.
    O cabeçalho que eu quero é do tipo "caminho~es/carretas; aí a pessoa clica e abre todos os possiveis downloads mas cada um dentro de seu tema ou caracteristica!

    ResponderExcluir
  22. Toda vez que eu coloco o codigo no Adicionar seu próprio gadget
    Digite o URL de um gadget que você deseja adicionar ao seu blog.

    Sai essa msg

    Corrija os erros abaixo.
    O URL contém caracteres inválidos

    nossa o meu blog está quase pronto só falta eu fazer esse menu usando os gadget que eu quero para abrir varios links de um mesmo tema em apenas uma janela, como se fosse um menu ou sub menu, especifico para cada tema escolhido por mim

    ResponderExcluir
  23. para criar o proprio gadget você precisa entender de programação... é bem complicado

    ResponderExcluir
  24. Bom Fabiano,
    gostaria de aprende como fazer 1 menu topo usando 1 imagem,
    tipow tenho 1 imagen pronta com os nomes tudo certinho embutido na imagen.
    mais com eu fazo para cada para dessas imagem vira 1 link?

    Ajuda ai please.

    ResponderExcluir
  25. Primeiro quero dizer que amo esse seu blog,pois aos pouquinhos to aprendendo muiiiitooooo, e quero eu conseguir personalizar o meu blog, pois infelismente é muito caro pra mandar fazer um!!! Estás de parabéns msm!!
    Mas me tira uma dúvida,sab sou artesã e passeando pela net vi um blog que amei...minha dúvida é sobre o menu que está nesse blog ele "é ligado com X", como faço??? se quiser dar uma olhada para entender o que estou falando vi nesse blog:www.ateliecrisboeque.blogspot.com
    DESDE JÁ TE AGRADEÇO MUITOOOOOOOOOOOO!!! QUE DEUS CONTINUE TE ABENÇOANDO!!!!!!!!!
    MEU E-MAIL É anaartes2000@yahoo.com.br

    ResponderExcluir
  26. o menu é feito com mapeamento de imagens.... vou pesquisar um programa para gerar os códigos pois é complicado demais para fazer manualmente

    ResponderExcluir
  27. Não funcionou, não aparece nada! Eu coloquei o código bem embaixo de 'body {' e etc porque quando eu coloco acima o meu template desaparece.

    http://it-girl-oficial.blogspot.com/

    ResponderExcluir
  28. mas é para colocar depois que fechar as chaves do body...

    veja se o endereço da imagem está correto a maior parte das vezes é esse o problema

    ResponderExcluir
  29. Como que faço para centralizar a imagem? Ficando com o texto do link abaixo da imagem centralizada?

    ResponderExcluir
  30. veja aqui sobre Posicionar imagem de fundo então aumente o valor padding-top:10px; para que o texto do link fique abaixo das imagens

    ResponderExcluir
  31. ola fabiano queria perguntar se tem algum codigo de html ou codigo de java/scrip.Que todos os titulos de gadget tenham imagens animadas ou se nao normais exemplo: (imagem ao lado)(titulo do gadget)
    tem algum codigo para isso? se tiver por favor me diga, ha! tambem se der para trocar a imagem exemplo:(imagem)(titulo)
    (imagem diferente da 1°)(titulo) me responda por favor

    ResponderExcluir
  32. ♥♥thailoket♥♥

    você poderia usar uma Imagem no título da postagem

    na verdade isso é uma imagem de fundo que pode ser um gif animado

    ResponderExcluir
  33. Cara faz um video aula como botar essas setas no lado do link... pq mecher no Codigo Html.. e fodz.. sempre da erro =\... Vlws ae. =)

    ResponderExcluir
  34. Heitor
    vou preparar esse tutorial em video e nos proximos dias faço uma publicação sobre o assunto

    obrigado pela sugestão

    ResponderExcluir
  35. Ta ok. Vou esperar esse video =)!

    ResponderExcluir
  36. Tentei e não consegui, nunca aprece a imagem, o que faço?

    ResponderExcluir
  37. Pow cara vlws ae, deu tudo certinho aki :)!!
    Você sabe me dizer se você tem algum tutorial para fazer Templates?
    Vlws ae :)!

    ResponderExcluir
  38. Heitor
    fazer templates é complicado pois o blogger usa tags proprias... é melhor usar um modelo padrão e fazer alterações nele... certamente o trabalho será menor e o resultado o mesmo

    ResponderExcluir
  39. Eu queria saber como coloca imagens com links do lado do blogger! Assim:
    Colocar a imagem na coluna de postagens

    ResponderExcluir
  40. sobre achar o body no html, veja a imagem da postagem: http://4.bp.blogspot.com/_-v7nVhXnPEc/TSXR6HfQc4I/AAAAAAAAB5Q/LBEJhW66fYU/s1600/html-blogger.jpg

    ResponderExcluir
  41. Oi eu gostaria de saber como fazer para personalizar marcadores e titulos dos post como desse site aqui : perola-do-transformice.com

    Ajuda ?

    ResponderExcluir
  42. City ville
    alterar o titulo de um gadget só é mais complicado.

    no caso dos marcadores tente usar o estilo

    #Label1 H2 {.....}

    se não der certo tente h3, mas claro no lugar dos pontinhos tem a formatação, imagem de fundo...

    ResponderExcluir
  43. Olá fabiano eu não acho esse nome body{...
    eu não entendi preocurei o html e não achei nada a o tipo , e quando acrescentei o codigo no inicio nao deu em nada

    ResponderExcluir
  44. está no começo do html, mas no lugar dos pontinhos tem códigos de formatação, por exemplo:

    body {background-color: #66ccff;margin: 0;padding:...

    ResponderExcluir
  45. não entendi velho , sera que podia detalhar mais ?
    (se não for incomodo.)

    ResponderExcluir
  46. e mesmo após este exemplo que voce colocou tentei colocar antes e depois , a imagem não apareçeu

    ResponderExcluir
  47. Eae Fabiano roberto , blz?

    Bom eu sei que isso é pedir de mais e tau mais enfim não sei fazer oque eu queria pedir é um formulario de comentário sem ser da discus.

    No entanto eu queria deleta um que ja tenho que é do inseterbase ,(euacho) porém eu queria acrescentar moderatores no meu blog entao eu queria dividir entre moderatores , autores(admin) e os usuarios que visitam

    Exemplo
    Moderatores (Cor verde)
    e o usuarios cor azul

    no comentario o usuario teria que colocar o email o nome o assunto e a mensagem no maximo com 300 caracteristicas. blz espero vc responder , abraço feliz natal. adiantado.

    ResponderExcluir
  48. @GTGMODS tem que ver nas configurações do intense debate se é possivel fazer.

    acho que nas configurações do blogger não tem essa opção porque os comentários são externos

    ResponderExcluir
  49. e como ponho a imagem ao lado dos comentários ou embaixo dos comentários, tipo o seu la em cima o numero de comentário tá dentro da nuvenzinha...

    ResponderExcluir
  50. @Lore isso vai depender muito de onde exatamente quer a imagem, mas é feito pela pagina editar html e precisa marcar a opção expandir modelos de widgets

    então achar o código dos comentarios, veja neste link Mostrar Marcadores, Comentários embaixo do Título da Postagem, lá poderá ter uma noção de como são os códigos dos comentarios

    ResponderExcluir
  51. aqui tem como fazer menu em flash?

    ResponderExcluir
  52. @Lucas sites como o flashvortex.com fazem menus em flash, mas o problema é achar uma hospedagem gratis para o arquivo (swf)

    não tem como usar flash diretamente no blogger

    ResponderExcluir
  53. Eu gostaria de saber, se existe a possibilidade de colocar esse ' icone ' na frente do Gadget das Postagens Populares!

    ResponderExcluir
  54. Fabiano... Imagem ao lado dos links dos marcadores já fiz, mas como coloco uma imagem de fundo nos marcadores?

    ResponderExcluir
  55. é do mesmo jeito que mostramos neste tutorial só que em vez de usar o estilo .lista use #Label1

    e não coloque esse trecho

    background-repeat: no-repeat;
    background-position: left 6px;
    padding-top:3px;
    padding-bottom:3px;
    text-indent: 15px;

    isso é posicionamento da imagem de fundo

    ResponderExcluir
  56. Mas, o que fiz foi exatamente
    no estilo #Label1 !

    ResponderExcluir
  57. É isso mesmo filhão!
    Eu sabia que podia contar contigo mais uma vez...
    Brigadim meu querido!

    ResponderExcluir
  58. Mas...
    Tem como fazer com os links dos marcadores?

    ResponderExcluir
  59. qual link dos marcadores? o menu ou aqueles que parecem no final da postagem?

    se for na postagem é com o estilo

    .post-labels a{...}

    senão veja o link do outro comentario que fiz

    ResponderExcluir
  60. olá Fabiano... eu consegui colocar imagem no meu menu marcadores, mas elas ficam distantes do menu... por favor me ajuda... meu blog: http://facespes2012xbox360.blogspot.com.br/

    ResponderExcluir
  61. Vini Faces entre na pagina editar html e procure por:

    .main-inner .widget {
    background-color: #000000;
    border: 1px solid transparent;
    padding: 0 15px 15px;
    margin: 20px -16px;
    -moz-box-shadow: 0 0 0 rgba(0, 0, 0, .2);
    -webkit-box-shadow: 0 0 0 rgba(0, 0, 0, .2);
    -goog-ms-box-shadow: 0 0 0 rgba(0, 0, 0, .2);
    box-shadow: 0 0 0 rgba(0, 0, 0, .2);
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    -goog-ms-border-radius: 0;
    border-radius: 0;
    }


    e troque a linha:
    padding: 0 15px 15px;

    por:
    padding: 0px 15px;

    ResponderExcluir
  62. muito bom seu blog é muito explicativo parabéns!

    ResponderExcluir