Galeria de postagens recentes com exibição horizontal

em 1 de maio de 2014

galeria de postagens recentes com exibição horizontal
Oi, leitor!
Vou compartilhar com você, hoje, um recurso que me pediram faz tempo: Galeria de postagens recentes exibida na horizontal.
Eu já mostrei aqui, há um tempo, a Galeria de postagens recentes com imagens em miniatura.
Clique aqui e veja:
Galeria de postagens recentes com imagens em miniatura

Esta que vou ensinar hoje é diferente.
Ela exibe imagens maiores, na horizontal.

Veja como fica, se for feita certinho:

Demonstração do tutorial

Para instalar em seu blog é bem facinho:
Acesse a aba Layout de seu blog. Clique em Adicionar um gadget e dentre as opções escolha HTML/JAVASCRIPT.
Na caixa que expandir cole este código:

Copiar o código

Note que marquei em pink os trechos que você pode modificar para que se adapte ao seu blog.
E o principal: não esqueça de colocar o endereço completo de seu blog, sempre começando com http.
Depois de alterado à seu gosto salve e arraste para onde deseja que a galeria fique.
Salve as alterações de Layout.

Dicas especiais e importantes:
Essa galeria precisa ser instalada onde caiba: acima da área do post, abaixo do cabeçalho ou no footer do blog.
Na sidebar não dá certo, ela fica desalinhada, ok?
E não pode usar ambas as galerias: opte por esta que ensino hoje ou pela Galeria com imagens em miniatura que mostrei no link acima.
Faça testes até achar a quantidade, o tamanho das imagens e o local mais adequado para instalar sua galeria.

Viu que facinho que é?

Para usuários avançados:
Modifiquei e hospedei o arquivo javascript que faz o gadget funcionar em minha conta Tumbrl.
Mas se você quiser acesso ao arquivo .js pode copiar e hospedar em seu próprio host.
Aqui o arquivo:

Abrir o arquivo .js


Quer ver mais dezenas de Dicas para blogs, tutoriais e novidades?
Clique aqui.
E turbine seu blog!

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.

40 comentários , comente também!

  1. Elaine vc sempre surpreendendo... ótimo post!

    ResponderExcluir
  2. Elaine, vc é 10!
    Sempre compartilhando as dicas e processos pra lidar com os temidos (pelo menos por mim) HTML. Uhhh, só de escrever, já fico tensa... hahahhaa!
    Obrigada sempre!
    Bjns
    :)

    ResponderExcluir
  3. Tentei colocar no meu blog e não consegui.
    Apareceram só os quadradinhos com as fotos das postagens na sidebar, estáticas e lá em cima.
    Tentarei mais vezes, apesar de ainda preferir aqueles quadradinhos embaixo da postagem.
    Bom final de semana.
    Beijos.

    ResponderExcluir
    Respostas
    1. Jô, se já tiver uma galeria não vai dar certo, terá que optar por uma ou por outra pois ambas conflitam.
      bjssss

      Excluir
  4. Oi Elaine, ficou ótimo! Deu certinho, a única coisa que não saiu foi o Título que coloquei e quando mudei do False para True para aparecer o resumo, também não veio..

    Saberia porque? Beijos, obrigada

    ResponderExcluir
    Respostas
    1. Hum, não sei dizer.
      Nos meus testes deu certo...
      Pode haver algo em seu blog que esteja causando conflito...

      Excluir
  5. Super legal! fazia tempo que eu estava tentando colocar uma galeria assim no meu blog!
    http://amandacristina14.blogspot.com.br/

    ResponderExcluir
  6. Elaine, deu certo \O
    Mas, eu coloquei ele abaixo das postagens, no meu blog utilizo o 'leia mais', não tem como colocar abaixo do leia mais ? Ou se não tiver, quando entro na postagens, a galeria de postagens recentes fica abaixo dos comentários, para mudá-la de lugar, seria apenas utilizando o javascript ?
    Obrigada!

    ResponderExcluir
    Respostas
    1. Priscila, nesse caso a opção é realmente colocar o gadget acima da área de postagem.
      Se colocar abaixo ele sempre aparecerá depois dos comentários porque o local de exibição é ali, no footer.
      Para colocar postagens relacionadas, e não essas, recentes, experimente esse tutorial:
      http://www.elainegaspareto.com/2013/08/postagens-relacionadas-com-miniaturas.html

      As miniaturas aparecerão ao final do post, após o Leia mais.
      bjssss

      Excluir
  7. Gostei já tenho :d beijinho

    Page: http://sweetlifeinspiration.blogspot.pt/
    Fanpage: https://www.facebook.com/sweetlifecristina?ref=hl

    ResponderExcluir
  8. Elaine, esse que ta hospedado no seu tumblr eu coloco direto no html do blog certo? Eu coloco antes de ]]> ?

    beeijos floor

    ResponderExcluir
    Respostas
    1. Yane, não precisa ser no código fonte não, é um gadget do tipo HTML/JAVASCRIPT.

      Excluir
  9. Olá Elaine, bom dia!
    Como faço para acrescentar somente o título das postagens embaixo das imagens?

    Obrigada, acompanho sempre seu blog e dicas!

    ResponderExcluir
  10. Super dica Elaine compartilhei !!!
    Beijinhos
    Deus abençõe

    ResponderExcluir
  11. Elaine como faz para aparecer o nome do post quando o cursor está em cima do gadget? tentei trocar o "false" por "true" mas não funcionou :(

    ResponderExcluir
    Respostas
    1. Quando o cursor está sobre cada imagem aparece o nome do post.
      Mas se quer que esse título apareça sempre nesse não dá certo,
      Em breve posto outro tipo.

      Excluir
  12. Olá estou tentando colocar no meu blog, gostaria de saber como modificar a altura e a largura das imagens, por que eu quero colocar poucas imagens, ai elas ficam muito grandes.

    Agradeço

    ResponderExcluir
    Respostas
    1. Carolina, no código está marcado como alterar os tamanhos, mas será sempre uma imagem quadrada, não dá pra alterar largura e altura separadamente.

      Excluir
  13. deu certo, mas gostaria de alinhar um pouco mais pro centro, como faço?

    ResponderExcluir
    Respostas
    1. Eloíza, experimente ir ajustando o tamanho das miniaturas. Não dá pra centralizar, infelizmente.

      Excluir
  14. Eliane, tem como pôr legenda nas imagens?

    ResponderExcluir
  15. Olá Elaine. E para colocar título das postagens junto às miniaturas, como faço?

    Tu só faz o blog inteiro ou poderia fazer somente este trabalho de colocar a galeria com titulo para mim?

    ResponderExcluir
    Respostas
    1. tem a opção lá no html, está false e vc coloca true

      Excluir
  16. Oi Elaine, eu tinha feito no meu blog teste e deu super certo,mas ai eu baixei o blog teste e foi instalar no blog original e agora sumiu, não aparece nem em um e nem o outro :( como são os mesmo códigos nos dois eu não sei o que posso fazer pra arrumar! Já tentei de tudo e NÃO FOI MUDADO NADA!

    ResponderExcluir
    Respostas
    1. Experimente recolocar, talvez dê certo.
      Exclua o anterior, e recoloque.
      Ah, e para aparecer o blog tem que ser público, tá?

      Excluir
    2. MUUUUUUUUUUUUUUITO OBRIGADA! Vou tentar de novo e te aviso! *-* ps: ADORO O SEU BLOG E JÁ INDIQUEI PARA MAIS 7 AMIGAS, E VOU FAZER UM POST SOBRE ELE E TUDO O QUE EU APRENDI COM VOCÊ! Obrigada! *-*

      Excluir
  17. Oi Elaine, no meu deu certo mas não ficou centralizado, ele ficou na esquerda,como eu faço para centralizá-lo?

    ResponderExcluir
  18. Me ajudou muito , obrigada :)

    www.magichellen.blogspot.com

    ResponderExcluir
  19. Olá, Elaine... Instalei o aplicativo no meu blog e esta funcionando direitinho se não fosse o fato de aparecer apenas 6 miniaturas... Já tentei mudar pra 8 (que é o numero que eu quero) mas não aparecem essa quantidade :s O que eu faço? HELP

    ResponderExcluir
  20. Muito obrigada o post me ajudou bastante, já faz algum tempo que eu já procurava esse tutorial mas todos davam erro... Suas dicas tem sido fantásticas! Muito sucesso pra vc beijos ;)

    ResponderExcluir
  21. Coloquei no meu blog e ficou perfeito! Alterei a largura das imagens e a margens e ficou lindo!
    Obrigada!
    http://nossarotina-arthur.blogspot.com.br/

    ResponderExcluir
  22. Elaine você é fantástica!
    Acabei de colocar no meu blog e ficou perfeito, muito obrigada!
    Bjs

    www.vireimoda.com

    ResponderExcluir
  23. Eu já tenho no meu. Só que é vertical. Quero mudar pra horizontal. Como faço??


    www.bloggeucerqueira.com

    ResponderExcluir
  24. Oi, Elaine! Muito obrigada pelo post, já estava querendo aprender a colocar essa galeria já faz um tempo... Mas a minha não ficou centralizada. Sabe como devo fazer?

    ResponderExcluir
    Respostas
    1. Daiane, você precisa ir alterando a largura das imagens até elas se ajustarem à largura de seu layout.
      Não tem como dizer exatamente qual largura usar porque cada lay é diferente do outro...

      Excluir
  25. amei deu super certo! muito obrigada :)

    ResponderExcluir
  26. A parte dos resumos não funciona. ;(

    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…