Galeria de postagens recentes com efeito ao passar o cursor

em 25 de março de 2015

galeria de postagens recentes com efeito ao passar o mouse
Alô, gente querida!
O tutorial de hoje é bem rápido e fácil, e dá ao blog um ar moderno e fofo. Olha ali na imagem que ilustra o post, como ficaria em meu blog.
Estou falando de um gadget que mostra os posts recentes do blog, e que exibe o título quando passamos o mouse sobre cada imagem.
Assim:

Demonstração do tutorial


Para ter em seu blog é muito, muito fácil!
Faça assim: vá ao seu painel e clique na aba Layout. A seguir clique em Adicionar um gadget, escolha a opção HTML/JAVASCRIPT  e na janela que expandir cole este código:

Copiar o código



Modifique o código nos lugares marcados para que a aparência dele combine com seu blog, salve as alterações e posicione-o onde deseja que fique.
Eu sugiro abaixo do menu, caso seu blog tenha, ou abaixo do cabeçalho caso seu menu seja no topo do blog.
Também fica bem legal acima da área de postagens.

Dicas extras:

1- Evite aumentar demais o tamanho das miniaturas porque fica desproporcional;
2- Se não quiser mostrar os posts recentes desde o último pode optar por mostrar desde aquele que escolher.
Por exemplo, vamos supor que seu blog exiba 4 posts na página inicial. Você pode configurar o gadget para começar a exibir os posts à partir do 5º.
Para isso altere o número 1 em
numposts = 1;  /*--define em qual post começa a exibição --*/
Para o número 5.
3- Se colocar acima da área dos posts diminua ou o tamanho das miniaturas ou a quantidade de posts exibidos, mexa e ajuste até caber e ficar perfeito!

Importante!!!
Além de ler e entender o tutorial, leia o código do gadget.
Todas as áreas editáveis estão discriminadas lá.
Leia com atenção, releia até compreender, e dará certo...



Gostou?
Que tal compartilhar o tutorial, ou curtir... ou recomendar no G+...


Você já conhece minha loja de templates à pronta entrega e serviços adicionais para blogs?
Clique e confira!

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.

52 comentários , comente também!

  1. Ai Meu Deus!! Estava procurando esse tutorial desde criei meu blog (quase um ano) Muito Obrigado, Elaine!! <3
    http://www.chegueiaosdezoito.com

    ResponderExcluir
  2. Oláa florzinha, gostei muito da dica. Vou testar agora mesmo no meu blog.

    ResponderExcluir
  3. Nossa Elaine, parabéns pela loja, cada vez que venho aqui vejo como ficou enorme seu blog, na verdade ´me parece um site gigante!!!! Tudo muito bacana, confesso eu até tenho medo ás vezes rssssss bjo sucesso

    ResponderExcluir
  4. Acabei de levar para o blog! Mais uma vez obrigada!

    ResponderExcluir
  5. Como poderia fazer a imagem aumentar quando passar o mouse sôbre a foto ( ex. fotos do estadão virtual). ...mais essa !!!

    ResponderExcluir
  6. Corrigindo o comentário acima ( ex. fotos do globo.com ao invés do estadão )

    ResponderExcluir
  7. Tem como colocar mais miniaturas? Ou o limite é 4 mesmo?

    ResponderExcluir
  8. Adorei o tutorial, deu super certo! Obrigada :D
    http://www.leticiakoliveira.com/

    ResponderExcluir
  9. elaine,fiz isso no meu blog de teste, e ficou do lado esquerdo...
    eu queria que ficasse igual o da demonstração, abaixo do menu principal... me ajuda?

    ResponderExcluir
  10. Ameii o tutorial , porém o fundo está ficando cinza , modifiquei todos os códigos relacionados as cores mas não deu certo ?! oque pode ser ?

    ResponderExcluir
    Respostas
    1. coloque um nome no gadget, vá no modelo e pesquise nos códigos o nome que você colocou e veja se é HTML1, HTML2, ... digamos que seja HTML1, pesquise nos códigos HTML1, caso encontre, apague todo o código que você encontrou... qualquer dúvida por falar

      Excluir
  11. Ameiiiiiiiiiiiiiiiiiiii, precisava muito disso ♥♥♥

    ResponderExcluir
  12. Testei e já coloquei no meu blog! Obrigada Eliane, a cada dia estou melhorando meu blog graças as suas dicas.

    www.vidadegentegrande.com.br

    ResponderExcluir
  13. Elaine, isso fica lindo demais!!! Mas sabe o que eu queria fazer? Deixar essa exibição não das postagens recentes, mas depois que a pessoa acessa uma categoria. Por exemplo, na página inicial fica aparecendo meus 3 últimos posts inteiros, daí na coluna da direita tem a lista das categorias. Quando o leitor clica em alguma categoria, ao invés de aparecer os posts inteiros um abaixo do outro, gostaria que aparecesse uma página com vários posts da categoria, por exemplo, umas 6 bolas dessas com a imagem e o título do post.
    Tem como fazer assim? Diz que siiim! hahaha
    Beijos

    ResponderExcluir
  14. Deu supre Certo, Adoro seu tutoriais.
    Bjs Bjs Bjs

    ResponderExcluir
  15. Adorei o tutorial! Mas ao invés de deixar as bordas arrendondadas,tem como deixarem elas quadradas ?

    Beijoos

    petitmee.blogspot.com

    ResponderExcluir
  16. Respostas
    1. O nome é, claro, o mesmo que você deu aos seus posts, a captura é automática.

      Excluir
  17. Olá Elaine, amei esse post e me ajudou muito deu certinho! q-estillo.blogspot.com.br

    ResponderExcluir
  18. Oi Elaine, adoro seus tutoriais e amei esse! Uma pergunta: Tem como deixar o efeito hover na imagem toda?

    ResponderExcluir
    Respostas
    1. Mari, nunca testei mas em tese seria na parte do código que define altura e largura da legenda...

      Excluir
  19. Também quero saber se tem como deixar quadrado ao invés de redondo, se sim vou botar já no meu blog :)

    ResponderExcluir
    Respostas
    1. Mariana, como eu disse no tutorial, leia o código. Tudo que pode ser alterado está especificado nele.
      bjssss

      Excluir
    2. Elaine, adorei a dica! Estava procurando! Seu blog é top! Parabéns! Me ajuda pfv! Eu li e tal, mas não sei como tirar a borda arredondada, e deicar as imagens quadradas, qual código que mudo, e por qual?
      Esperando ansiosa pela sua resposta! Bjus

      Excluir
    3. Dany, apague onde você ler border-radius.
      bjsss

      Excluir
  20. Ficou show no meu blog. Era o que eu estava procurando.
    Mais uma vez, muito obrigado.
    www.mais40bemcuidado.com.br

    ResponderExcluir
  21. Oi Elaine,
    no meu blog só tem a opção de adicionar gadget na vertical do lado direito, não tem a opção na horizontal abaixo do menu, como faço? Eu queria colocar os menus também na horizontal, mas não consigo.

    ResponderExcluir
    Respostas
    1. Rosane, eu não sei dizer.
      Cada template tem características próprias e em alguns casos é preciso criar uma div abaixo do menu pra poder inserir gadgets ali...

      Excluir
  22. Oi Elaine, eu descobri porque não tinha a opção de adicionar o gadget, era o layout do corpo que eu havia escolhido, que não tinha essa opção. Agora eu troquei o layout e ficou ótimo, obrigada!
    Estou adorando aprender com você, meu blog está ficando do jeitinho que sempre sonhei, graças a você. Muito obrigada.
    Beijos

    ResponderExcluir
    Respostas
    1. Ah, que bom que deu certo!!!
      É assim mesmo, tentar até conseguir!
      beijosss

      Excluir
  23. Olá Elaine! Eu fiz tudo direitinho do gente que você descreveu, li todos os códigos, coloquei o url do meu blog no local azul, adicionei o gadget abaixo do meu menu, porém, mesmo assim não apareceu nada, nadinha. Sabe me dizer o que há de errado? Obrigada ^^ Ah... até tentei pôr no meu css mas nada de aparecer :(

    ResponderExcluir
    Respostas
    1. Ingrid, não tem como eu saber.
      Sugiro que tente em outro modelo, ou então que tente colocar o gadget em outro local...

      Excluir
  24. Olá Elaine, seu blog sempre me ajuda quando estou desesperada!! Esse sábado eu fiz alguma coisa que desconfigurou o blog inteiro! Entrei em pânico. Mas com sua ajuda eu consegui refazer inteiro. Amei esse tutorial, porém eu gostaria muito desse modelo aplicado no POSTAGENS POPULARES, seria possível? Agradeço desde já!
    www.blogleituravirtual.com

    ResponderExcluir
    Respostas
    1. Carol, acho que tem jeito sim, mas nunca tentei.
      Vou ver se dá certo; se der poto o tutorial.
      beijosss

      Excluir
    2. Perfeito! Vou continuar acompanhando! Se der eu vou amar *-*

      Excluir
  25. Acabei de colorar no meu blog, deu super certo! Obrigada!!!
    Tem como eu deixar as imagens quadradas?

    ResponderExcluir
  26. Elaine me ajuda o meu acaba ficando do lado da foto do perfil , da uma olhada e vê se pode me ajudar ! www.jessynascimentoo.blogspot.com

    ResponderExcluir
  27. O que eu posso estar fazendo para ficar um do lado do outro?

    ResponderExcluir
    Respostas
    1. Rebecca, não entendi.
      Eles ficam lado a lado...

      Excluir
    2. A primeira vez que testei as imagens ficaram na vertical mas desfiz tudo, saí do blogger, entrei novamente e colei o código e ficou tudo certo... acho que foi bug do blogger... hahahaha

      Excluir
  28. Oi Elaine, adorei o tutorial, consegui deixar quadrado como eu queria mas eu queria que ficasse alinhado com o corpo do blog ou centralizado. Tentei fazer algumas alterações mas não surtiram efeito. Tem como me ajudar?
    É um blog teste então não repare no layout bagunçado... hahahaha
    http://umsacodepancadas.blogspot.com.br/

    Muito obrigada e um beijo.

    ResponderExcluir
  29. Adoreeeeei!
    Bem fácil de personalizar.
    Obrigada!

    http://vivendomilvidas.blogspot.com.br/

    ResponderExcluir
  30. Fala Elaine, obrigadão pelo código, tava atrás de algo parecido.
    Teria como modificar esse código pra aparecer um marcador do blog ao invés das postagens recentes?

    ResponderExcluir
  31. Olá, aqui ficou puxando as suas postagens Elaine e não puxou as postagens do meu blog.

    ResponderExcluir
  32. consegui, era só mudar o endereço do blog no códgio bem no finalzinho dele. ali em document.write("<script src=\
    .
    obrigado pelo tutorial

    ResponderExcluir
  33. Como faço para ao inves do Feed eu colocar um marcador especifico ?

    ResponderExcluir
    Respostas
    1. Aqui no blog tem outro tutorial que mostra como colocar por categoria.
      Dá uma olhada na página Dicas para blogs, por favor :)

      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…