Colocando slide de postagens recentes no blog

em 31 de outubro de 2012

Slide de postagens recentesFaz muito tempo que tenho inserido este slide em alguns blogs que personalizo. Ele lista e exibe em forma de slide as postagens recentes do blog. Tem um efeito muito bonito de transição e pode ser personalizado ao seu gosto.
Vamos aprender?

Comece abrindo a página dos códigos.
Deixe aberta para copiar no momento em que precisar.


Copiar os códigos


A seguir faça login em seu painel administrativo do blog. Clique sobre o nome do blog no qual deseja inserir o slide de postagens recentes.
Daí clique na aba Modelo, à sua esquerda. Vai abrir o código-fonte de seu blog. Dentro da caixa de código tecle Crtl+F e na barra de pesquisa que expandir digite </body> e tecle Enter para localizar.
Preste atenção, tem que ser exatamente assim, tá?
Acima dela cole o primeiro código, que é o arquivo JQuery que fará o slide funcionar.

Agora vamos aplicar os estilos ao slide. Localize este trecho:

]]></b:skin>

E acima dele cole o código CSS, que define a aparência do slide.
Atenção para as partes marcadas no código: elas indicam o que pode ser personalizado em termos de cores, tamanhos, etc.

Importante:
Você pode alterar a altura  e a largura que o slide terá.
Depois de inserir os códigos em seu blog clique em Salvar modelo. Não adianta visualizar pois nada aparecerá. Falta incluir o código HTML.

Para fazer aparecer em seu blog depois de salvar clique para fechar o código-fonte e selecione a aba Layout.
Na página que abrir clique em Adicionar um gadget e escolha a opção HTML/JAVASCRIPT. Na janela que abrir cole o código HTML

Insira o endereço de seu blog no lugar marcado. Não apague a barrinha do final do endereço. Tem que ficar assim: http://www.elainegaspareto.com/
Claro que com seu endereço, certo?
Coloque os valores em height e width iguais aos que colocou no código fonte.
No exemplo coloquei 300px por 700px, mas como expliquei esses valores podem ser alterados.
Depois de pronto salve e arraste para onde deseja que apareça. Clique em Salvar organização.
Prontinho! Seu blog tem um slide de postagens recentes lindo pra chamar de seu!

Observações importantes que você deve ler antes de começar a aventura:

  1. Antes de começar qualquer alteração em seu blog faça backup do seu template. Ouça o conselho de quem já danificou muitos blogs de testes antes de aprender a fazer cópias de segurança. Se algo der errado é só reinserir o template original. Veja aqui como fazer cópia de segurança: Como fazer backup completo do blog
  2. Leia e releia este artigo até assimilar todos os passos a serem feitos. Descrevi exatamente como eu faço, e sempre dá certo.
  3. Caso o slide não apareça em seu blog leia este artigo: Como resolver os problemas do blog? Pode ser que esteja havendo conflito de scripts em seu template.
  4. Seguiu todos os passos e ainda assim o slide não aparece? Releia tudo e veja se não pulou alguma etapa ou esqueceu de inserir o endereço de seu blog no último código. 
  5. Certifique-se de que o feed de seu blog esteja correto pois o slide se baseará nele para rodar.
  6. Caso esteja com dificuldades para copiar e aplicar os códigos leia: Como usar os tutoriais deste blog?

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.

45 comentários , comente também!

  1. Elaine, gosto muito do seu blog!
    Tem um selinho pra vc lá no meu cantinho:

    http://ouvindoamusicaaolonge.blogspot.com.br/2012/10/meu-primeiro-selinho.html

    Espero que goste, beijos!!!

    ResponderExcluir
  2. Oi Elaine, não consegui...Me ajuda? tem que expandir o widget? Aff'
    http://geracaoatrevida.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Michelly, não precisa expandir não.
      Releia tudo com calma, inclusive as observações e veja se não deixou escapar nada.
      bjsssss

      Excluir
  3. Olá Elaine!
    Eu não estou conseguindo colocar imagens na lateral(gadget) do meu blog.
    Escolho um arquivo mas, entra essa mensagem!

    Infelizmente você ultrapassou sua cota de upload de fotos.
    Não sei o que fazer!!
    Um abraço
    Amara

    ResponderExcluir
  4. No meu não deu certo, dá uma olhada:
    www.saudeelazerpiscinas.blogspot.com.br

    ResponderExcluir
  5. Tentei, mas não consegui! Não aparece nada... =(

    ResponderExcluir
  6. Eliane, boa tarde! Estive navegando á procura de ajuda para um tópico para o meu blog e encontrei o seu. Entrei e para minha grata supresa, encontrei um dos melhores blogs de dicas da internet. Parabéns! Além do capricho na página, suas dicas são valiosíssimas. Continue assim. Resolvi minhas dúvidas com suas orientações. Obrigado.

    ResponderExcluir
  7. Esse slide não funciona mais com esses Scripts. O catur-at-abu-farhan.googlecode.com foi desativado, então eu salvei os scripts e seria bacana se você hospedasse eles novamente para alterar aqui no tutorial. Segue os meus links:
    http://teste.bymetemplates.zip.net/nivo-slider-modified.min.js
    http://teste.bymetemplates.zip.net/galleryposts.js

    ResponderExcluir
  8. Olá! Estou tentando usar esse codigo, mas quando slide aparece, todos o meu sidebar vai para o fim dos posts.. o que eu faço?

    ResponderExcluir
    Respostas
    1. Caso seu template seja modificado pode estar havendo conflito de scripts.
      Neste caso não há o que fazer.

      Excluir
  9. elaina não estou cconseguindo não aparece o codigo da uma olhada por favor artsdamarisbel.blogspot.com grata

    ResponderExcluir
    Respostas
    1. Conforme eu disse acima caso seu template seja modificado ou externo ao Blogger o slide pode não funcionar.
      Caso realmente não consiga entre em contato comigo pelo formulário de contato do blog e nós combinamos, posso fazer o trabalho se for possível ser feito.
      Escreve pra mim e a gente combina.
      bjsss

      Excluir
  10. Me desculpa a pergunta mas ...
    Quando li isso -
    Para fazer aparecer em seu blog depois de salvar clique para fechar o código-fonte e selecione a aba Layout. Na página que abrir clique em Adicionar um gadget e escolha a opção HTML/JAVASCRIPT. Na janela que abrir cole este código:

    Fiquei sem saber qual é o gadget, não aparece pra mim ...

    Poderia me informar o código por favor?

    Abraços
    Thiago

    ResponderExcluir
  11. Tentei esse codigo, mas nao funcionou!

    ResponderExcluir
  12. Oii nenhum dos códigos que vc tem eu consigo fazer, não dá pra copiar os códigos gratuitos que vc disponibiliza, o que ta acontecendo???

    ResponderExcluir
    Respostas
    1. Está acontecendo que eu instalei bloqueios contra plágio no blog pois cansei de ser plagiada.
      Aos poucos vou reestruturar todos os tutoriais.
      Este, do Slide de postagens recentes está pronto.
      Para copiar os códigos pare o mouse sobre ele e clique no primeiro ícone que vai aparecer. Abrirá uma janela com o código correto, daí então é só copiar.
      Se tiver algum outro que queira e ainda não tenha sido reestruturado diga no comentário do post em questão e eu provindeciarei tão logo seja possível.
      Certinho?
      beijos, obrigada pela visita

      Excluir
  13. meu bem deu probleminha fica em branco carregando. pode me ajudar!11!

    ResponderExcluir
  14. Oi Elaine, no primeiro código do java, tem um script aberto, não sei qual deles deve fechar o primeiro ou o terceiro!

    ResponderExcluir
    Respostas
    1. Eu revi o código, é o mesmo que eu uso, exatamente assim.
      Tem certeza que copiou tudinho?

      Excluir
  15. Poxaaa, no meu não fucionou, infelizmente, fica sempre aparecendo erro na linha 99. :( Mas obrigada de qq forma.

    http://somoscheiasdegraca.blogspot.com.br/

    ResponderExcluir
  16. Boas elainegaspareto Admin
    Existe ou será possível criar um slider automático(de imagem ou de texto) com todos os posts do blog a passar 1 de cada vez?
    Colocar slider automático de posts recentes não me interessa.
    Se poder ajudar fica aqui, meu contacto e blog.
    Email: Blatfenix@gmail.com
    Blog: http://odbp2p.blogspot.pt

    ResponderExcluir
  17. Elaine, sei que todos os seus posts são produzidos originalmente, então como devo ter um certo respeito com a minha blogueira quebra galho(rsrs), encontrei o mesmo post em outro blog.
    O endereço é:
    http://www.postsinteressantes.com/2013/04/como-colocar-slide-de-postagens.html
    Ele está indêntico.
    Meio que não tem nada a ver comigo, mas eu sei o quanto é chato e resolvi informar
    Obrigado pelas ajudas!

    ResponderExcluir
    Respostas
    1. Edson, muito obrigada por avisar.
      Se você soubesse o quanto isso acontece...
      Nem me refiro aos códigos, mas à postagem em si, você queme conhece reconhece na hora o estilo.
      Esse é o motivo de eu ter incluído alguns bloqueios no blog.
      Quando vejo postagens inteiras, meus prints de tela, minha forma de escrever, até minhas expressões usadas à minha revelia em blogs de baixa qualidade como esse que cita sinto vontade de bloquear de fato o blog, feed, postagens por email, etc
      Daí lembro que 90% das pessoas são legais e o blog ajuda.
      Então deixo como está.
      Se estou com tempo eu denuncio, senão deixo pra lá.
      Sabe de uma coisa?
      Jamais vi um ladrão de conteúdo ir muito longe.
      Kibadores sempre se ferram, na maioria das vezes sozinhos, sem leitores, sem acessos, sem reputação...

      Muito obrigada de novo.
      beijossss

      Excluir
  18. No meu deu certo, http://www.terraguarabira.com/, Obrigado pela dica e pela ajuda

    ResponderExcluir
  19. ai não ta dando pra copiar seus codigos

    ResponderExcluir
    Respostas
    1. Pare o mouse sobre o código, e clique no primeiro ícone que aparecer.
      Daí abrirá uma janela com o código.

      Excluir
  20. fiz tudo como vc mandou mais ñ deu certo depois de tudo feito quando vou visualizar o blog fica tudo em branco.

    ResponderExcluir
    Respostas
    1. Keiti, tem certeza que não esqueceu nada?
      Colocou o endereço do blog no gadget html, certinho? Com http e sem apagar as aspas?
      bjssss

      Excluir
  21. Elaine, é impossível conseguir colocar isso, reduzi para 5 px pr aver se conseguia mas ele continua do mesmo tamanho, invade o espaço dos posts, desse meio mundo d eimagem, é imprevisível e continua do mesmo tamanho!

    ResponderExcluir
    Respostas
    1. Edson, acabei de colocar aqui:
      http://bico-olhareseperspectivas.blogspot.com.br/
      Você trocou as dimensões tanto do código quanto do gadget?
      Tem que trocar de ambos...

      Excluir
  22. PARABÉNS!!!!!
    TEM COMO ALTERAR A VELOCIDADE DOS SLIDES (REDUZIR).
    CASO TENHA ME INFORME NO E MAIL DANIELISRAEL.IAP@GMAIL.COM

    MUITO OBRIGADO ESSE É O LINK DO MEU BLOG CASO QUEIRA CONFERIR : http://impactoaudioblog.blogspot.com.br/

    ResponderExcluir
  23. MUITO OBRIGADO!!!! PARABÉNS!!!!

    UMA DÚVIDA, TEM COMO ALTERAR A VELOCIDADE DO SLIDE? CASO TENHA ME INFORME NO E MAIL danielisrael.iap@gmail.com

    ESSE É O MELHOR BLOG DE TUTURIAIS.

    ResponderExcluir
    Respostas
    1. Creio que não dá pra mudar a velocidade não. Infelizmente...

      Excluir
  24. Olá, eu consegui, porém o meu ficou muito largo, o que devo fazer?

    ResponderExcluir
  25. Poderia postar uma visualização prévia do modelo?
    ..Aguardando :)
    http://yugiotakus.blogspot.com.br/

    ResponderExcluir
  26. Tem como mudar a imagem do botão.Se tiver,como?

    ResponderExcluir
  27. Oi ! no meu deu certo!

    polianaatelie.com

    ResponderExcluir
  28. Olá! Primeiramente queria dizer que estou adorando o seu blog. Como sou eu mesma quem faço meus templates é muito bom encontrar blogs como o seu. Parabéns!!! Fiz o passo a passo no meu blog e deu super certo, Única dúvida que tenho é em relação ao tamanho da fonte do slide, pois achei pequena e procurei aonde modificar o tamanho da mesma no código mas acabei não encontrando. Tem como vc me tirar esta dúvida?
    Beijos, Tami Oliveira
    www.tamioliveira.com.br

    ResponderExcluir
  29. nuito bom me salvou, ja tinha testado varios tutoriais e esse me ajudou.

    ResponderExcluir
  30. Elaine, fiz tudo certo, mas apareceu o mesmo erro de sempre: imagens muito maiores que os gadgets, como se fosse impossível de redimensionar as imagens. Será que esse meu template não permite slides ? Uso o modelo simples, só que personalizado. Caso não esteja entendendo, posso mandar o link do blog.

    ResponderExcluir
  31. Elaine, eu fiz tudo direitinho mas quando olho o blog só aparece 1 postagem no slide! Oq eu faço?

    ResponderExcluir
    Respostas
    1. Nayara, releia o tutorial, refaça em um blog de testes que seja público, e que tenha postagens.
      Também pode ser que seu template tenha scripts que conflitem com o slide...

      Excluir
  32. Elaine, eu gostaria de fazer com que o slide só mostrasse um marcador, isso é possível?

    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…