Fazer uma Galeria de Imagens no Blog

Às vezes queremos colocar varias imagens ou fotos na mesma postagem, mas fica um pouco esquisito, ocupando espaço demais na pagina, então uma boa solução para esse problema é organizar uma galeria de fotos ou dizendo em outras palavras fazer que todas as imagens apareçam no mesmo lugar, como um slide com miniaturas ou links que clicamos para ampliar as fotos. Veja o código:

<iframe src="http://img41.imageshack.us/img41/9807/oceanon.jpg" marginheight="0" marginwidth="0"frameborder="0" width="400" height="300"scrolling="no" name="galeria" id="galeria"></iframe><br />
<a href="http://img11.imageshack.us/img11/6259/lhlake.jpg" target="galeria">Lago</a>
<a href="http://img190.imageshack.us/img190/851/praia.jpg" target="galeria">Praia</a>


Se quiser hospede as imagens no ImageShack então pegue o endereço de cada uma subtitua no código, lembrando que a imagem que está na parte do iframe vai aparecer e as outras ficaram ocultas só aparecendo quando clicar nos links abaixo, cuidado para não pegar o código errado a url da imagem está em direct link. Outro detalhe é que se invés de usar palavras quiser usar miniatura das imagens para fazer os link é possivel basta colocar o target="galeria" no código.

A parte principal é observar target=”galeria” veja que esse é o mesmo nome que usamos logo na primeira linha name="galeria", então se for usar mais de uma vez esse código no seu blog ou site tem que usar nomes diferentes para evitar erros.

Cuidado com o tamanho das imagens elas tem que ser todas iguais no caso usei 400 por 300, esse numero também está no código do iframe, então faça os ajustes nas imagens antes de publicar. Isso porque na verdade o iframe não é transparente, ele tem fundo branco então se as imagens forem de tamanho diferente ficará aparecendo uma margem branca, além disso, elas ficaram cortadas, pois o tamanho 400 por 300 que colocar no código do iframe é fixo, ou seja, ele não se ajusta ao tamanho das imagens.

Veja também:
Banners aleatórios
Como hospedar imagens
Links dentro da Página
Script com dia da semana e do mês
Site abrindo sozinho(parent.location)

99 comentários:

  1. Adoro as tuas dicas, vou testar. Boa semana pra ti.

    ResponderExcluir
  2. Excelente dica!
    Obrigada, sempre, por dividir algo muito legal para os blogs!
    Abraços,
    Luka

    ResponderExcluir
  3. Bom dia caro.
    o seu blog é maravilhoso.
    Sua dicas são ótimas.
    Poderia me ajudar com algo?
    Gostaria de enviar um email em html, iqual ao teu! recebi perfeitino, mas quando envio para alguem com minhas imagens, não rola o slide, mas abre outra página com a foto!
    Pode me ajudar?

    Obrigado.
    http://morarbemmorumbi.blogspot.com

    ResponderExcluir
  4. marechal


    uso o outlook para enviar email, mas não tem nada de especial apenas o endereço dos meus blogs como assinatura

    ResponderExcluir
  5. essa dica é boa d+ era o q eu tava procurando por todo canto e nao achava, mas a única coisa nao legal nessa dica é a parte do tamanho da imagem q tem q fica ajustanto, mas fora isso ta massa.

    vou aproveitar a ocasião e dizer q coloquei um link direto pra esse blog na pág. ini. do meu blog, pq esse blog ja mim ajudou d+.
    se quiser uma parceria agradeço.

    freefacil.blogspot.com

    ResponderExcluir
  6. a dica nao esta bem explicada, .. não fala como por exemplo, onde hospedo o codigo pois nas postagens nao consegui colocar o codigo... o que eu faço para ficar igual a demonstração?? D:

    ResponderExcluir
  7. igor

    copiei e colei o código do jeito que está aqui no meu blog e testes e funcionou perfeitamente, talvez quando foi modificar o código apagou alguma coisa além do endereço das imagens.

    http://dicaparablogs.blogspot.com/2009/06/lago-praia.html

    ResponderExcluir
  8. Otima dica!
    Tem como fazer que ao clicar na imagem abra a imagem maior?
    abraço

    ResponderExcluir
  9. é possivel usar esse código com miniaturas, só precisa colocar imagens em vez de link, ou seja onde escrevi lago coloque assim:

    <img src="url da imagem" border="0" />

    claro que usando uma imagem já reduzida e não a mesma que será mostrada

    ResponderExcluir
  10. Adorei a dica mas tambem gostaria de saber como colocar as imagens todas do mesmo tamanho e como fazer para as imagens rolarem automáticas.
    Bjs Barbet

    Barbet@bol.com.br

    ResponderExcluir
  11. Barbet para deixar as imagens do mesmo tamanho precisa editar no seu computador, veja aqui alguns programas para editar imagens

    http://www.dicasparablogs.com.br/2008/08/programas-gratuitos-para-edicao-de.html

    e sobre banners deslizando
    http://www.dicasparablogs.com.br/2008/03/banners-deslizando.html

    ResponderExcluir
  12. Boa dica como sempre vc só dá boas dicas mas...
    onde eu colo esses códigos ? ?

    ResponderExcluir
  13. Elias, esses códigos podem ser usados em uma postagem ou como um gadget de html/javascript(pagina layout)

    ResponderExcluir
  14. ola amigos do dica para blogs, vcs poderiam me passar o codigo html para passar fofos de um lado para o outro no meu blog? tipo com a opçao marque. é quie arrumei uns dois codigos e as fotos ficam uma em cima da outra e nao uma atraz da outra com deveria fica. da pra me ajudar? veleu galera!!!

    ResponderExcluir
  15. lilian, só conheço o código marquee para fazer isso

    http://www.dicasparablogs.com.br/2008/03/banners-deslizando.html

    ResponderExcluir
  16. gostaria de saber como faço pra deixar as imagens em miniaturas lado a lado, porque no exemplo elas ficam uma em cima da outra.

    ResponderExcluir
  17. esdras
    coloque o código das miniaturas dentro disso aqui:
    <div style="display:inline">codigos das miniaturas</div>

    ResponderExcluir
  18. oi,como faço p tirar uma album de postagem??? no meu tem 2 e não sei remover...não entendo nenhum código desse...me ajude..rsrs...Bjiiim

    ResponderExcluir
  19. dannybiju
    precisa mexer nos códigos para colocar e retirar albuns, mas use nossa pesquisa tem outros jeitos de fazer um galeria de imagens ou slides no blog

    ResponderExcluir
  20. Ola.. Estou com dificuldades de fazer uma galeria no blog.
    Eu queria que quando fosse no link lago por exemplo, pudesse colocar o link na imagem do lago tb...no meu caso ele ficaria abrindo a galeria da web mesmo onde hospedo pelo picasa. Ficaria bem simples esse tipo , mas não estou conseguindo.

    ResponderExcluir
  21. existem varios jeito de fazer galerias de imagens, tem que procurar o que for mais fácil para vc

    ResponderExcluir
  22. Certo! mas nesse exemplo tem como essa imagem receber um link tb. Entao ela iria para outra página onde contém todas as outras imagens. No meu caso iria abrir a galeria do picasa. Obrigado

    ResponderExcluir
  23. neste caso não tem como colocar links nas imagens

    ResponderExcluir
  24. Olha me da uma dica rápida entao...
    O problema para mim é o internet explorer última versão, pq ja testei em outros navegadores. Eu to tentando colocar as fotos lado a lado no meu blog, para nao ficarem uma embaixo da outra. Faço pelo Dreamweaver as tabelas e coloco uma miniatura que vai abrir a galeria no picasa certo. So que as imagens somem quando está dentro da tabela e nos outros navegares fica ok. Não sei agora já viu isso? Não consigo arrumar se não for por tabelas.

    ResponderExcluir
  25. o pior é que o blogger trabalha com divs e não tabelas, precisa começar a mexer mais com CSS.

    as vezes que usei tabelas no blogger foi um desastre.

    ResponderExcluir
  26. Exato. mas pq os outros navegadores funcionam... nao posso usar pq a maioria usa o IE. Agora com CSS já usei algumas vezes no Dream... mas nao em galeria. Mas como faço em CSS galerias sem usar tabelas. Eu vou pesquisar tb.

    ResponderExcluir
  27. essa realmente é uma boa pergunta, mas somente os desenvolvedores dos programas poderiam responder.

    sempre houve diferenças entre o internet explorer e firefox, infelizmente nem todos podemos corrigir com o código, algumas coisas funcionam bem em somente um deles

    ResponderExcluir
  28. Gostei , mas como faço para colocar imagens do meu computador na galeria , ao invez de links?

    ResponderExcluir
  29. precisa hospedar as imagens no imageschack e depois montar o código

    ResponderExcluir
  30. seu blog é muito bom, no começo não entendia muito bem, mais depois que pequei o jeito consegui fazer as coisas, mais nessa dai eu não entendi muito bem o que fazer você poderia explicar com mais detalhes, ficou um pouco vago a parte dos codigos, quais colocar no lugar desses ai que você colocou.

    ResponderExcluir
  31. Twilight Fans
    o código todo é colocado pela pagina layout, adicionar gadget, html/javascript.

    as linhas com endereço das imagens podem ser quantas você quiser, basta hospedar as imagem e substituir os endereços no código.

    ResponderExcluir
  32. Fabiano, Consegue um tuto da galeria lightbox pra gente? =D

    ResponderExcluir
  33. estou terminando de testar o código do lightbox, se der tudo certo amanhã vou publicar sobre isso.

    ResponderExcluir
  34. Olá Fabiano,
    Coloquei a galeria de imagens no meu blog e ficou ótimo, mas como são dez fotos os links com os nomes das fotos ficou meio comprido um em baixo do outro, até o 4º nome dá prá ver tudo sem rolar, mas depois tem que ficar desce e sobe para clicar no nome e ver a imagem, tem como colocar os nomes lado a lado, pelo menos umas quatro fileiras de nomes cada coluna?
    Abs.,
    Fátima.

    ResponderExcluir
  35. Princess Life Bijoux
    antes de colocar os links é possivel fazer uma barra de rolagem se quiser, assim:

    <div style="overflow:auto; height:200px;border:1px solid #000000">
    link
    link
    link
    </div>

    altere o valor 200 como desejar, ele é o tamanho da barra

    ResponderExcluir
  36. Fabiano, Estou tentando colocar as miniaturas ao invés dos nomes das imagens e não estou conseguindo, tem horas que só aparecem os nomes com os links das imagens e tem horas que não aparecem nem os nomes e nem os links. O que estou fazendo de errado, qual código eu retiro e qual código eu coloco e onde devo colocá-lo. Já mudei o target="galeria" para todos os lugares no código e não dá certo... Abraços.

    ResponderExcluir
  37. coloque o código desse jeito no lugar do link de texto
    <img src="endereço da imagem" border="0" />

    apenas coloque o endereço da imagem no local indicado

    ResponderExcluir
  38. eai cara, gostei tanto da idéia que uso muito, e com muitas imagens por isso é muito ruim ficar editando, então vamos logo a questão:

    Você poderia criar um gerador onde agente coloca o link da imagem e depois aparece o código pronto, seria muito bom.

    Se você não conseguir (o que eu dúvido) tenta achar um link com algo do tipo que me ajudaria muito!

    flw

    ResponderExcluir
  39. Marcelo Bernardi
    vou ver o que é possível fazer sobre o gerador de códigos.

    ResponderExcluir
  40. Obrigado pela dica, a galeria é otima e simples, só que estou com um probela. Eu estou usando no meu blog com um script para desativar o botão direito do mouse que está funcionando em todo ele, mas na galeria ele não funciona, na foto que fica maior. O que posso fazer para ativar na galeria também?

    ResponderExcluir
  41. Caren Araujo
    infelizmente essa galeria é feita com iframe, então não tem como proteger as imagens dentro da galeria.

    ResponderExcluir
  42. Cara, graças a essa dica, com pequenos ajustes consegui finalmente uma galeria que funcione:



    Dêem uma olhada, ficou como eu queria !!!

    Valeu, galera !!!

    ResponderExcluir
  43. Fala ae Fabiano, um ótimo blog o seu, parabnes!!!

    Fabiano é o seguinte: Como faço para fazer meu abum de fotos ser mostrado como no "novo Orkut"... imagem miniaturas com barra de rolagem?

    Gostaria que vc ensinasse dando exemplo como vc fez neste post com os códigos fontes todos nos seus devidos lugares, é porque ao longo dos comentários vc foi colocando códigos e onde colocar e eu não entendi muito bem.

    desde já agradeço!!

    ResponderExcluir
  44. DJ PRANDO
    vou pesquisar sobre o assunto e fazer uma postagem sobre isso.

    ResponderExcluir
  45. cara valeu simples facil rapido leve show é 10 as postagens

    ResponderExcluir
  46. Teria como colocar somente as imagens rolando sem os links?Pq se coloco muitas imagens,fica aquela fila de links embaixo das fotosss

    ResponderExcluir
  47. Grupo de oração
    veja aqui sobre imagens deslizando Banners deslizando

    ResponderExcluir
  48. Fabiano,obrigada pela atenção.Mas deixa te falar mais uma coisa.
    O que eu quero é do jeito desse post são fotos mas o que não quero é colocar esses links embaixo delas.Entendeu??

    ResponderExcluir
  49. no lugar dos links de texto poderia colocar links com imagens em miniatura, funcionaria perfeitamente, troque o texto do link por
    <img src="endereço da imagem" border="0" />

    ResponderExcluir
  50. Entendi,crio uma miniatura,hospedo e troco.!!!

    ResponderExcluir
  51. temos diversos tutoriais sobre Hospedagem de Imagens, veja esse do link ou use nossa pesquisa para ver outras dicas

    ResponderExcluir
  52. Fabiano,olha que dica legal que achei do blog da Elke!!!
    http://templateseacessorios.blogspot.com/2010/12/gerador-de-slide.html

    ResponderExcluir
  53. achei interessante o site, vou fazer um video tutorial sobre ele no final de semana

    ResponderExcluir
  54. Brigado!! sabia o código mas naum sabia q dava pra colocar no blog tmb!!! VLW

    ResponderExcluir
  55. Muito obrigado pela dica apliquei em meu blog e deu super certo, foi realmente muito legal, seu blog é de grande ajuda Parabéns obrigado

    ResponderExcluir
  56. Tem como fazer com que os links ou miniaturas fiquem lado à lado?
    otimo post!
    valew Fabiano.

    Felipe Argôlo.

    ResponderExcluir
  57. coloquei uma galeria lightbox no meu blog,deu tudo certo, mas minha galeria tem 5 coluna, no blog apareçe com 2 colunas, porquê?

    ResponderExcluir
  58. Caro Fabiano, estou tendo um pequeno problema com iframes, pois os mesmos quando coloco o atributo HEIGHT a 100% no Mozilla firefox existe um erro, será que você conhece algum modo pare resolver este problema?

    ResponderExcluir
  59. Caio Corrêa Kawasaki
    não use porcentagem no iframe... dá erro as vezes.. tente usar um valor especifico

    ResponderExcluir
  60. Oi, sou o Igor..
    Há muito tempo quero criar uma galeria de fotos no meu blog, mas não sei como. Quero saber se eu posso criar uma galeria igual ou parecida com essa desse link http://www.amyleebrasil.com/galeria/ ??
    Você pode me ajudar a criar uma, preciso muito organizar as imagens do meu blog.
    Obrigado =)

    ResponderExcluir
  61. anonimo, isso poderia ser feito, mas seria uma pagina fora do seu blog... seria necessario saber criar paginas de internet

    ResponderExcluir
  62. Acabei de criar um blog pra mim... voltado mais para atletas e corrida de rua, so que nao sei como trabalhar com html e tenho muita dificuldade em aceratar alguns paramentros, por exemplo estou querendo postar as fotos de corridas que participo por ua associação de corredores e não sei com fazer,outra coisa que achei interessante no seu blog foi a caixa arquivos do blog por mês, tem como me passar umas dicas, se puder acessar meu blog e falar algo... http://runliving.blogspot.com/
    Desde já agradeço!

    ResponderExcluir
  63. Cleber Cabral
    os arquivos separados por mês é um gadget.

    só precisa entrar em design, clicar para adicionar um gadget e procure por arquivo

    ResponderExcluir
  64. Obrigado pela dica, era tudo o que eu procurava - e precisava. Simples e fácil!
    Deus te abençoe, meu irmão!

    ResponderExcluir
  65. Estava procurando algo do tipo a muito tempo, na verdade já estava frustado pois muitos são muito complexos, mas este é simples e fácil de se usar.
    Agradeço por ter feito um post cobre este assunto, me ajudou muito.
    Continue assim, você esta no meus favoritos.

    ResponderExcluir
  66. Coloquei o código no blogspot e funcionou direito, mas no worpess não.
    Qual o problema?

    ResponderExcluir
  67. talvez o wordpress não aceite iframe ou tenha algum outro código gerando conflito

    ResponderExcluir
  68. Hola Fabiano;muito obrigado pelas dicas.Agradeço muito pela ayuda !Meu Blog esta ficando legal só que a mi me gustaria que minha galeria de fotos ficase com botões "PROXIMO-ANTERIOR"Como poso fazer?Agradeceria enormemente que me ayudase,pr favor.

    ResponderExcluir
  69. Juan Arriaga Martinez
    ainda não fiz tutoriais sobre isso...

    estamos aguardando para ver se o blogger reativa o lightbox que funcionou uns dias no mes de setembro

    mas vou procurar um código que não seja muito complicado para fazer essa galeria do jeito que você falou.

    ResponderExcluir
  70. Fabiano;estoy aguardando por ese codigo!Una vez mas agradeço sua atenção.

    ResponderExcluir
  71. Fabiano, como que fa zpara os principiantes.? Nao entendi onde colo esse codigo, nem quando escolho as imagens.

    ResponderExcluir
  72. @Maria Tereza Fartes o código é para colocar em um gadget de html/javascript

    mas infelizmente alguns códigos são complicados e não tem jeito mais simples de fazer por enquanto

    ResponderExcluir
  73. Cara blza?Parabéns pelo post...será que da para aumentar o tamanho da imagem principal...consegui fazer tudo direitinho, inclusive com a imagem no lugar do link (imagem pequena) só que quando clico no link a imagem principal é sempre do tamanho 400 x 300 da para aumentar a imagens??Aguardo a sua resposta e mais uma vez parabéns

    ResponderExcluir
  74. você pode modificar como quiser o tamanho das imagens só precisa alterar os valores 400 e 300 no código e usar as imagens no tamanho certo (fazer as imagens no tamanho correto e não alterar o tamanho da imagem apenas com códigos)

    ResponderExcluir
  75. poderia me passar o código para deixar os botoes
    "lago e praia" do lado do slide em vês de ficar embaixo do mesmo.obg

    ResponderExcluir
  76. onde está o

    a href=.....


    coloque style='float:left' para deixar o link a esquerda. O código fica assim:

    a style='float:left' href=....


    e use a palavra right em vez de left para fazer o mesmo do lado direito

    ResponderExcluir
  77. obrigado! funciono legal, agora teria como deixar a imagem clickavel? tipo quando click-se, ela apareceria ampliada em outra pagina.

    ResponderExcluir
  78. com esse código não tem como clicar na imagem

    ResponderExcluir
  79. Olá, tenho um blog do tipo DIY. Como faço para ter uma página com uma galeria com imagens de todos os posts, separados por assunto, para que a leitora escolha qual projeto quer ver?

    Grata
    http://mulherpreciosa.blogspot.com.br/

    ResponderExcluir
  80. Vera olhe esse link:
    Gadget para Mostrar Imagens em Miniatura dos Posts Recentes


    lá você pode configurar quantas imagens quer mostrar mas não exagere na quantidade senão seu blog fica lento demais

    ResponderExcluir
  81. Tem como deixar a imgem grande centralizada no meio da pagina se pder mim passar agradeço

    ResponderExcluir
  82. poderia centralizar as imagens usando a tag center antes e depois do código que mostramos:

    < center >
    código dos slides
    < / center >

    ResponderExcluir
  83. Fabiano... Tem como mudar a foto central?
    Aquela do iframe?

    ResponderExcluir
  84. a foto inicial que aparece no iframe é essa aqui:

    iframe src="http://img41.imageshack.us/img41/9807/oceanon.jpg"

    só precisa trocar o endereço da imagem

    ResponderExcluir
  85. Fabiano... Poderia me dizer como é feito essa galeria feita neste espaço?
    http://www.marcelocastilhofestas.blogspot.com.br/#!http://marcelocastilhofestas.blogspot.com/2012/10/15-anoslilas.html
    Eu queria muito fazer uma assim!
    Pode me ajudar?

    ResponderExcluir
    Respostas
    1. isso é um template dinâmico do blogger.

      só precisa entrar na pagina modelo > personalizar e escolher um template dinamico

      Excluir
    2. Fabiano meu Filho...
      Tem como colocar uma cor ou uma imagem de fundo?

      Excluir
    3. infelizmente não tenho como testar isso pois não tenho blogs usando esse template.
      mas veja no designer do modelo se tem a opção de trocar o background

      Excluir
  86. Tem como mudar o plano de fundo sim Fabiano
    Aliás, tem muitos outros recursos.
    Brigadim pela sugestão.

    ResponderExcluir
  87. Bom dia!
    Onde eu colo esse código?
    Eu uso o blogger e tenho uma página dentro do bloco destinada para as fotos.
    Desde já agradeço!

    ResponderExcluir
  88. pode usar o código dentro de uma postagem ou da pagina que falou para montar a sua galeria.

    caso o código não funcione veja nas configurações na pagina de postagem se está marcada a opção para executar o html (não mostrar literalmente)

    ResponderExcluir