Galeria de postagens com imagens em miniatura

em 1 de agosto de 2013

Galeria de postagens com imagens em miniatura
Oi, leitor!
O gadget que vou compartilhar com você é muito legal e dá um visual bem bonito, especialmente se você posta imagens bonitas, ou se posta fotos de trabalhos artesanais, por exemplo.
Trata-se de uma galeria de miniaturas, com link para suas postagens recentes.
Veja como fica:

Demonstração do tutorial


Este gadget é nativo do Blogger, bem leve e muito fácil de instalar.
Para ter em seu blog é muito simples:
Acesse a aba Layout e clique Adicionar gadget.
Na janela de opções escolha HTML/JAVASCRIPT e quando abrir cole este código:

Copiar o código


Alterações:
Onde está ENDEREÇO DE SEU BLOG coloque, claro, o endereço completo de seu blog, começando com http.
Em var imgDim = 50; altere o número 50 caso queira miniaturas maiores;
Em var numberOfPosts = 22; altere o número 22 pela quantidade de postagens que deseja exibir na galeria.
Em  max-results=22 troque 22 pela quantidade de posts que definiu em var numberOfPosts = 22
Não apague as aspas, nem nenhum outro sinal, tá?

Bem facinho, né?

Alguém que escreve. Especialista em si mesma. Leitora que lê muito menos do que gostaria. Blogueira por paixão e profissão. Propriedade da Princesa e da Menininha, e de um cachorrinho muito levado chamado Bloguinho. Tentando viver. Sempre.

42 comentários , comente também!

  1. Oi Elaine!
    Que coisa mais fofa!
    Vou tentar colocar no meu bloguito e depois te aviso!
    Beijinhos,
    Cris

    ResponderExcluir
  2. Olá Elaine, você sempre compartilhando dicas ótimas... mas tenho medo de deixar tudo atrapalhado no HTML... esta dica é fácil... mas não consigo copiar... tem alguma coisa que impede...
    Se puder me ajudar... agradeço.
    Paz e Luz
    Bj
    Graça

    ResponderExcluir
    Respostas
    1. Graça, para copiar qualquer código do blog pare o mouse sobre ele e clique no primeiro ícone que aparecer.
      Vai abrir uma janelinha com o código livre para ser copiado.
      Certinho?
      beijossss

      Excluir
  3. Já coloquei as fotinhos no blog! AMEI!!!!
    Obrigada, querida!
    Beijocas,
    Cris

    ResponderExcluir
  4. Gadget testado e aprovado, ótimo!
    Muito obrigado Elaine, parabéns!

    ResponderExcluir
  5. Olá Elaine :)
    Eu gostaria de saber como colocar uma galeria deste género mas só com posts de um determinado marcador e só para ser mostrado nesse marcador. Será que pode mostrar como se faz?
    Obrigada!

    ResponderExcluir
    Respostas
    1. Eliana, nunca tentei, mas vou experimentar, se der certo aviso aqui.
      beijossss

      Excluir
  6. Elaine eu experimentei colocar 20 post mas só aparecem 18.
    É isto mesmo?

    ResponderExcluir
  7. Eliane, amei, funcionou, mas algumas imagens ficaram cinza, porque será?

    ResponderExcluir
    Respostas
    1. Hum, não sei, será que elas tem fundo transparente e por isso assumem o cinza?
      Não sei mesmo...

      Excluir
  8. Estou passeando por aqui e testando as novidades...gostei muito desse gadget, o código funciona certinho, adorei! :) Um abraço!

    ResponderExcluir
  9. Ficou super show!!! Gostei bastante!!!

    O bom é que é bastante simples, fácil de colocar e você posiciona onde quiser, com os numeros de postes que queira...

    Valei pela dica!!!

    ResponderExcluir
  10. Fiz e deu certo!
    Amei!
    Valeu Elaine!
    bjos

    ResponderExcluir
  11. Elaine, essa dica é mesmo fácil de executar... até eu dou conta (acho)... rs. Vou tentar!
    Abraço!

    ResponderExcluir
  12. Elaine... eu fiz e ficou uma graça! Por enquanto está ao pé da página. Vou pensar em um lugar bacana para colocar... Amei!
    ;)

    ResponderExcluir
  13. Olá Elaine! O código funciona, só com 18 imagens. Coloquei 25, mas só aparece 18. Você pode rever o código?
    Parabéns pelo gadget!

    ResponderExcluir
    Respostas
    1. Como eu digo no texto o código é nativo do Blogger e em geral 18 é a quantidade máxima de posts, depende do seu template. O Blogger limita para que não fique pesado demais.

      Excluir
  14. tem como colocar essa galeria por marcadores?

    ResponderExcluir
    Respostas
    1. Que eu saiba, não.
      Nunca testei, mas pode tentar colocando o endereço completo do marcador ao invés do endereço do blog.
      bjssss

      Excluir
  15. Olá Elaine!
    Mais uma dica sua que deixa o meu blog ainda mais bonito
    Obrigada!
    Eu consegui alterar o tamanho das fotinhas, mas queria aumentar o número delas e não consegui. Continua aparecendo só 18. Tem como mudar isso? Eu não sei como. Me ajuda?
    Beijos e sucesso pra você lindona!
    http://dulcineiadesa.blogspot.com

    ResponderExcluir
  16. Não dá para copiar e colar o cpodigo

    ResponderExcluir
  17. Elaine, queria que as miniaturas ficassem lado a lado... como faço?

    ResponderExcluir
    Respostas
    1. Pauline, para colocar na horizontal diminua a quantidade de posts para uns 5 ou 6 e altere o tamanho das miniaturas, de 50 para uns 100px.
      Faça testes, depende do seu template e do lugar onde quer colocar.
      bjssss

      Excluir
  18. Eu coloquei no meu blog mas na imgfloat estava pra esquerda e quando eu mudo para center, as imagens de posts ficam um em baixo da outra, como uma lista, e nao horizontamente como quero, o que faço?

    ResponderExcluir
  19. Eu coloquei no meu blog mas mudei o imgfloat (posição da imagem) de left(esquerda) para center pretendendo que a imagem se centraliza-se mas ao mudar as imagens ficaram uma em baixo da outra como uma lista, o que faço para que ela se centralize na tela?

    ResponderExcluir
  20. faço tudo corretamente mais não da certo ja tentei de tudo como eu sou noob ;(
    quartetas.com

    ResponderExcluir
  21. Acabei de aplicar no blog e amei demais!

    ResponderExcluir
  22. Interessante, mas no meu blog eu apliquei em uma página separada que chamei de fotos e deu certo, usei css para poder modelar.

    O código css que usei foi este:
    <"style">
    #bp_recent img{width:100px!important; height:80px;!important; margin:5px!important;}
    <"/style">

    Com este código eu nem precisei mexer no tamanho das imagens no seu código e ainda coloquei espaço de 5px de uma pra outra.
    Obrigado pela dica.
    Obs: Tive que aplicar umas aspas na tag style porque não é aceita no comentário, para quem quiser usar é só tirar as aspas.

    ResponderExcluir
  23. Elaine, por que no meu blog não aparece pelo menos uma foto de cada post? Só em algumas aparece a foto. Por favor, me dá uma ajuda? Grata
    http://mulherpreciosa.blogspot.com.br/

    ResponderExcluir
  24. Gostei muito, bem fácil mesmo. Mas eu não consegui colocar centralizado :(
    Mas vou continuar tentando!

    Obrigada
    Rachel Fiuza
    www.rachelfiuza.com

    ResponderExcluir
  25. Amei , ameiiiiiii. Obrigada. Vou te indicar sempre. Bjsssss

    ResponderExcluir
  26. Elaine,coloquei no meu blog,deu certinho.
    Obrigada valeu,beijos

    ResponderExcluir
  27. O meu esta ficando duplicado ( estou usando no rodapé)
    coloquei numero de 5 postagens e duplica tudo em baixo

    ResponderExcluir
  28. Pergunta: coloquei nos meus blogs as miniaturas, porém em alguns aparecem imagens dos posts em outras não. como faço para imagem aparecer em todos? Seguem endereços dos meus blogs, caso vc possa olhar. Obrigada!
    http://coisinhasdakikaartesanato.blogspot.com.br/
    http://organizevocemesmosuasfestas.blogspot.com.br/

    ResponderExcluir
  29. Olá, teria como colocar essas imagens rolando pro lado uma a uma?

    ResponderExcluir
  30. Olá! tem como fazer esse gadget mostrar apenas postagens de determinado marcador?

    ResponderExcluir

Olá! Muito obrigada por ler meu blog e obrigada também por se dispor a comentar meus posts. Seja muito bem-vindo(a)!

Importante!
Devido à falta de tempo hábil eu não me comprometo a responder perguntas referentes aos tutoriais postados neste blog.
Pedidos de ajuda individual serão respondidos conforme o meu tempo e disponibilidade permitirem.
Por favor, entenda: comentários sem relação alguma com o post não serão liberados e nem respondidos.

Para saber mais sobre a melhor forma de utilizar este blog leia Termos de uso do blog.



Muito obrigada, fique à vontade para interagir.
Mas lembre-se:
Gentileza, educação e boas maneiras servem também para a vida nos blogs…