Galeria de posts recentes de um marcador específico - * Blog Elaine Gaspareto *

Galeria de posts recentes de um marcador específico

em 15/11/2017


Olá, querido leitor que também é blogueiro ou blogueira!
Vou ensinar hoje como você pode ter em seu blog uma galeria de posts recentes bem legal, que não mostra os posts recentes do blog, mas sim os posts recentes de determinada categoria.
Vou te dar um exemplo: eu tenho aqui no blog a categoria (marcador, tag, é a mesma coisa no Blogger) chamada Receitas.
Então, se ao invés de exibir os posts recentes do blog eu quiser criar uma página só com os posts da categoria Receitas ela ficaria mais ou menos assim:


Demonstração do tutorial


Fica legal, né?
Dá pra ser usado em uma página, assim como em minha demonstração, mas também pode ser usado em uma postagem se preferir.
Assim:
Seleção de receitas simples e que funcionam

Quer aprender comofaz? Vem comigo!
Antes de mais nada copie o código necessário ao tutorial:


Copiar o código


Agora vá até o painel de seu blog e caso vá instalar a galeria em uma página clique, claro, em Páginas. A seguir clique em Nova página, coloque o título que deseja e então clique em HTML, no alto do editor de páginas.
Essa ação reverterá o editor para o modo HTML.
Cole então o código que disponibilizei e no campo onde marquei ENDEREÇO DE SEU BLOG coloque o endereço completo de seu blog.
No espaço onde coloquei CATEGORIA coloque a categoria (marcador) cujos posts deseja exibir.

Preste atenção!
Tem que colocar a grafia exata do seu marcador escolhido, ok? Se for, por exemplo, Dicas para blogs não pode colocar dicas para blogs pois não aparecerá nada.
Grafia exata do marcador, falou?
Feito isso clique em Publicar. Se tudo deu certo sua galeria já aparece.


Outras formas de usar a Galeria de posts recentes


Caso deseje usar a galeria em um post faça o mesmo processo: depois do post pronto reverta-o para o modo HTML e cole o código como expliquei se fosse para uma página.
Publique seu post normalmente.

Se desejar uma galeria para mostrar os posts recentes na sidebar confira este tutorial:



Dicas extras de personalização:


1- A quantidade de posts definidos no meu código é de 40 posts. Note que o número 40 se repete em 2 ocorrências do código.
Para alterar essa quantidade altere o valor 40 em ambas as ocorrências.
2- O tamanho de cada miniatura é definido nessa parte:
var imgDim = 235;
Altere o valor 235 para encaixar em seu blog.
3- Se quiser tirar o efeito arredondar ao passar o mouse apague  o trecho de <style> até </style> e salve. Se quiser personalizar o grau de arredondamento altere os valores expressos em border-radius. Olha um exemplo diferente, usando minha categoria Dicas para blogs.
4- Caso apareça uma mensagem no editor de postagens quando você for publicar a página ou o post com a galeria clique em Dispensar e publique normalmente. Isso acontece por causa do protocolo https que só está disponível para blogs sem domínio próprio. Se seu blog usa Blogspot no endereço a mensagem aparecerá; se você tem domínio próprio não aparecerá.

Importante:
Eu editei e hospedei o arquivo javascript que faz a mágica acontecer em minha conta Tumblr.
Se quiser baixar e hospedar em seu próprio host eu recomendo.
Clique no endereço do arquivo (está no código), salve-o em um bloco de notas e hospede como desejar.



E é isso, querido leitor!
Enjoy!
And share the post!
(Aproveite e compartilhe o post que eu hoje estou bilíngue rsrsrsr)



9 comentários via Blogger
comentários via Facebook

9 comentários:

  1. O seu site é o melhor! Não tem idéia de como ja salvou minha vida. Os problemas que encontro no meu site, coloco no google e olha quem aparece sempre! Elaine Gaspareto! Obrigada pelas ótimas dicas e Parabéns!

    ResponderExcluir
  2. Encontrei seu site hoje e gostei, muitas dicas úteis para quem tem blog!

    Beijos
    http://orangelily.com.br/

    ResponderExcluir
  3. Boa tarde
    Mais uma dica legal,fiz tudo direitinho como você ensinou e não deu certo nem na postagem,nem na página.Aconteceu de todas as fotos das postagens ficarem com o efeito arredondado.Vou tentar novamente.
    Beijos

    ResponderExcluir
  4. Eba,tentei de novo e agora deu certo,aquele apóstrofo faz diferença,quando selecionava para colocar o link do blog,ele ficava junto e aí não dava certo mesmo.
    Beijos

    ResponderExcluir
    Respostas
    1. Ah, que bom!
      Sim, em códigos assim cada sinal faz diferença, sempre!
      bjssss

      Excluir
  5. Boa tarde Elaine
    Hoje coloquei essa galeria de posts no final da postagem,ficou bem legal,já que não consigo colocar o widget do Link Within.Gostei do efeito arredondado,mas tirei pois coloca esse efeito em todas as fotos das postagens.Tem como deixar o efeito só na galeria?Valeu mesmo.
    Beijos

    ResponderExcluir
    Respostas
    1. Maria, para tirar o efeito é só apagar de style a style conforme explico no post, nas Dicas extras, item 3.
      bjsss

      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…



No Instagram