Slide de postagens recentes para blog- simples e fácil de instalar

em 15 de janeiro de 2014

slide de postagens recentes para blog

Destacar as postagens recentes do nosso blog pode ser uma boa ideia para cativar aquele leitor que chega ao blog direto em uma postagem específica e não na página inicial do blog.
Nesse caso o slide mostra o que de mais atual foi postado, mantendo o leitor mais tempo no blog.
E isso é muito importante para diminuir as taxas de rejeição do Google Analytics e ajudar a melhorar o posicionamento do blog frente aos mecanismos de pesquisa.






Há algum tempo mostrei como instalar um slide de postagens recentes aqui no blog.
Veja:
Slide de postagens recentes

Ele tem muitos efeitos lindos de transição mas a instalação é mais complicada.
Esse que mostro hoje é mais simples, basta um passo e ele estará prontinho, lindo e funcionando em seu blog.
Ficará assim:


Demonstração do tutorial

Instalar o slide de postagens recentes no blog

Entre em seu painel e clique na aba Layout. 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


Optei por colocar o código dessa forma porque ele fica muito extenso e não dava para formatar corretamente e fazer caber na área de postagem do meu blog.
Basta abrir a página, selecionar todo o código e copia-lo.

Todas as modificações que você pode fazer estão marcadas no próprio código. Dá pra mudar cores, largura e altura, cor de fundo da paginação, etc.
Altere cores trocando os códigos das cores.
Aqui tem uma tabela de cores com seus respectivos códigos hexadecimais.

Caso queira e tiver conhecimento suficiente pode também alterar a largura do slide.
Se desejar alterar a quantidade de posts exibidos localize este trecho dentro do código: numPost:11
E troque o número 11 pelo número de posts que quiser exibir.

Agora preste atenção!
Onde você lê AQUI O ENDEREÇO DE SEU BLOG substitua, claro, pelo endereço de seu blog, sempre começando com http. Não apague nem duplique a barra do final.
Depois de pronto arraste para onde deseja que fique e salve as alterações.
Nos testes que fiz só dá certo se colocar na sidebar.
Tem que testar, pois cada template tem suas particularidades.

Caso tenha dúvidas releia o tutorial até se certificar de haver entendido certinho.
Se mesmo assim as dúvidas persistirem deixe nos comentários e na medida do possível tentarei ajudar.

E se sentir vontade curta a postagem, compartilhe nas redes sociais. Essa ação ajuda o blog a crescer e melhorar, me motiva e 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.

75 comentários , comente também!

  1. Oi Eliane, adorei a ideia e já instalei no meu blog, até aumentei para 14 o número de postagens a serem exibidas no slides.
    Mas gostaria de uma informação. Achei que pesou um pouco o visual nos nº das páginas, no quadrinho preto. Se eu quiser mudar a cor do quadrinho ou até mesmo excluí-lo, como eu faço?
    Beijos,
    www.viagensebeleza.com

    ResponderExcluir
    Respostas
    1. Ana Maria, para trocar a cor do quadrinho procure por paginação e troque os valores expressos lá pelo código da cor que deseja usar.
      Se quiser deixar sem cor tire o código #333 e coloque no lugar transparent
      Isso, claro, deixa o fundo transparente.
      beijos

      Excluir
  2. Obrigada pelas dicas :)
    milene
    http://cantinhodesouvenirs.blogspot.pt/

    ResponderExcluir
  3. OI Elaine, você é uma musa inspiradora dos blogs. Como você descobre essas coisas todas?
    Beijos
    Chris
    http://inventandocomamamae.blogspot.com

    ResponderExcluir
  4. Elaine bom dia,amiga seria possível tirar o numero de postagens ou seja,não aparecer os números embaixo do slide e como faço para alargar mais?não consegui,a largura só fica em 270px?tentei 470px e não deu certo,você tem alguma solução amiga?segue o link do meu blog de testes veja - http://vidaboanet.blogspot.com.br/ parabéns pelo seu belo trabalho,aguardo.bom dia fique na paz...f

    ResponderExcluir
    Respostas
    1. Não, acho que não dá pra tirar os números não, não tentei, mas acho que não dá.
      Para aumentar o tamanho do slide precisa, além de aumentar a largura em width encontrar thumbWidth:e aumentar a largura da miniatura, que no código está expresso em 250px.
      Certinho?
      Att.

      Excluir
  5. Olá Elaine que lindo esse slide adorei, obrigado, seu blog sem duvida alguma é o melhor blog que já visitei e visito sempre, tem muita coisas legais e interessantes, é super organizado, parabéns por esse lindo trabalho que você faz. felicidade sempre para você!

    ResponderExcluir
  6. Elaine, o seu empenho e o seu carinho chegaram até Portugal! Aqui, por terras de Sintra, as suas dicas alegram o nosso quotidiano de blogueiros amadores! O nosso cantinho virtual não teria nascido se, há 2 anos, não a tivêssemos encontrado! Não teria crescido para a nossa comunidade escolar (e não só!) sem a suas preciosa ajuda.O nosso abraço longínquo e reconhecido! José Maria Silva e Maria Laura Matos http://ferreiradiasenoites.blogspot.pt/2014/01/premio-dardos-merci.html

    ResponderExcluir
  7. Oi Elaine, muito bom o seu blog, visito sempre tá? Coloquei o código no meu, mas por algum motivo, algumas fotos dos artigos não aparecem. Dá para saber o pq?
    http://modapeleemuitomais.blogspot.com
    Agradeço desde já.
    Abraços!!

    ResponderExcluir
    Respostas
    1. Railce, as fotos são todas inseridas na postagem ou você usa o recurso de copiar o endereço e aí sim inserir?
      Se for, pode ser esse o motivo.
      Caso contrário não sei dizer, infelizmente...
      bjsssss

      Excluir
  8. Ola! boa tarde meu nome è Tatiane ferreira adorei sobre os post , foi muito útil para mim que possuo um blog e sei a dificuldade de nós blogueiros temos para fazer um blog com sucesso , vc sempre tem ótimos artigos para passar para nôs sò tenho agradecer vc estar de parabéns, se vc quiser conhecer meu blog seja bem vinda meu link è http://dycasdataty.blogspot.com.br espero que goste beijossss

    ResponderExcluir
  9. Instalei, mais fiz como ela falou, coloco a postagem com o link e por último a foto, não deu problema, mais se selecionar o texto com a foto junto e anexar o link, dá problema, não aparece a imagem...:) Valeu pela dica...

    ResponderExcluir
  10. Adorei deu super certo no meu blog !! beijos ;*
    http://jaqueandrei.blogspot.com

    ResponderExcluir
  11. ola ,

    Obrigado pelo poste. Eu instalei no meu blog tudo deu certo mas so aceite no navegador do google chrome quanto testo no internet explore e fire fox nao funcione poderia dar alguma dica a respeito?

    ResponderExcluir
    Respostas
    1. Pedro, eu uso o Firefox e sempre testo no IE.
      No meu caso funciona em todos os navegadores, sendo que no IE eu ativei o modo de compatibilidade.
      Mas pode ocorrer de apresentar erros sim.
      Entretanto, no meu pc, aparece corretamente em todos os navegadores, até no Opera...

      Excluir
  12. realmente muito bom, quem inventou este código é um grande profissional.
    produtosecursos.blogspot.com

    ResponderExcluir
  13. APRENDAM A MUDAR O NUMERO DE POSTS PARA FICAR BONITO EM SEU BLOG.
    +fco josé de oliveira Oliveria para mudar o numero de posts é só abrir o gadget com o código "DA" "Ctrl + F" digitar isto " numPost: " na caixa de busca que aparecerá e apertar enter, e você encontrara "numPost:11" se ainda tiver original o código, ai é so mudar o 11 pelo numero que deseja.

    ResponderExcluir
  14. Olá to com um pequeno problema as fotos no slide não ficam alinhada por que tenho que meche a aonde no condigo ???

    ResponderExcluir
    Respostas
    1. Minhas fotos tambem ficam imensas e nao aparecem direito

      Excluir
  15. Obrigadaa Elaine, deu certinho! Adorando suas postagens!
    Abraço!

    ResponderExcluir
  16. ajudou muito1 deu tudo certo!vlw
    aliás gostei muito do seu blog!

    olha o slide lá na barra lateral do blog:
    http://mylifeentretenimento.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Este comentário foi removido pelo autor.

      Excluir
    2. Olá amiga, deu tudo certo! Muito obrigado!
      Agora tem jeito de tirar os números referente a quantidade de páginas exibidas abaixo do slide?
      Abraço,

      Excluir
  17. Oláa, eu consegui tirar as caixas de números das postagens sem afetar o slide. Quem quiser: https://docs.google.com/file/d/0B_trDgdbhM3UZHJNaTlUdElJVGM/edit?pli=1

    ResponderExcluir
  18. Adorei! Além de resolver muitos problemas que eu tinha no meu blog também estou deixando ele bem mais bonitinho! amei! obrigada por dividir essas dicas com a gente! bjs

    ResponderExcluir
  19. Olá Elaine... no meu blog, apareceram três faixas dos números de postagens... e agr?

    ResponderExcluir
  20. OI Elaine, eu estava doida procurando uma forma de colocar o slide sem ter que mexer no código do blog. Mas tudo que achei era complicado. Sem paciência! Mas aí achei seu passo a passo. Deu tudo certo. Adorei! Bjs

    ResponderExcluir
  21. gostei muito do slide, mas no meu blog nao funciona. talvez tenha algo a ver com a template, uso uma "awesome". pena... :/

    ResponderExcluir
  22. Funcionou direitinho! mas queria aumentar a largura da imagem, quando mudo a largura do slide aumenta só o espaço e a imagem fica do mesmo tamanho. Dá pra alterar?

    ResponderExcluir
  23. Nossa essa postagem arrebentou, muito boa...
    Willams da http://lojahost.net

    ResponderExcluir
  24. Que bacana, Elaine! Deu super certo no minas ;)
    Abraço,
    Jussara - minasdemim

    ResponderExcluir
  25. Elaine, tudo bem? Coloquei no meu blog, mas ele não aparece, fica o espaço mas sem nada! Você saberia me falar qual o problema? Não entendo quase nada de HTML, então não sei o que fazer!
    Esse é meu blog: http://cajuland.blogspot.com.br
    Obrigadaa Jú!

    ResponderExcluir
    Respostas
    1. Jú, esse slide só funciona se colocado na sidebar, conforme digo no tutorial.
      Se colocar acima da área do post ele não funciona.
      bjssss

      Excluir
    2. Muito obrigada Elaine! :D
      Beijoos!

      Excluir
  26. Adoreeei, mas preciso saber como aumenta o numero de colunas no slide??

    ResponderExcluir
    Respostas
    1. Karol, como assim número de colunas?
      Não entendi...

      Excluir
  27. O meu slide deu certo, queria que ficasse como o seu o que vc deu de exemplo...várias postagens em miniatura mas só ficou uma no centro, pode me ajudar?

    ResponderExcluir
    Respostas
    1. Renata, desculpe, não entendi.
      Qual foi o problema que você encontrou?

      Excluir
    2. Ele aparece apenas um slide de cada vez. No exemplo, aparecem vários, um ao lado do outro...

      Excluir
    3. Renata, tem certeza?
      O que aparece um ao lado do outro é a numeração. O slide em si é apenas um quadrado, e as imagens vão alternando.
      Não está confundindo com o gadget que está no topo, abaixo do cabeçalho?

      Excluir
  28. entre em contato comigo por e-mail dizendo quanto você cobra para colocar o slid com atualizações recentes no meu blog..crisolda_tbl@hotmail.com

    ResponderExcluir
  29. Oi!
    Não consegui ver o códico você se importa de me mandar por e-mail?
    meninadivadamoda@gmail.com

    ResponderExcluir
    Respostas
    1. Luana, clique no botão Copiar o código, ele está disponível em uma página à parte do blog.

      Excluir
  30. Oi Eliane,
    tudo bem?
    instalei, mas não aparece nenhuma imagem no meu, o que poderia ser?
    Obrigada

    ResponderExcluir
    Respostas
    1. Paula, você o colocou na sidebar?
      Ele só funciona na sidebar, tá?
      Pode ser isso...

      Excluir
  31. consegui, porém quando coloco o contador de visitas desaparece como faço para ficar os dois

    ResponderExcluir
  32. Olá Elaine, tudo bem?
    gostaria de lhe avisar que o código não funcionou aqui comigo no meu blog?
    se puder me ajudar vou ficar muito grato.

    ResponderExcluir
  33. Oi Elaine, tudo bem?
    Esse slide tinha ficado lindo e ótimo no meu blog, muito obrigada pela dica.
    Mas notei que ele parou de funcionar, agora só aparece o título.
    Voltei aqui na sua postagem e vi que no seu blog de demonstração aconteceu a mesma coisa!
    O que pode ter ocorrido?
    Beijoss

    Blog Quero Ir

    ResponderExcluir
    Respostas
    1. Tatiane, tem certeza?
      No meu blog de contos está normal, olhei agora.

      Excluir
  34. Esse site gera automaticamente um slide pra você em poucos minutos http://yoututorialonline.com.br/como-colocar-um-slide-ou-galeria-de-fotos-no-blog/

    ResponderExcluir
  35. Oi, eu conseguir fazer certinho, mas as imagens ficaram um pouco grandes, tem como diminuir a imagem sem mexer em tudo no blog?

    ResponderExcluir
  36. Olá, Elaine.

    Tentei este código agora, mas só está aparecendo uma única miniatura e não várias (uma do lado da outra), como no exemplo da demonstração. Como eu faço para que fique deste jeito?

    Dá uma olhadinha no meu blog www.maesemfrescura.net

    Obrigada. Bjs, Pri

    ResponderExcluir
  37. Muito bom a Dica! Coloquei seu codigo no meu blog :D Porque eu Amooo!

    Confere lá.

    http://blogdasrtapaloma.blogspot.com.br/ Abraços, Srta Paloma.

    ResponderExcluir
  38. Elaine amei a dica só que no seu blog de testes ele aparece um do lado do outro ou seja as postagens estão uma do lado das outras o meu só fica uma postagem e fica indo automaticamente tipo aparece uma e depois de uns segundos vai a outra postagem eu queria um tipo o seu do seu blog atual esse aqui! Ou talvez igual ao do blog de testes mais eu não sei :(
    Pode me ajudar?! Beijão!

    ResponderExcluir
  39. Se eu quiser deixar ele redondo o que eu preciso fazer?

    ResponderExcluir
  40. Oi, Elaine! Tudo bem? Então, eu fiz tudo exatamente como você explicou e tentei por diversas vezes. O que acontece é que o espaço fica todo em branco, o que devo fazer? Uso o blogger e o tema é o Janela de Imagem

    ResponderExcluir
  41. Olá Elaine, muito obrigado pela ajuda.
    Você saberia me dizer como faz pra tirar a legenda/descrição que fica embaixo da foto?

    ResponderExcluir
  42. Instalei, ficou ótimo. http://tarcsilva.blogspot.com.br/
    Parabéns Elaine!
    Que Deus continue iluminando e te abençoando.
    PAZ E BEM!!!

    ResponderExcluir
  43. Elaine,oie
    Por favor como faço pra aumentar a largura do slide?

    brigado *-*

    www.luzesdeparisblog.blogspot.com.br

    ResponderExcluir
    Respostas
    1. Isa, leia o código, essa informação está nele e no tutorial.
      bjss

      Excluir
  44. Muito obrigada Elaine.Deu super certo.
    Aqui é um espaço de aprendizado.
    Beijos,fica com Deus,feliz final de semana.

    ResponderExcluir
  45. Oi amores!!! No meu blog está aparecendo postagens de outro blog pq???

    ResponderExcluir
  46. ola tem como aumentar a velocidade dos slides?
    www.juniorcarvalhosp.blogspot.com.br

    ResponderExcluir
  47. Elaine quero tirar os números de postagens, quem souber, pode me dar a dica.
    Obrigado!

    ResponderExcluir
  48. OLA FLOR TUDO BEM?
    PRECISO MUITO DA SUA AJUDA EU CONSEGUI COLOCAR EM MEU BLOG:ellaediferente.blogspot.com porem nao esta mostrando as imagens das postagens oq eu faço?

    ResponderExcluir
  49. Olá, deu super certo cmg,mas onde ficou os numeros das paginas, se repetiu logo abaixo...
    Como posso fazer pra tirar o de baixo?
    http://cainhorick.blogspot.com.br/
    Aguardo resposta.

    ResponderExcluir
  50. Olá, adorei o post mas gostaria de saber se tem como colocar no wordpress? Beijos

    ResponderExcluir
  51. Olá Elaine queria se possível um que as postagens rolasse da direita para esquerda ou vice versa mas sempre ocupando a faixa completa de publicidade. deixaria muito se vc me ajudasse.macielwell@gmail.com

    ResponderExcluir
  52. Olá Elaine tudo bem? Estou criando um blog e não consigo por nada fazer aparecer os slades das postagens recentes. Já fiz inúmeras tentativas e nada.Por favor me socorre.

    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…