Galeria de postagens recentes com miniatura de imagens e links de navegação

em 26 de agosto de 2015

Uma das formas que a gente pode usar para manter o leitor por mais tempo em nosso blog é entregar para ele os links de nossos outros posts, sejam os posts relacionados ao que ele está lendo, seja os posts mais comentados, as postagens mais vistas ou os posts mais recentes.

O tutorial de hoje mostra exatamente isso, uma galeria moderna e interessante que mostra os posts recentes do blog mas com links de navegação no rodapé do gadget.
Olha o print:

É bem simples de instalar e todo mundo vai conseguir fazer; basta ler o código com atenção até se certificar de haver entendido e caprichar na personalização.
Vamos lá?

Instalar a galeria de postagens recentes

Para começar, vá ao painel de seu blog e clique na aba Design (ou Esquema, se você estiver em Portugal).
Clique em Adicionar um gadget e escolha a opção HTML/JAVASCRIPT.
Dentro da caixa que expandir cole este código:

Copiar o código


Deixei marcado no código tudo que você pode editar: cor de fundo, cor de borda, tamanho das miniaturas, etc.
Tudo que está compreendido entre <style> e </style> pode ser alterado para personalizar a aparência de sua galeria.
É opcional, mude se desejar.
Mas o campo ENDEREÇO DE SEU BLOG  é obrigatório, ok?

Coloque título em seu gadget, se desejar, altere os campos que definem cor, fundo, borda, etc, insira o endereço completo de seu blog no campo que destaquei em capslock, salve e arraste para onde deseja que fique.
Salve as alterações do layout de seu blog.

Se você fez tudo certo sua galeria estará como no meu exemplo. Veja:

Demonstração do tutorial

Dicas extras

  1. É importante ler o código para entender o que cada linha faz. Acredite em mim, é muito mais simples do que parece, e faz muito sentido cada coisa que está ali.
  2. A fonte dos títulos vai seguir o padrão de sua sidebar.
  3. Todas as cores (fundo, borda, fonte, etc) são definidas pelo código hexadecimal da cor, precedido do sinal #. Para alterar a cor altere o código.
  4. Aqui tem uma tabela de códigos de cores.
  5. Não mexa no código do script; só mexa ali se dominar mesmo códigos. Acredite, eu mexi e foi tenso...
  6. Eu coloquei as explicações, testei em 5 blogs diferentes, traduzi os comandos, retirei algumas linhas que davam erro, gastei uns 3 dias no total pra deixar o código assim, rodando sem erro, fácil de entender e usar. Ele funciona, se fizer como estou dizendo.
  7. Então, não tenha preguiça de ler com calma, editar o básico e fazer com paciência.

Gostou do tutorial?
Clique em Curtir/Compartilhar ou recomende no G+.
Assim o tutorial pode chegar à mais pessoas e ainda, de quebra, você me deixa feliz...

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.

10 comentários , comente também!

  1. Muito fácil e bem explicado como sempre. Ficou muito legal no +40BC.
    Mais uma vez, obrigado pela força. Era exatamente o que eu procurava! :)

    www.mais40bemcuidado.com.br

    ResponderExcluir
  2. Muito bonito. E fácil, pois se até eu que sou um calhau com olhos nestas coisas consegui por no Sexta.
    Um abraço e muito obrigada.

    ResponderExcluir
  3. Bom dia Eliane Gaspareto! Se você poder me explicar porque alguns post Pin it teve umas marcação como theBERRY e outra parece ser um formato de v(letra vesinho em verde! Temptei pesquisar mais não entendi.
    Obrigada.

    ResponderExcluir
    Respostas
    1. Neusa, eu não faço ideia do que você deseja saber, não entendi a pergunta...

      Excluir
  4. Olá, Elaine!
    Não é a primeira vez que visito o seu blog e/ou usufruo das suas dicas, eu já fiz isso várias vezes. E também já te agradeci por isso. Mas, acho tão bonito a gente compartilhar com os demais aquilo que nos aprendemos, que não me canso de te agradecer. Inclusive, esses dias fiz um post sobre o seu blog, como mais uma forma de agradecimento também. Muito obrigada pelas dicas enriquecedoras e, principalmente, pela sua generosidade.
    Mega beijo!

    http://tamiresmirele.blogspot.com

    ResponderExcluir
  5. Você é a poderosa do HTML rsrsr
    Mas esse é facinho de colocar, não é?
    Saúde e paz.
    joturquezzamundial
    Beijos.

    ResponderExcluir
  6. Fiz, deu certinho e já está funcionando no Blog...muito obrigada! Estou ficando craque, aprendendo aqui! Boa semana!

    ResponderExcluir
  7. Oiii...minha pergunta está um pouco fora do tema mas quero saber se possível se é bom ter dois blogs? Eu fiz isso e dou conta até porque e recente RS ambos falam de temas que gosto muito um dicas de beleza e bem estar e outro mais de auto ajuda...fiz isso pq achava que tinha que separar o conteúdo... Mas agora visitando a outros blogs vejo que há uma temática variada dentro dos blogs e to começando a me arrepender...VC acha que é boa essa separação? Se quiser unificar tem como? E porque um gera receita e o outro não? Desde já agradeço e desculpe a pergunta tão grande...

    ResponderExcluir
  8. Você é massa, Elaine! Adoro seus tutoriais. Muito obrigada por nos ajudar.
    Beijos

    ResponderExcluir
  9. Olá eu gostaria de saber se tem como exibir apenas postagem de um determinado marcador utilizando esse código?

    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…