Galeria de postagens com miniaturas de imagens para o blog

em 25 de julho de 2013


Uma das maneiras mais simples e eficazes de "prender" o leitor por mais tempo em nosso blog é mostrando à ele mais conteúdo, mais opções de postagens.
O gadget que vou compartilhar com você exibe suas postagens mais recentes ou, se preferir, exibe postagens aleatórias de seu blog.

Para exibir as postagens de forma aleatória este é o código:


Copiar o código


Depois de copiar acesse o painel de seu blog e clique na aba Layout.
Clique em Adicionar um gadget e escolha a opção HTML/JAVASCRIPT.
Na janela que expandir cole o código copiado.
Faça as alterações para que combine com seu blog e depois de pronto clique em Salvar.
Arraste para onde deseja exibir e clique em Salvar alterações.

Sugiro que coloque acima da área de postagem, abaixo do menu ou no footer de seu blog. Se colocar na sidebar as imagens aparecerão na vertical pois o gadget precisa de espaço para ser exibido.

Tudo que pode ser alterado em termos de aparência deixei marcado em capslock.
Para alterar a quantidade de postagens exibidas troque :
numposts+"&max-results=6 pelo número que desejar.

Do jeito que está o gadget exibirá postagens aleatórias. Se desejar exibir suas postagens recentes troque:
numposts = (5 +(2*(hoje.getSeconds())))
por
numposts = 1

Se você exibe, por exemplo, 5 postagens em sua página inicial do blog sugiro que o gadget mostre as postagens recentes à partir da 6ª postagem, pois assim ele tem mais utilidade.
Para fazer isso troque o número 1 pelo 6; assim o gadget começará a exibir suas postagens mais recentes à partir da 6ª.

Importante:
Só funciona na versão Postagens aleatórias se seu blog tiver ao menos 60 postagens, tá? Se tiver menos que isso ele não aparecerá.
Na versão Postagens recentes funciona com qualquer quantidade de postagens.


Gostou?
Curte aí!

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.

38 comentários , comente também!

  1. Adoreiiiiii..e já fiz..ver la como ficou..
    Obrigada por mais essa Dica..
    Beijos..

    ResponderExcluir
  2. E funciona mesmo. Eu mesma não resisto a uma imagem bonita "chamando" prum outro post... ;)
    Abraço!

    ResponderExcluir
  3. Vou fazer lá no meu blog.
    Se der certo, maravilha rsrsr
    Obrigada.
    Beijos.

    ResponderExcluir
  4. Muito obrigada por compartilhar, ja fiz o meu e adorei. Bjos

    ResponderExcluir
  5. Aparentemente útil... mas estou usando o serviço linkwich... qual será melhor?

    ResponderExcluir
  6. Menina a ideia é boa! E funciona muito bem!
    Quando puder vem ver...
    Um beijo e obrigada por compartilhar!
    Telma
    www.ambienteseideias.blogspot.com

    ResponderExcluir
  7. Já fiz e deu certinho. Muito obrigada Elaine.
    Deus abençoe muito a sua vida.
    Tenha um lindo fim de semana.
    Bjs.

    ResponderExcluir
  8. Oi Elaine! Ótima dica! Sabe uma coisa que eu já tentei descobrir várias vezes como faz, mas ainda não consegui, é fazer aparecer as miniaturas para outras postagens relacionadas no fim de cada postagem. No caso do seu blog são as miniaturas após "Fique um pouco mais comigo. Leia mais:". Agradeço muito se puder ensinar isso!

    Grande beijo!
    Dani

    ResponderExcluir
    Respostas
    1. Dani, é muito simples:
      Acesse esse site:
      http://www.linkwithin.com/learn

      Lá preencha os campos que a tela pede depois de colocarseu email o endereço completo do blog, escolher a plataforma Blogger e definir quantas miniaturas quer clique em Get widget.
      Vai abrir uma página, clique em Install widget.
      Vai abrir a página com seus blogs caso tenha mais de um, selecione em qual quer instalar e clique em Adicionar widget.
      Prontinho.
      Certo?
      beijossss

      Excluir
    2. Elaine eu acessei o site e coloquei as miniaturas,mas aparece escrito assim " podera também gostar de: " como eu faço pra mudar isso para Veja Também
      beijos agrado a sua responda

      Excluir
  9. Eu já tenho no meu blog, mas por outro tuto. Achei esse bem mais simples. Vou testar ;)
    Beijo...

    ResponderExcluir
  10. Grata surpresa receber sua visita!
    Me senti como uma aluna tendo seu dever de casa supervisionado pela professora...rsrs
    Realmente, não tenho muita intimidade com esses assuntos de HTMLs e afins, mas gosto das suas dicas e orientações - geralmente são muito didáticas e simples.
    Quanto ao banheiro, me mande fotos e medidas que terei imenso prazer em te ajudar!
    Se quiser se inspirar veja esse link com vários projetos: http://ambienteseideias.blogspot.com.br/p/banheiros.html
    Quem sabe não tem algum que se pareça com o seu!
    Grande beijo, Telma

    ResponderExcluir
  11. Gostei muito do que vi !
    Muito difícil encontrar espaços bacanas como este :_)

    Deixo o meu aqui caso queira dar uma olhada,

    http://bolgdoano.blogspot.com.br/

    Agradeço desde já !

    ResponderExcluir
  12. Obrigadoooo muito bom... e funciona certinho... obrigado de novo!.. Adorei! :D

    ResponderExcluir
  13. Oi Elaine passei por aqui e aproveitei para usar esse tuto,obrigada mais uma vez por disponibilizar,um excelente domingo,bjs...

    ResponderExcluir
  14. Amei Elaine! Fazia muito tempo que eu queria fazer isso e não sabia!!! Obrigada!!!

    ResponderExcluir
  15. se tiver como ser configurado para ser exibido por categoria seria um 10

    ResponderExcluir
  16. Adorei! já fiz no meu blog e ficou muito bom.
    http://aurea-feminina.blogspot.com.br/

    ResponderExcluir
  17. Obrigada ficou muito bom simples, fácil e prático!!!

    ResponderExcluir
  18. Não ta dando de copiar pela forma dita no poster

    ResponderExcluir
  19. Meu Deus muito obrigado! Você não sabe o quanto eu procurei por isso :')

    ResponderExcluir
  20. SENSACIONAL!!! ..... funciona um espetáculo!!!

    ResponderExcluir
  21. Olá! O código está excelente, parabéns! Mas tenho uma pequena questão: o que devo alterar no código para poder utilizá-lo para mostrar postagens apenas de uma dada tag/etiqueta? Aguardo uma resposta! :)

    ResponderExcluir
    Respostas
    1. Esse gadget não faz isso, não há onde alterar.
      Ele lista as postagens de forma aleatória ou então as mais recentes, sempre pelo feed do blog.
      Não dá pra ser por etiquetas, ao menos não que eu saiba...

      Excluir
  22. Parabéns pelo seu blog e perfeito,e amei os códigos colocarei em meu blog depois,ainda estou o criando caso queira conhecer http://goperfectly.blogspot.com ...

    ResponderExcluir
  23. Olá! Como consigo usar este widget várias vezes no blog? É que eu já tentei usar duas vezes este widget no meu blog (um com postagens aleatórias e outro com as mais recentes) e não consigo personalizar cada um individualmente. Quando altero um, o outro também fica alterado com a mesma coisa... Estou a fazer-me entender?

    Aguardo resposta :)

    ResponderExcluir
  24. Oi Lindona Tudo bem!
    Personalizei meu Blog inteiro com Dicas daqui, e olha que usei um template básico, e ficou como eu queria, Muito obrigada por fazer esse post que tanto nos ajuda.
    Vi quem em algumas paginas de demostração essas miniaturas estão com a COR DE FUNDO DA LEGENDA levemente transparente( opacidade) Gostaria de saber como faço pra deixar assim.
    E se tiver curiosidade da uma passadinha lá no blog para vc ver como ficou graças aos tutoriais.
    Bjs Bjs Bjs.

    ResponderExcluir
  25. Olá! Existe alguma maneira de colocar as imagens com um formato retângular sem ficarem com aquele efeito "esticadas"?

    Eu acho que o problema está no "var bsrpg_thumbSize = 100; /* TAMANHO DA MINIATURA */"

    ResponderExcluir
  26. Me ajudou bastante, muito obrigado por compartilhar essas dicas com a gente!

    ResponderExcluir
  27. Oi Elaine, tudo bom?
    As imagens não estão aparecendo, aparece apenas a descrição, pode dar uma dica do que eu posso fazer?
    Obrigada!

    ResponderExcluir
  28. Oi Elaine, tudo bem? Seus tutoriais são sempre excelentes, mas este não consigo entender. O trecho onde vc escreveu: "para copiar pare o mouse sobre ele e clique no primeiro ícone que surgir". Não entendi qual é esse "ele" que tenho que parar com o mouse e qual é o ícone que vai surgir". Me dá uma luz? Amei o código e não queria deixar de usá-lo. :-( Abraços

    ResponderExcluir
    Respostas
    1. Renata, eu já atualizei o post.
      É que ele é antigo, da época que eu usava Syntax para copiar os códigos :)

      Excluir

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…